模板渲染
当获取到数据库的数据之后,按照一定的规则将其载入到写好的模板中,输出成在浏览器显示的HTML页面,这个过程就是渲染。
后端渲染
优点:对搜索引擎友好,首屏加载时间短
缺点:不利于前后端分离,开发效率低,占用服务器资源
服务器进程从数据库获取数据后,利用后端模板引擎,将数据加载进来生成HTML,并返回到客户端,最终被浏览器解析成可见的页面
首页加载时间短:后端渲染加载完成后就直接返回显示 HTML,但前端渲染在加载完成 后还需要有一段 js 渲染的时间。
前端渲染
局部刷新。无需每次都进行完整页面请求
懒加载。如在页面初始时只加载可视区域内的数据,滚动后加载其它数据,可以通过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