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

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

这里结合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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

web 前端页面的渲染(DOM)

CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容。

页面需要渲染10万条数据,应该怎么实现?

设置总数据源,页面内容数据存储容器,制定页面内容数据存储容器规则。用户滑到地6屏数据的时候,显然前面5屏数据不在可视窗口,那你可以将存储容器的前3屏数据删除。同时,再从总数据源取第11屏到第13屏数据。

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

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

解决使用vue.js未渲染前代码显示问题

在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak

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

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

vue中数据更新变化,而页面视图未渲染的解决方案

在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。

从浏览器渲染过程看重绘回流

浏览器渲染过程如下:解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树。将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree)。Layout(回流): 根据生成的渲染树,进行回流(Layout)

浏览器渲染网页的流程

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

vue单页面应用改造为多页面服务端渲染

正在开发中的项目是采用vue,Vue+router搭建的单页面应用,因2C项目有SEO的需求,就需要把当前的项目改为多页面+服务端渲染,调研之后使用了easywebpack-cli脚手架,基于Egg + Vue + Webpack4多页面服务端渲染项目

CSS 渲染原理以及优化策略

提起 CSS 很多童鞋都很不屑,尤其是看到 RedMonk 2019 Programming Language Rankings 的时候,CSS 竟然排到了第七位。我们先来看看这张排行榜:

点击更多...

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