目前我这边的 web 页面, 都是采用 PHP+smarty 模板生成的, 是一种比较早期的开发模式. 好处是没有现阶段常用的前后端分离出现的首屏问题, 因为其本身就是服务器渲染, 坏处是代码分离不好做, 公用化及组件化不好做. 这里涉及前后端分离相关问题, 老生常谈, 这里暂不讨论.
近期, 在做一些前端分离的尝试. 采用国内非常流行的的 vue 框架, 选这个框架而不是 react 的原因主要是 vue 的 mvvm 保留 html 书写惯性, 对于 HTML 里写代码多的人来说更容易入手. 而且流行框架 vue 也经过了极大量的测试验证, 参考资料充实详尽, 可靠性和易用性都满足条件, 没有理由不尝试一下.
总的来说, 做了一个如下小应用 demo, 长下面这样, 三个简单页面, 分页查看所有王者英雄, 或者所有装备. 分别采用 PHP+smarty,vue-cli,vue+ssr, 三种方式进行开发, 完了再对结果做一下对比.
三个版本的体验入口如下 (尽量用手机浏览器扫描, 微信对 ip 域名有特殊处理),
三个版本并没有严格做相同环境处理, 所以下面的对比分析仅作为直观上的对比了解, 并不适用于详细性能上的严格对比额.
对三个页面分别进行 webpage test, 测试结果如下,
▲ 详细结果
PHP 版:
vue ssr 服务器渲染版:
vue-cli 静态版:
▲ 综合参数
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,,, 可以观察下面的对比视频体验.
> 点此观看动态视频 <
来源: https://segmentfault.com/a/1190000017021261