[转]谈谈前端渲染 VS 后端渲染
首先，预编译跟前后端没有关系，预编译一样可以用于后端渲染。
看看下面的测试时间，单位: ms
模板字符串:
var s = '{{#datas}}{{name}} abcdefg {{type}} {{date}}{{/datas}}';
数据对象: 放入100000行数据
var stack = [];
for (var i = 0; i < 100000; i++) {
stack.push({
name: 'name-' + i,
type: 'type-' + i,
date: (new Date()).toLocaleString()
});
}
var datas = {datas: stack};
后端渲染: 生成HTML
var start = Date.now();
require('hogan').compile(s).render(datas);
var end = Date.now();
console.log(end - start); // 166 ms 我的机器时间
前端渲染: 我在这里做了最简单的设定，只把datas转化成字符串
var start = Date.now(); JSON.stringify(datas); var end = Date.now(); console.log(end - start); // 450 ms 我的机器时间
结果对比一目了然，你可以把这个测试用其他模板引擎测试一下。
服务器为了前端渲染，对对象的字符串化所消耗的时间， 远远大于 服务器直接渲染模板生成HTML所花费的时间。
我的建议是前后端模板同时使用．
后端模板＋Bigpipe处理页面加载, 加上预编译, 这要比直接转换对象=>字符串快, 而且减少前端模板文件的加载量
res.write(require('hogan').compile(s).render(datas))要比res.write(JSON.stringify(datas))快前端模板, 主要是部分需要ajax加载的部件
剩下一个最难对付的就是SEO，对于不支持js的机器人，还是需要额外的一套非模板的代码．
这个问题的焦点并不在“放在哪里渲染快”，如果你要考虑这个效率问题，那是不是也得同时思考下：
- 后端渲染完了之后，需要进行网络传输的体积大了，带来的网络损耗和网络传输时间问题
很多场景，尤其是在移动端，我们通常不会把渲染工作交给后端，一方面后端渲染需要时间，一方面庞大的渲染数据传输也有时延，所以就会出现白屏问题。Bigpipe可以一定程度上处理这个问题，不够构架成本略高，用的人偏少。 若把数据交给前端渲染，也存在一定的弊端，比如需求发生变化之后，接口需要调整，前端模板的解析也要跟着一起变化，这样隔着一层接口开发，办事效率就低了很多，因为我们至少要跟开发同学交涉。
nodejs 的出现让模板复用方便了不少，很多时候，让后端渲染一部分（比如首屏部分），后面的工作就交给前端异步去处理。两者结合起来效果才是最佳的。
SEO问题嘛，看产品需求，很多产品优化了 SEO 也没多大作用，如果实在要考虑：
- 可以使用 pjax / quickling / hash bang 等技术
- 服务器端根据 UA 输出内容
不能简单这么比吧，你这个测试只说明V8在你服务器环境上单次执行这个渲染的速度比PC快，但要知道服务器可是每个请求都执行渲染，影响的是全部用户，而前端渲染只影响单机。 所以“后端吐首屏+前端渲染剩下的”是比较合适的办法。
移动端，如果不是webapp，只需要发送数据就可以了．安卓和ios客户端自己管理渲染．
对于ＰＣ端ＨＴＭＬ内容的渲染，我还是比较建议Bigpipe推．
如果是采用ajax拉，那么页面上每一个部件要多增加一个客户端请求． 而请求带来的请求体解析，本身是十分消耗服务器资源的．
比如一个网页有３个部分，来自３个数据库请求:
[用户账单] [用户消息] [用户文章]
如果是Bigpipe, 过程是这样的:
客户端请求 服务器发送布局HTML 服务器发送渲染过的<script>用户账单</script> 服务器发送渲染过的<script>用户消息</script> 服务器发送渲染过的<script>用户文章</script> 服务器发送HTML结束标签</body></html>
只有１次服务器请求
如果是前端ajax渲染, 过程是这样的:
客户端请求 发送完整HTML布局页 客户端用户账单ajax请求 客户端用户消息ajax请求 客户端用户文章ajax请求 服务器发送用户账单数据 服务器发送用户消息数据 服务器发送用户文章数据
这个过程需要４次客户端请求． 就算是把后３个ajax合并为一个ajax，也需要２个客户端请求．
浏览器端渲染优点：
- 分散服务端渲染时间到浏览器端
- http response 大小也会减少
- 对可维护性也有很大好处
- 很容易搭建 前端独立的开发环境
- 减少了模板修改跟后端同步的问题
缺点就是：
- seo
- 首屏会有白屏
- 最头疼的一个问题可能是 业务逻辑的问题，因为很容易业务逻辑就跑到 js 来了
前端渲染的方式的话我觉得不一定是 bigpipe ，还要看场景；
对移动端上我觉得还是后端渲染好些，因为移动端上 cpu 还是要差些的，放到浏览器端渲染可能白屏时间更长一些
