歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~

目前我這邊的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，，，可以觀察下面的對比視頻體驗。

? >點此觀看動態視頻<

此文已由作者授權騰訊云+社區發布，更多原文請點擊

搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！

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

總結

以上是生活随笔為你收集整理的php动态渲染和静态渲染,php，vue，vue-ssr 做出来的页面有什么区别？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。