php，vue，vue-ssr 作出来的页面有什么区别？

时间 2019-11-08

标签 php vue ssr 作出来的页面什么区别栏目 PHP 繁體版

原文原文链接

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~php

本文由 shirishiyue发表于云+社区专栏

目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段经常使用的先后端分离出现的首屏问题，由于其自己就是服务器渲染，坏处是代码分离很差作，公用化及组件化很差作。这里涉及先后端分离相关问题，老生常谈，这里暂不讨论。css

近期，在作一些前端分离的尝试。采用国内很是流行的的vue框架，选这个框架而不是react的缘由主要是vue的mvvm保留html书写惯性，对于html里写代码多的人来讲更容易入手。并且流行框架vue也通过了极大量的测试验证，参考资料充实详尽，可靠性和易用性都知足条件，没有理由不尝试一下。html

总的来讲，作了一个以下小应用demo，长下面这样，三个简单页面，分页查看全部王者英雄，或者全部装备。分别采用 php+smarty，vue-cli，vue+ssr，三种方式进行开发，完了再对结果作一下对比。前端

三个版本的体验入口以下（尽可能用手机浏览器扫描，微信对ip域名有特殊处理），vue

三个版本并无严格作相同环境处理，因此下面的对比分析仅做为直观上的对比了解，并不适用于详细性能上的严格对比额。react

对三个页面分别进行webpage test，测试结果以下，webpack

▲ 详细结果web

php版：vue-cli

vue ssr 服务器渲染版：

vue-cli 静态版：

▲ 综合参数

一、页面加载时间。理所固然是纯静态的vue-cli最快。vue ssr 和 php 版差很少（忽略上面的php版，由于php版有一些额外资源要加载）。

二、首字节时间。静态的最快。若扣除dns时间，其实php和vue-ssr版差很少。（注：php版和vue ssr版不是部署在同一台机器上，php版机器性能要强一些，多核，vue-ssr版机器比较弱单cpu单核）

三、渲染时间和页面呈现熟读指数，vue ssr版比php版本稍微慢一点。这是由于，php的html到页面后直接就呈现了，而vue ssr到client后，有一个vue框架的渲染过程。

▲ 加载瀑布流

从加载流的角度上看一下三者的区别，

php版本

vue ssr 服务器渲染版本

vue-cli静态版本

从瀑布流上能够看出不少三种页面执行方式的区别，列举一部分以下：

一、php 版以及 vue-ssr 版有较长的服务器处理时间，，，对应的首字节时间明显高于没有服务器处理的vue-cli静态页面。

二、因为服务器版本的php或者vue-ssr的首屏数据都已经生成了，因此页面不会再次请求接口，少了数据的请求过程。而vue-cli版有一个较长的数据请求过程。

三、vue-cli静态页面的dom content time 或者 document complete time 明显最短，缘由是模板html几乎没什么内容。

四、webpack打包拆离出来的独立js或者css文件，其实在同一域名下，因为浏览器同一域名能够并行6个tcp，以及http的keep-alive性质，其实总的下载时间很少。对比看，跟阻塞的dns时间差很少。

五、三种页面 Start Renderer Time 分别是 1.2s，1.3s，2.0s。 vue-cli静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也能够对比出，服务器渲染的对首屏时间的确有很明显的效果。

▲ 直观体验

时间，，平均速度指数Speed Index，分别是1.2，，，1.3，，，2.0s，，，能够观察下面的对比视频体验。

相关阅读
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识

此文已由做者受权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！