歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

目前我這邊的web頁面，都是采用php+smarty模板生成的，是一種比較早期的開發(fā)模式。好處是沒有現(xiàn)階段常用的前后端分離出現(xiàn)的首屏問題，因?yàn)槠浔旧砭褪欠?wù)器渲染，壞處是代碼分離不好做，公用化及組件化不好做。這里涉及前后端分離相關(guān)問題，老生常談，這里暫不討論。

? 近期，在做一些前端分離的嘗試。采用國內(nèi)非常流行的的vue框架，選這個(gè)框架而不是react的原因主要是vue的mvvm保留html書寫慣性，對(duì)于html里寫代碼多的人來說更容易入手。而且流行框架vue也經(jīng)過了極大量的測(cè)試驗(yàn)證，參考資料充實(shí)詳盡，可靠性和易用性都滿足條件，沒有理由不嘗試一下。

? 總的來說，做了一個(gè)如下小應(yīng)用demo，長下面這樣，三個(gè)簡單頁面，分頁查看所有王者英雄，或者所有裝備。分別采用 php+smarty，vue-cli，vue+ssr，三種方式進(jìn)行開發(fā)，完了再對(duì)結(jié)果做一下對(duì)比。

? 三個(gè)版本的體驗(yàn)入口如下(盡量用手機(jī)瀏覽器掃描，微信對(duì)ip域名有特殊處理)，

? 三個(gè)版本并沒有嚴(yán)格做相同環(huán)境處理，所以下面的對(duì)比分析僅作為直觀上的對(duì)比了解，并不適用于詳細(xì)性能上的嚴(yán)格對(duì)比額。

? 對(duì)三個(gè)頁面分別進(jìn)行webpage test，測(cè)試結(jié)果如下，

▲ 詳細(xì)結(jié)果

? php版：

? vue ssr 服務(wù)器渲染版：

? vue-cli 靜態(tài)版：

▲ 綜合參數(shù)

1、頁面加載時(shí)間。理所當(dāng)然是純靜態(tài)的vue-cli最快。vue ssr 和 php 版差不多(忽略上面的php版，因?yàn)閜hp版有一些額外資源要加載)。

2、首字節(jié)時(shí)間。靜態(tài)的最快。若扣除dns時(shí)間，其實(shí)php和vue-ssr版差不多。(注：php版和vue ssr版不是部署在同一臺(tái)機(jī)器上，php版機(jī)器性能要強(qiáng)一些，多核，vue-ssr版機(jī)器比較弱單cpu單核)

3、渲染時(shí)間和頁面呈現(xiàn)熟讀指數(shù)，vue ssr版比php版本稍微慢一點(diǎn)。這是因?yàn)?#xff0c;php的html到頁面后直接就呈現(xiàn)了，而vue ssr到client后，有一個(gè)vue框架的渲染過程。

▲ 加載瀑布流

? 從加載流的角度上看一下三者的區(qū)別，

php版本

vue ssr 服務(wù)器渲染版本

vue-cli靜態(tài)版本

? 從瀑布流上可以看出很多三種頁面執(zhí)行方式的區(qū)別，列舉一部分如下：

1、php 版以及 vue-ssr 版 有較長的服務(wù)器處理時(shí)間，，，對(duì)應(yīng)的首字節(jié)時(shí)間明顯高于沒有服務(wù)器處理的vue-cli靜態(tài)頁面。

2、由于服務(wù)器版本的php或者vue-ssr的首屏數(shù)據(jù)都已經(jīng)生成了，所以頁面不會(huì)再次請(qǐng)求接口，少了數(shù)據(jù)的請(qǐng)求過程。而vue-cli版有一個(gè)較長的數(shù)據(jù)請(qǐng)求過程。

3、vue-cli靜態(tài)頁面的dom content time 或者 document complete time 明顯最短，原因是模板html幾乎沒什么內(nèi)容。

4、webpack打包拆離出來的獨(dú)立js或者css文件，其實(shí)在同一域名下，由于瀏覽器同一域名可以并行6個(gè)tcp，以及http的keep-alive性質(zhì)，其實(shí)總的下載時(shí)間不多。對(duì)比看，跟阻塞的dns時(shí)間差不多。

5、三種頁面 Start Renderer Time 分別是 1.2s，1.3s，2.0s。 vue-cli靜態(tài)頁面生成的白屏?xí)r間中，大部分是首屏數(shù)據(jù)請(qǐng)求消耗的時(shí)間，，同時(shí)也可以對(duì)比出，服務(wù)器渲染的對(duì)首屏?xí)r間的確有很明顯的效果。

▲ 直觀體驗(yàn)

? 時(shí)間，，平均速度指數(shù)Speed Index，分別是1.2，，，1.3，，，2.0s，，，可以觀察下面的對(duì)比視頻體驗(yàn)。

? >點(diǎn)此觀看動(dòng)態(tài)視頻<

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。