資訊專欄INFORMATION COLUMN
摘要：靜態(tài)頁面的或者明顯最短，原因是模板幾乎沒什么內(nèi)容。靜態(tài)頁面生成的白屏時間中，大部分是首屏數(shù)據(jù)請求消耗的時間，，同時也可以對比出，服務(wù)器渲染的對首屏時間的確有很明顯的效果。
歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實踐干貨哦~
本文由shirishiyue發(fā)表于云+社區(qū)專欄
目前我這邊的web頁面，都是采用php+smarty模板生成的，是一種比較早期的開發(fā)模式。好處是沒有現(xiàn)階段常用的前后端分離出現(xiàn)的首屏問題，因為其本身就是服務(wù)器渲染，壞處是代碼分離不好做，公用化及組件化不好做。這里涉及前后端分離相關(guān)問題，老生常談，這里暫不討論。
? 近期，在做一些前端分離的嘗試。采用國內(nèi)非常流行的的vue框架，選這個框架而不是react的原因主要是vue的mvvm保留html書寫慣性，對于html里寫代碼多的人來說更容易入手。而且流行框架vue也經(jīng)過了極大量的測試驗證，參考資料充實詳盡，可靠性和易用性都滿足條件，沒有理由不嘗試一下。
? 總的來說，做了一個如下小應(yīng)用demo，長下面這樣，三個簡單頁面，分頁查看所有王者英雄，或者所有裝備。分別采用 php+smarty，vue-cli，vue+ssr，三種方式進行開發(fā)，完了再對結(jié)果做一下對比。
? 三個版本的體驗入口如下（盡量用手機瀏覽器掃描，微信對ip域名有特殊處理），
? 三個版本并沒有嚴格做相同環(huán)境處理，所以下面的對比分析僅作為直觀上的對比了解，并不適用于詳細性能上的嚴格對比額。
? 對三個頁面分別進行webpage test，測試結(jié)果如下，
▲ 詳細結(jié)果
? php版：
https://www.webpagetest.org/result/181108_2D_20fc46a11de58d60dde7421b6d3be954/
? vue ssr 服務(wù)器渲染版：
https://www.webpagetest.org/result/181108_XY_92f54bd829b1b6f02634774294491736/
? vue-cli 靜態(tài)版：
https://www.webpagetest.org/result/181108_4G_011f6c33da1e7f199f8a1ecd03ef0728/
▲ 綜合參數(shù)
1、頁面加載時間。理所當然是純靜態(tài)的vue-cli最快。vue ssr 和 php 版差不多（忽略上面的php版，因為php版有一些額外資源要加載）。
2、首字節(jié)時間。靜態(tài)的最快。若扣除dns時間，其實php和vue-ssr版差不多。（注：php版和vue ssr版不是部署在同一臺機器上，php版機器性能要強一些，多核，vue-ssr版機器比較弱單cpu單核）
3、渲染時間和頁面呈現(xiàn)熟讀指數(shù)，vue ssr版比php版本稍微慢一點。這是因為，php的html到頁面后直接就呈現(xiàn)了，而vue ssr到client后，有一個vue框架的渲染過程。
▲ 加載瀑布流
? 從加載流的角度上看一下三者的區(qū)別，
php版本
vue ssr 服務(wù)器渲染版本
vue-cli靜態(tài)版本
? 從瀑布流上可以看出很多三種頁面執(zhí)行方式的區(qū)別，列舉一部分如下：
1、php 版以及 vue-ssr 版 有較長的服務(wù)器處理時間，，，對應(yīng)的首字節(jié)時間明顯高于沒有服務(wù)器處理的vue-cli靜態(tài)頁面。
2、由于服務(wù)器版本的php或者vue-ssr的首屏數(shù)據(jù)都已經(jīng)生成了，所以頁面不會再次請求接口，少了數(shù)據(jù)的請求過程。而vue-cli版有一個較長的數(shù)據(jù)請求過程。
3、vue-cli靜態(tài)頁面的dom content time 或者 document complete time 明顯最短，原因是模板html幾乎沒什么內(nèi)容。
4、webpack打包拆離出來的獨立js或者css文件，其實在同一域名下，由于瀏覽器同一域名可以并行6個tcp，以及http的keep-alive性質(zhì)，其實總的下載時間不多。對比看，跟阻塞的dns時間差不多。
5、三種頁面 Start Renderer Time 分別是 1.2s，1.3s，2.0s。 vue-cli靜態(tài)頁面生成的白屏時間中，大部分是首屏數(shù)據(jù)請求消耗的時間，，同時也可以對比出，服務(wù)器渲染的對首屏時間的確有很明顯的效果。
▲ 直觀體驗
? 時間，，平均速度指數(shù)Speed Index，分別是1.2，，，1.3，，，2.0s，，，可以觀察下面的對比視頻體驗。
? >點此觀看動態(tài)視頻<
相關(guān)閱讀
【每日課程推薦】機器學(xué)習實戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識
此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請點擊
搜索關(guān)注公眾號「云加社區(qū)」，第一時間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！
海量技術(shù)實踐經(jīng)驗，盡在云加社區(qū)！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1548.html
摘要：靜態(tài)頁面的或者明顯最短，原因是模板幾乎沒什么內(nèi)容。靜態(tài)頁面生成的白屏時間中，大部分是首屏數(shù)據(jù)請求消耗的時間，，同時也可以對比出，服務(wù)器渲染的對首屏時間的確有很明顯的效果。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實踐干貨哦~ 本文由shirishiyue發(fā)表于云+社區(qū)專欄 目前我這邊的web頁面，都是采用php+smarty模板生成的，是一種比較早期的開發(fā)模式。好處是沒有現(xiàn)階段...
摘要：從零開始搭建一個背景是什么全拼是，服務(wù)端渲染。大家不妨可以打開一些頁面或者一些公司的網(wǎng)站，查看源代碼，你會發(fā)現(xiàn)，也是有這個標記。這時候，我們發(fā)現(xiàn)頁面的路由切換生效了，并且不同頁面的源代碼也不一樣了。從零開始搭建一個下項目源碼 從零開始搭建一個vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服務(wù)端渲染。 所謂服務(wù)端渲染，指的是把...
摘要：開始改建補充安裝依賴與上一次不同，這次我們基于進行改建，已經(jīng)有了很多依賴庫了，但我們?nèi)涡枰a充一個核心修改客戶端的配置修改文件，添加插件添加了這個配置以后，重新啟動項目通過地址就可以訪問到，頁面中出現(xiàn)的內(nèi)容就是所需要的。 從零開始搭建一個vue-ssr 前言 上次我們已經(jīng)實現(xiàn)了從零開始，搭建一個簡單的vue-ssr的demo：從零開始搭建一個vue-ssr（上）。那么這次呢，我們基于v...
摘要：無需使用服務(wù)器實時動態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時簡單地生成針對特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運行環(huán)境。更多的服務(wù)器端負載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉(zhuǎn)為ssr -prerender-demo 使用prer...
摘要：總算是今天成功把自己的孩子托付到阿里云的服務(wù)器上面了。中間還遇到很多很多坑最后看這自己所部署的三個網(wǎng)站安靜的躺在自己租的阿里云上。 一把桌子，一臺電腦，一瓶紅牛，一包紙巾，從白天到黑夜。歷經(jīng)一個多月的時間，從零到構(gòu)思到設(shè)計，從設(shè)計到vue-ssr 的框架設(shè)計，然后再從前端的業(yè)務(wù)邏輯代碼的實現(xiàn)，從 后臺nodejs 的 koa2框架到數(shù)據(jù)庫的設(shè)計到后端的業(yè)務(wù)邏輯的代碼實現(xiàn)，從購買阿里云服...
閱讀 2984·2021-10-19 11:46
閱讀 979·2021-08-03 14:03
閱讀 2934·2021-06-11 18:08
閱讀 2905·2019-08-29 13:52
閱讀 2744·2019-08-29 12:49
閱讀 480·2019-08-26 13:56
閱讀 924·2019-08-26 13:41
閱讀 849·2019-08-26 13:35
