谈谈前端渲染 VS 后端渲染

作者: 560b7bb7b879 | 来源:发表于2018-11-05 19:03 被阅读15次

    看看下面的测试时间,单位: 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客户端自己管理渲染.

    对于PC端HTML内容的渲染,我还是比较建议Bigpipe推.

    如果是采用ajax拉,那么页面上每一个部件要多增加一个客户端请求. 而请求带来的请求体解析,本身是十分消耗服务器资源的.

    比如一个网页有3个部分,来自3个数据库请求:

    [用户账单] 
    [用户消息]
    [用户文章]
    如果是Bigpipe, 过程是这样的:

    客户端请求
    服务器发送布局HTML
    服务器发送渲染过的<script>用户账单</script>
    服务器发送渲染过的<script>用户消息</script>
    服务器发送渲染过的<script>用户文章</script>
    服务器发送HTML结束标签</body></html>

    只有1次服务器请求

    如果是前端ajax渲染, 过程是这样的:

    客户端请求
    发送完整HTML布局页
    客户端用户账单ajax请求
    客户端用户消息ajax请求
    客户端用户文章ajax请求
    服务器发送用户账单数据
    服务器发送用户消息数据
    服务器发送用户文章数据
    这个过程需要4次客户端请求. 就算是把后3个ajax合并为一个ajax,也需要2个客户端请求.

    浏览器端渲染优点:

    分散服务端渲染时间到浏览器端
    http response 大小也会减少
    对可维护性也有很大好处
    很容易搭建 前端独立的开发环境
    减少了模板修改跟后端同步的问题
    缺点就是:

    seo
    首屏会有白屏
    最头疼的一个问题可能是 业务逻辑的问题,因为很容易业务逻辑就跑到 js 来了
    前端渲染的方式的话我觉得不一定是 bigpipe ,还要看场景;

    对移动端上我觉得还是后端渲染好些,因为移动端上 cpu 还是要差些的,放到浏览器端渲染可能白屏时间更长一些

    这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

    相关文章

      网友评论

        本文标题:谈谈前端渲染 VS 后端渲染

        本文链接:https://www.haomeiwen.com/subject/orvlxqtx.html