前后端渲染方式对比

一、简介

前端渲染：
指的是前端请求（例如ajax请求，jsonp请求），接受后端返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，拼接字符串，并插入页面。

后端渲染:
前端请求，后端用后台模板引擎(例如ejs、jade)直接生成html，前端接受到数据之后，直接插入页面。

二、技术对比

前端渲染

优势：

1. 端口分离，前端专注视图, 后端专注数据
2. 可维护性高，模板进行同一化的管理, 视图层的改变, 容易更改。 不需要再去后端代码中分离，需求变更时, 后端在需要时提供数据接口即可， 前端只需更改视图层
3. 前端渲染的项目, 跨平台时, 后端代码完全无需更改, 前端代码复用率可达到百分之七十五以上.效率极高
4. 响应速度极快，每一次响应, 改变的只有数据, 所有的DOM元素全部加载完成, 渲染页面非常高效

劣势：

1. 不利于SEO优化，大量使用ajax，多数浏览器不能抓取ajax数据。
2. 首次开发成本提高，后端需要开发一套完整接口，前端需要开发一套完整模板逻辑
3. 首次打开页面, 加载多余的DOM元素，DOM元素一次性加载, 在首次加载时, 时间变长
4. 安全性降低，用户在使用攻击时, 更加容易看到隐藏的DOM元素.

后端渲染

优势:

1. 开发速度快，单独开发，不涉及前端端交互
2. SEO友好度较高， 能够一次性渲染页面,利于搜索引擎抓取
3. 页面第一次呈现速度稍快
4. 页面呈现消耗流量较低
5. 更加安全，用户无法发现隐藏的DOM元素.很难进行XSS攻击

劣势:

1. 可维护性差，页面一次成型, 后期稍改需求, 就要涉及到后端的大量更改
2. 编码效率低，前后端代码混在一起, 不利于开发.后端没有办法专注数据, 前端没有办法专注视图
3. 无法进行跨平台开发，一旦项目成型, 是什么样,就是什么样.完全没有办法从浏览器移植安卓等系统中，也就是不能调用相机, 语音等平台设备