架构

模板渲染

当获取到数据库的数据之后，按照一定的规则将其载入到写好的模板中，输出成在浏览器显示的HTML页面，这个过程就是渲染。

后端渲染

优点：对搜索引擎友好，首屏加载时间短
缺点：不利于前后端分离，开发效率低，占用服务器资源

服务器进程从数据库获取数据后，利用后端模板引擎，将数据加载进来生成HTML，并返回到客户端，最终被浏览器解析成可见的页面

首页加载时间短：后端渲染加载完成后就直接返回显示 HTML，但前端渲染在加载完成 后还需要有一段 js 渲染的时间。

image.png

image.png

image.png

前端渲染

1. 局部刷新。无需每次都进行完整页面请求

2. 懒加载。如在页面初始时只加载可视区域内的数据，滚动后加载其它数据，可以通过react-lazyload 实现

3. 富交互。使用 JS 实现各种酷炫效果

4. 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可

5. 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现

6. JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

同构渲染

总结

渲染的本质都是一样的，都是字符串的拼接

• 将数据渲染进一些固定格式的html代码中形成最终的html展示在用户页面上。
• 字符串的拼接，必然会引起性能的消耗
• 服务端渲染：性能消耗在服务端。
  当用户量比较大的时候，可以缓存部分数据来避免过多数据的重复渲染
• 客户端渲染：在首次渲染时，大多是将原html中的数据标记替换掉

服务端渲染性能消耗在服务端，当用户量比较多时，缓存部分数据以避免过多数据重复渲染。 客户端渲染，如当下火热的 spa 框架，Angular、React、Vue，在首次渲染时，大多是将原 html 中的数据标记（如 {{ text }} ）替换。客户端渲染较难的一点是数据更新以后，页面响应式更新时如何节省资源，直接 DOM 的读写，是很消耗性能的。 Vue 2.0 + 有 Vnode，进行 diff 后，渲染到页面上。

https://www.jianshu.com/p/0719c6102639

以下是模板渲染的一个例子

helper

http://www.cnblogs.com/yldf55/p/5147996.html
http://www.tuicool.com/articles/aiaqMn
http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/ 中文官网

Helpers：
在Helper里也能做一些判断，然后在页面上使用else判断；
通过return options.fn(this)返回true的结果，
通过return options.inverse(this)返回else要执行的内容

#模板
{{#equal data1 data2}}
  <p>两个数相等</p>
{{else}}
  <p>不相等</p>
{{/equal}}

#js
Handlebars.registerHelper("equal",function(v1,v2,options){
   if(v1 == v2){
     //满足添加继续执行
     return options.fn(this);
   }else{
     //不满足条件执行{{else}}部分
     return options.inverse(this);
  }
});

• select

Paste_Image.png

Paste_Image.png