共计 1576 个字符，预计需要花费 4 分钟才能阅读完成。

欢迎大家前往腾讯云 + 社区，获取更多腾讯海量技术实践干货哦~
本文由 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/r…
​ vue ssr 服务器渲染版：
https://www.webpagetest.org/r…
​ vue-cli 静态版：
https://www.webpagetest.org/r…
▲ 综合参数

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 相应知识

共计 1576 个字符，预计需要花费 4 分钟才能阅读完成。

欢迎大家前往腾讯云 + 社区，获取更多腾讯海量技术实践干货哦~
本文由 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/r…
​ vue ssr 服务器渲染版：
https://www.webpagetest.org/r…
​ vue-cli 静态版：
https://www.webpagetest.org/r…
▲ 综合参数

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 相应知识