[转]谈谈前端渲染 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 仍是要差些的，放到浏览器端渲染可能白屏时间更长一些