歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~
本文由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，，，可以觀察下面的對比視訊體驗。
>點此觀看動態視訊<
此文已由作者授權騰訊雲+社群釋出，更多原文請點選
搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社群！