<p><code></p> <p><strong>欢迎大家前往<a href="https://cloud.tencent.com/developer/?fromSource=waitui" rel="nofollow noreferrer" target="_blank">腾讯云+社区</a>,获取更多腾讯海量技术实践干货哦~</strong></p> <blockquote><p>本文由<a href="https://cloud.tencent.com/developer/user/2681943" rel="nofollow noreferrer" target="_blank">shirishiyue</a>发表于<a href="https://cloud.tencent.com/developer/column/73029?fromSource=waitui" rel="nofollow noreferrer" target="_blank">云+社区专栏</a> </p></blockquote> <p>目前我这边的web页面,都是采用php+smarty模板生成的,是一种比较早期的开发模式。好处是没有现阶段常用的前后端分离出现的首屏问题,因为其本身就是服务器渲染,坏处是代码分离不好做,公用化及组件化不好做。这里涉及前后端分离相关问题,老生常谈,这里暂不讨论。</p> <p>​ 近期,在做一些前端分离的尝试。采用国内非常流行的的vue框架,选这个框架而不是react的原因主要是vue的mvvm保留html书写惯性,对于html里写代码多的人来说更容易入手。而且流行框架vue也经过了极大量的测试验证,参考资料充实详尽,可靠性和易用性都满足条件,没有理由不尝试一下。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>​ 总的来说,做了一个如下小应用demo,长下面这样,三个简单页面,分页查看所有王者英雄,或者所有装备。分别采用 php+smarty,vue-cli,vue+ssr,三种方式进行开发,完了再对结果做一下对比。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021264" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>​ 三个版本的体验入口如下<em>(尽量用手机浏览器扫描,微信对ip域名有特殊处理),</em></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021265" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>​ 三个版本并没有严格做相同环境处理,所以下面的对比分析仅作为直观上的对比了解,并不适用于详细性能上的严格对比额。</p> <p>​ 对三个页面分别进行webpage test,测试结果如下,</p> <p><strong>▲ 详细结果</strong></p> <p>​ php版:</p> <p><a href="https://www.webpagetest.org/result/181108_2D_20fc46a11de58d60dde7421b6d3be954/" rel="nofollow noreferrer" target="_blank">https://www.webpagetest.org/r...</a></p> <p>​ vue ssr 服务器渲染版:</p> <p><a href="https://www.webpagetest.org/result/181108_XY_92f54bd829b1b6f02634774294491736/" rel="nofollow noreferrer" target="_blank">https://www.webpagetest.org/r...</a></p> <p>​ vue-cli 静态版:</p> <p><a href="https://www.webpagetest.org/result/181108_4G_011f6c33da1e7f199f8a1ecd03ef0728/" rel="nofollow noreferrer" target="_blank">https://www.webpagetest.org/r...</a></p> <p><strong>▲ 综合参数</strong></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021266" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <p>1、页面加载时间。理所当然是纯静态的vue-cli最快。vue ssr 和 php 版差不多(忽略上面的php版,因为php版有一些额外资源要加载)。</p> <p>2、首字节时间。静态的最快。若扣除dns时间,其实php和vue-ssr版差不多。(注:php版和vue ssr版不是部署在同一台机器上,php版机器性能要强一些,多核,vue-ssr版机器比较弱单cpu单核)</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_5_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_5_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_5" name="aswift_5" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>3、渲染时间和页面呈现熟读指数,vue ssr版比php版本稍微慢一点。这是因为,php的html到页面后直接就呈现了,而vue ssr到client后,有一个vue框架的渲染过程。</p> <p><strong>▲ 加载瀑布流</strong></p> <p>​ 从加载流的角度上看一下三者的区别,</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021267" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span>php版本</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021268" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span>vue ssr 服务器渲染版本</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021269" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span>vue-cli静态版本</p> <p>​ 从瀑布流上可以看出很多三种页面执行方式的区别,列举一部分如下:</p> <p>1、php 版以及 vue-ssr 版 有较长的服务器处理时间,,,对应的首字节时间明显高于没有服务器处理的vue-cli静态页面。</p> <p>2、由于服务器版本的php或者vue-ssr的首屏数据都已经生成了,所以页面不会再次请求接口,少了数据的请求过程。而vue-cli版有一个较长的数据请求过程。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_6_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_6_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_6" name="aswift_6" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>3、vue-cli静态页面的dom content time 或者 document comp<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e time 明显最短,原因是模板html几乎没什么内容。</p> <p>4、webpack打包拆离出来的独立js或者css文件,其实在同一域名下,由于浏览器同一域名可以并行6个tcp,以及http的keep-alive性质,其实总的下载时间不多。对比看,跟阻塞的dns时间差不多。</p> <p>5、三种页面 Start Renderer Time 分别是 1.2s,1.3s,2.0s。 vue-cli静态页面生成的白屏时间中,大部分是首屏数据请求消耗的时间,,同时也可以对比出,服务器渲染的对首屏时间的确有很明显的效果。</p> <p><strong>▲ 直观体验</strong></p> <p>​ 时间,,平均速度指数Speed Index,分别是1.2,,,1.3,,,2.0s,,,可以观察下面的对比视频体验。</p> <p>​ &gt;<a href="https://game.gtimg.cn/images/user/cp/a20180412tk/test/PageExperience.html" rel="nofollow noreferrer" target="_blank">点此观看动态视频&lt;</a></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017021270" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span></p> <blockquote><p> <strong>相关阅读</strong><br /><a href="https://cloud.tencent.com/developer/edu/course-1128?fromSource=waitui" rel="nofollow noreferrer" target="_blank">【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识</a> </p></blockquote> <p><strong>此文已由作者授权腾讯云+社区发布,更多原文请<a href="https://cloud.tencent.com/developer/article/1362652?fromSource=waitui" rel="nofollow noreferrer" target="_blank">点击</a></strong></p> <p><strong>搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!</strong></p> <p>海量技术实践经验,尽在<a href="https://cloud.tencent.com/developer?fromSource=waitui" rel="nofollow noreferrer" target="_blank">云加社区</a>!</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25816.html