服务端渲染和客户端渲染的对比

时间: 2018-06-25阅读: 1532标签: 渲染

这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template

1、script 标签导入包,当这个标签导入完毕后,在window全局中就有了template 函数
2、创建一个script标签,内部是模板字符串<script type="text/template" id="tmpl">
3、 var htmlStr = template('tmpl',{要渲染的数据对象})
4、将创建好的html字符串,追加到页面中即可

 

1、服务器端渲染

     每当有客户端请求页面了,服务器先在后端调用art-template,把指定的页面预先在后端渲染后,然后通过res.end把这个渲染完毕的完整页面,

返回给客户端直接展示。

 优点:对seo友好,因为我们经过服务器端渲染的页面,在网络中传输的时候,传输的是一个真实的页面。因此,爬虫客户端,当爬到我们的页面后,

会分系我们给他提供的这个页面,此时,我们页面中的关键数据就会被爬虫给收录了。

缺点: 服务器端渲染,对服务器压力比较打,可以使用服务器端的页面缓存技术,减轻服务器的渲染压力;不适合前后端分离开发。

 

2、客户端渲染

     每当用户要请求某个页面了,

 第一步,用户需要先把这个页面请求到客户端,此时用户拿到的页面只是一个模板页面。

 第二步,浏览器在解析模板页面的时候,会发起art-template的二次资源请求,同时要发送Ajax请求,去服务器获取数据

 第三步,在客户端调用art-template 渲染HTML结构,并把渲染厚的htmlStr append 到页面指定的容器中;

缺点: 对SEO相当不友好

优点: 减轻了服务器端的渲染压力;同时,最大的好处就是:能够实现前后端分离开发;

 

各自应用的场景:

1、当不需要对SEO友好的时候,推荐使用客户端渲染;

2、当需要对 SEO友好的时候,推荐使用服务器端渲染


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/893

浏览器渲染网页的流程

浏览器渲染网页的流程(HTML CSS JS):1.使用 HTML 创建文档对象模型(DOM)2.使用 CSS 创建 CSS 对象模型(CSSOM)3.基于 DOM 和 CSSOM 执行脚本(Scripts)

一文吃透React SSR服务端同构渲染

前段时间一直在研究react ssr技术,然后写了一个完整的ssr开发骨架。今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人少踩一些坑,让跟多的人理解和掌握这个技术。

flutter: 根视图、根元素与根渲染

flutter如何建立的视图树(WidgetTree),元素树(ElementTree)及渲染树(RenderingTree),又是如何更新视图绘制视图? 这个问题太大,刚开始一切又都是陌生的,理解起来千头万绪,所以先搞清这些树的根结点的身份是非常必要的

如何渲染几万条数据并不卡住界面?

如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。

在React中实现条件渲染的7种方法

借助React,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染。条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在React文档中,这是一种根据条件渲染不同元素或组件的方法

Flutter 是如何渲染的?

要解答这个问题,首先需要认识到 Flutter 中有三棵树: Widget 树, Element 树和 RenderObject 树。当应用启动时 Flutter 会遍历并创建所有的 Widget 形成 Widget Tree ,同时与 Widget Tree 相对应

服务端渲染和客户端渲染:CSR和SSR

现在的web网站都是非常讲究用户体验,一般都会采用服务端渲染加客户端渲染一起实现功能。服务端渲染有利于搜索引擎优化(SEO),利于被网页爬虫抓取数据,多见于电商网站商品信息获取等。客户端渲染不利于搜索引擎优化

Vue服务端渲染

所谓服务端渲染就是将代码的渲染交给服务器,服务器将渲染好的html字符串返回给客户端,再由客户端进行显示。有利于SEO搜索引擎优化,因为服务端渲染是将渲染好的html字符串返回给了客户端,所以其可以被爬虫爬取到;

Vue渲染函数

使用v-else 指令来表示 v-if 的 else,v-else 元素必须紧跟在 v-if 或者 v-else-if元素的后面,否则它将不会被识别 :通常会复用已有元素而不是从头开始渲染(就近原则),key使得Vue渲染速度会变得非常快。

React Native 使用 react-native-webview 渲染 HTML

在 App 中,渲染 HTML 是一个非常常见的功能,有可能是直接渲染 HTML 字符串或者是通过 URL 渲染远程 HTML页面。React Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!