php，vue，vue-ssr 作出來的頁面有什麼區別？

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

本文由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/

▲ 綜合參數

一、頁面加載時間。理所固然是純靜態的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 送你一份技術課程大禮包！

海量技術實踐經驗，盡在雲加社區！