架构
模板渲染
当获取到数据库的数据之后，按照一定的规则将其载入到写好的模板中，输出成在浏览器显示的HTML页面，这个过程就是渲染。
后端渲染
优点：对搜索引擎友好，首屏加载时间短
缺点：不利于前后端分离，开发效率低，占用服务器资源
服务器进程从数据库获取数据后，利用后端模板引擎，将数据加载进来生成HTML，并返回到客户端，最终被浏览器解析成可见的页面
首页加载时间短：后端渲染加载完成后就直接返回显示 HTML，但前端渲染在加载完成 后还需要有一段 js 渲染的时间。
image.png
image.png
image.png
前端渲染
-
局部刷新。无需每次都进行完整页面请求
-
懒加载。如在页面初始时只加载可视区域内的数据，滚动后加载其它数据，可以通过react-lazyload 实现
-
富交互。使用 JS 实现各种酷炫效果
-
节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
-
天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
-
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
