資訊專欄INFORMATION COLUMN
摘要：靜態頁面的或者明顯最短，原因是模板幾乎沒什么內容。靜態頁面生成的白屏時間中，大部分是首屏數據請求消耗的時間，，同時也可以對比出，服務器渲染的對首屏時間的確有很明顯的效果。
歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~
本文由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/r...
? vue ssr 服務器渲染版：
https://www.webpagetest.org/r...
? vue-cli 靜態版：
https://www.webpagetest.org/r...
▲ 綜合參數
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，，，可以觀察下面的對比視頻體驗。
? >點此觀看動態視頻<
相關閱讀
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識
此文已由作者授權騰訊云+社區發布，更多原文請點擊
搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在云加社區！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53271.html
摘要：靜態頁面的或者明顯最短，原因是模板幾乎沒什么內容。靜態頁面生成的白屏時間中，大部分是首屏數據請求消耗的時間，，同時也可以對比出，服務器渲染的對首屏時間的確有很明顯的效果。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由shirishiyue發表于云+社區專欄 目前我這邊的web頁面，都是采用php+smarty模板生成的，是一種比較早期的開發模式。好處是沒有現階段常用的...
摘要：從零開始搭建一個背景是什么全拼是，服務端渲染。大家不妨可以打開一些頁面或者一些公司的網站，查看源代碼，你會發現，也是有這個標記。這時候，我們發現頁面的路由切換生效了，并且不同頁面的源代碼也不一樣了。從零開始搭建一個下項目源碼 從零開始搭建一個vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服務端渲染。 所謂服務端渲染，指的是把...
摘要：開始改建補充安裝依賴與上一次不同，這次我們基于進行改建，已經有了很多依賴庫了，但我們任需要補充一個核心修改客戶端的配置修改文件，添加插件添加了這個配置以后，重新啟動項目通過地址就可以訪問到，頁面中出現的內容就是所需要的。 從零開始搭建一個vue-ssr 前言 上次我們已經實現了從零開始，搭建一個簡單的vue-ssr的demo：從零開始搭建一個vue-ssr（上）。那么這次呢，我們基于v...
摘要：無需使用服務器實時動態編譯，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同，服務器渲染應用程序，需要處于運行環境。更多的服務器端負載。 目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...
摘要：總算是今天成功把自己的孩子托付到阿里云的服務器上面了。中間還遇到很多很多坑最后看這自己所部署的三個網站安靜的躺在自己租的阿里云上。 一把桌子，一臺電腦，一瓶紅牛，一包紙巾，從白天到黑夜。歷經一個多月的時間，從零到構思到設計，從設計到vue-ssr 的框架設計，然后再從前端的業務邏輯代碼的實現，從 后臺nodejs 的 koa2框架到數據庫的設計到后端的業務邏輯的代碼實現，從購買阿里云服...
閱讀 2830·2021-11-24 09:39
閱讀 4082·2021-10-27 14:19
閱讀 2043·2021-08-12 13:25
閱讀 2333·2019-08-29 17:07
閱讀 1112·2019-08-29 13:44
閱讀 1066·2019-08-26 12:17
閱讀 461·2019-08-23 17:16
閱讀 2048·2019-08-23 16:46
