摘要：静态页面的或者明显最短，原因是模板几乎没什么内容。静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。
欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~
本文由shirishiyue发表于云+社区专栏
目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段常用的前后端分离出现的首屏问题，因为其本身就是服务器渲染，坏处是代码分离不好做，公用化及组件化不好做。这里涉及前后端分离相关问题，老生常谈，这里暂不讨论。
近期，在做一些前端分离的尝试。采用国内非常流行的的vue框架，选这个框架而不是react的原因主要是vue的mvvm保留html书写惯性，对于html里写代码多的人来说更容易入手。而且流行框架vue也经过了极大量的测试验证，参考资料充实详尽，可靠性和易用性都满足条件，没有理由不尝试一下。
总的来说，做了一个如下小应用demo，长下面这样，三个简单页面，分页查看所有王者英雄，或者所有装备。分别采用 php+smarty，vue-cli，vue+ssr，三种方式进行开发，完了再对结果做一下对比。
三个版本的体验入口如下（尽量用手机浏览器扫描，微信对ip域名有特殊处理），
三个版本并没有严格做相同环境处理，所以下面的对比分析仅作为直观上的对比了解，并不适用于详细性能上的严格对比额。
对三个页面分别进行webpage test，测试结果如下，
▲ 详细结果
php版：
https://www.webpagetest.org/result/181108_2D_20fc46a11de58d60dde7421b6d3be954/
vue ssr 服务器渲染版：
https://www.webpagetest.org/result/181108_XY_92f54bd829b1b6f02634774294491736/
vue-cli 静态版：
https://www.webpagetest.org/result/181108_4G_011f6c33da1e7f199f8a1ecd03ef0728/
▲ 综合参数
1、页面加载时间。理所当然是纯静态的vue-cli最快。vue ssr 和 php 版差不多（忽略上面的php版，因为php版有一些额外资源要加载）。
2、首字节时间。静态的最快。若扣除dns时间，其实php和vue-ssr版差不多。（注：php版和vue ssr版不是部署在同一台机器上，php版机器性能要强一些，多核，vue-ssr版机器比较弱单cpu单核）
3、渲染时间和页面呈现熟读指数，vue ssr版比php版本稍微慢一点。这是因为，php的html到页面后直接就呈现了，而vue ssr到client后，有一个vue框架的渲染过程。
▲ 加载瀑布流
从加载流的角度上看一下三者的区别，
php版本
vue ssr 服务器渲染版本
vue-cli静态版本
从瀑布流上可以看出很多三种页面执行方式的区别，列举一部分如下：
1、php 版以及 vue-ssr 版 有较长的服务器处理时间，，，对应的首字节时间明显高于没有服务器处理的vue-cli静态页面。
2、由于服务器版本的php或者vue-ssr的首屏数据都已经生成了，所以页面不会再次请求接口，少了数据的请求过程。而vue-cli版有一个较长的数据请求过程。
3、vue-cli静态页面的dom content time 或者 document complete time 明显最短，原因是模板html几乎没什么内容。
4、webpack打包拆离出来的独立js或者css文件，其实在同一域名下，由于浏览器同一域名可以并行6个tcp，以及http的keep-alive性质，其实总的下载时间不多。对比看，跟阻塞的dns时间差不多。
5、三种页面 Start Renderer Time 分别是 1.2s，1.3s，2.0s。 vue-cli静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。
▲ 直观体验
时间，，平均速度指数Speed Index，分别是1.2，，，1.3，，，2.0s，，，可以观察下面的对比视频体验。
>点此观看动态视频<
相关阅读
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识
此文已由作者授权腾讯云+社区发布，更多原文请点击
搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！
海量技术实践经验，尽在云加社区！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1548.html
摘要：静态页面的或者明显最短，原因是模板几乎没什么内容。静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由shirishiyue发表于云+社区专栏 目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段...
摘要：从零开始搭建一个背景是什么全拼是，服务端渲染。大家不妨可以打开一些页面或者一些公司的网站，查看源代码，你会发现，也是有这个标记。这时候，我们发现页面的路由切换生效了，并且不同页面的源代码也不一样了。从零开始搭建一个下项目源码 从零开始搭建一个vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服务端渲染。 所谓服务端渲染，指的是把...
摘要：开始改建补充安装依赖与上一次不同，这次我们基于进行改建，已经有了很多依赖库了，但我们任需要补充一个核心修改客户端的配置修改文件，添加插件添加了这个配置以后，重新启动项目通过地址就可以访问到，页面中出现的内容就是所需要的。 从零开始搭建一个vue-ssr 前言 上次我们已经实现了从零开始，搭建一个简单的vue-ssr的demo：从零开始搭建一个vue-ssr（上）。那么这次呢，我们基于v...
摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。 目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...
摘要：总算是今天成功把自己的孩子托付到阿里云的服务器上面了。中间还遇到很多很多坑最后看这自己所部署的三个网站安静的躺在自己租的阿里云上。 一把桌子，一台电脑，一瓶红牛，一包纸巾，从白天到黑夜。历经一个多月的时间，从零到构思到设计，从设计到vue-ssr 的框架设计，然后再从前端的业务逻辑代码的实现，从 后台nodejs 的 koa2框架到数据库的设计到后端的业务逻辑的代码实现，从购买阿里云服...
阅读 2219·2021-11-24 09:38
阅读 2942·2021-11-23 09:51
阅读 3251·2021-11-12 10:35
阅读 2774·2021-10-19 11:46
阅读 861·2021-08-03 14:03
阅读 2706·2021-06-11 18:08
阅读 2722·2019-08-29 13:52
阅读 2546·2019-08-29 12:49
