## **前端渲染：**

访问网页时，先请求到 html 内容，并渲染出来。然后根据需要发送 ajax 请求获取后台返回的数据来更新页面。

**好处**：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。

**坏处**：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。

## 后端渲染

服务器渲染

访问网页时，后端将 html 内容与 json 数据拼接好之后再返回到客户端来渲染。

后端模板

ejs

pug( jade )

art-template

**好处**：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板）

**坏处**：占用服务器资源。

前端在没兴起之前，网页的展示大都是后端渲染，也就是服务器渲染。

随着前端行业的发展，前端的工作越来越精细。前后端开始分离，前端只关注ui渲染。后端只提供数据和进行逻辑处理。

简单的解释，前端写好html模板，让后端直接填数据，这就是后端渲染。

前端渲染是，通过ajax请求接口返回的数据，将数据渲染出来。后端只写接口，分工更明细。

**

## 前端渲染与后端渲染对比：**

**后端渲染**：

页面呈现速度：快，受限于用户的带宽

**流量消耗**：少一点点（可以省去前端框架部分的代码）

**可维护性**：差（前后端东西放一起，掐架多年，早就在闹分手啦）

**seo友好度**：好

**编码效率**：低（这个跟不同的团队不同，可能不对）

**前端渲染：**

页面呈现速度：主要受限于带宽和客户端机器的好坏，优化的好，可以逐步动态展开内容，感觉上会更快一点。

**流量消耗**：多一点点（一个前端框架大概50KB）当然，有的用后端渲染的项目前端部分也有在用框架。

**可维护性**：好，前后端分离，各施其职，代码一目明了。

**SEO友好度：**差，大量使用ajax，多数浏览器不能抓取ajax数据。

**编码效率**：高，前后端各自只做自己擅长的东西，后端最后只输出接口，不用管页面呈现，只要前后端人员能力不错，效率不会低。