谈谈前端渲染 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 也没多大作用，如果实在要考虑：
1.可以使用 pjax / quickling / hash bang 等技术
2.服务器端根据 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 还是要差些的，放到浏览器端渲染可能白屏时间更长一些
这里推荐一下我的前端学习交流群：784783012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。