欢迎大家到腾讯云+社区获取更多腾讯海量技术实践的干货~本文由shirishiyue发表于云+社区专栏。比较早的开发模式。好处是不会出现现阶段常用的前后端分离时出现的首屏问题，因为本身就是服务端渲染。缺点是代码分离不好做，公共化和组件化不好做。这里涉及到前后端分离相关的问题，老生常谈，这里不再赘述。最近在做一些前后端分离的尝试。使用国内非常流行的vue框架，之所以选择这个框架而不是react，主要是因为vue的mvvm保留了html编写的惯性，对于html编写大量代码的人来说更容易。而且，流行的框架vue也经过了大量的测试和验证。参考资料丰富详尽，可靠性和易用性符合条件。没有理由不试试。总的来说，我做了一个下面这个小应用的demo，大概是这样的，三个简单的页面，可以在页面中查看所有的王者英雄或者所有的装备。使用php+smarty，vue-cli，vue+ssr，三种方式开发，然后比较结果。三个版本的体验入口如下（尝试用手机浏览器扫一扫，微信对ip有特殊处理域名),三个版本并没有严格处理相同的环境，所以下面的对比分析只是为了直观的对比和理解。不适用于详细性能的严格比较。分别在三个页面进行网页测试，测试结果如下，▲详细结果PHP版本：https://www.webpagetest.org/r...Vuessr服务器渲染版本：https://www.webpagetest。org/r...vue-cli静态版：https://www.webpagetest.org/r...▲综合参数1.页面加载时间。当然，纯静态的vue-cli是最快的。vuessr类似于php版本（忽略上面的php版本，因为php版本有一些额外的资源需要加载）。2.首字节时间。静态最快。如果扣除dns时间，php版本和vue-ssr版本差不多。（注意：php版和vuessr版不是部署在同一台机器上，php版性能更强，多核，vue-ssr版单cpu单核更弱）3.渲染时间以及页面渲染熟悉度指数，vuessr版本比php版本略慢。这是因为php的html到达页面后直接渲染，而vuessr到达客户端后，有一个vue框架的渲染过程。▲加载瀑布从加载流程的角度来看三者的区别，php版本vuessr服务端渲染版本vue-cli静态版本从瀑布流程可以看出三种页面执行方式的区别，其中一些列举如下：1.php版本和vue-ssr版本服务器处理时间较长。对应首字节时间明显高于vue-cli静态页面不经过服务器处理。2.由于php或vue-ssr服务器版首屏数据已经生成，页面不会再请求接口，缺少数据请求流程。vue-cli版本的数据请求流程较长。3.vue-cli静态页面的dom内容时间或者文档完成时间明显最短，因为模板html几乎没有内容。4.webpack打包分离出来的独立js或css文件其实是在同一个域名下的。因为浏览器同一个域名可以并行6个tcp，加上http的keep-alive特性，总的下载时间其实并不多。相比之下，和被封的dns时间差不多。5、三个页面的StartRendererTime分别为1.2s、1.3s、2.0s。vue-cli静态页面产生的白屏时间，大部分是首屏数据请求消耗的时间。同时也可以对比出来，服务器渲染确实对首屏时间有显着影响。▲直观体验Time,,平均速度指数SpeedIndex,分别为1.2,,,1.3,,,2.0s,,,可以观察下方视频体验对比。>点此观看动态视频<相关阅读【每日课程推荐】机器学习实战！快速入门网络广告业务及CTR对应知识本文已获作者授权腾讯云+社区发布。更多原创文章请点击搜索关注公众号「云+社区」，第一时间获取技术干货，关注后回复1024为您送上技术课程大礼包！海量技术实战经验，尽在云家社区！
