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

时间: 2018-06-25阅读: 263标签: 前端

这里结合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友好的时候,推荐使用服务器端渲染


多种认证、授权模型的比较

本文主要列举在如今前后端分离、手机App大行其道的现状下,用户认证、授权的几种做法及对比。本文假设你已经理解了各种认证模式的具体细节。

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

作为一个前端,可以如何机智地弄坏一台电脑?

有人说,前端的界限就在浏览器那儿。无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去。想象一下,有天你在家里上网,吃着火锅还唱着歌,点开一个链接,电脑突然就蓝屏了!

前端工程师/程序员简历怎么写?

其实前端工程师并不少,但很多时候合适的前端工程师难找。可能是由于程序员比较内向,前端工程师都没有把自己最厉害的那一面表现出来。今天我们来聊聊前端工程师的简历怎么写,希望能够对大家有帮助。

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

实施微前端的六种方式

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是,这些前端应用可以独立运行、独立开发、独立部署。

Web前端工程师必备的PS技能之切图

Web前端工程师必备的PS技能之切图:PS中我的标尺的参考线为什么不能自动吸附图层或画布中间了?有个选项没有选择“菜单栏-视图-对齐”,按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片为“切图”

前后端分离之让前端开发脱离接口束缚(mock)

前后端分重构完成,再书写交互时遇到后台接口尚未完成,无法得到接口返回的测试数据,但是我们又需要一些数据来测试我们的前端功能的时候,所以呢,今天学习的关于前端模拟AJAX的三种办法,用于应对以上情况,加快开发效率;

前后端分离后,后端应该知道的一些基本前端知识

作为前端小白,经常遇到同样小白的后端,常常不得不三番五次科普一些前端的基础知识,特此做些总结,前后端分离后,后端需要知道的基本前端知识:什么是ajax?跨域、OPTIONS请求、重定向等

使用jenkins进行前端项目自动部署

使用jenkins进行前端项目自动部署:后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护。一般地,前端项目使用jenkins来进行自动部署,包括打包、测试等一系列流程。本文将详细介绍jenkins的使用