技術標籤：js 獲取伺服器時間

定場詩

曲木為直終必彎，養狼當犬看家難；墨染鸕鶿黑不久，粉刷烏鴉白不天。蜜餞黃蓮終需苦，強摘瓜果不能甜；好事總得善人做，哪有凡人做神仙。

前言

該篇文章會為您分享在前端效能優化中非常重要的一環-白屏時間，將從白屏時間的概念、重要性以及白屏的過程一一進行闡述，同時提供效能優化的策略與實踐。

一、概念

白屏時間：即使用者點選一個連結或開啟瀏覽器輸入URL地址後，從螢幕空白到顯示第一個畫面的時間。

白屏時間的長短將直接影響使用者對該網站的第一印象。

二、白屏時間的重要性

當用戶點開一個連結或者是直接在瀏覽器中輸入URL開始進行訪問時，就開始等待頁面的展示。頁面渲染的時間越短，使用者等待的時間就越短，使用者感知到頁面的速度就越快。這樣可以極大的提升使用者的體驗，減少使用者的跳出，提升頁面的留存率。

開啟一個頁面就像你的女票召喚你一樣，你出現的越迅速，女票肯定會愈加欣喜！反之，你千呼萬喚始出來，那麼你的女票很可能又要拋棄你了(為什麼要對你說又呢? ...)

三、白屏是一個怎樣的過程呢？

讓我們一起來揭祕：從開啟一個頁面，到頁面的畫面展示經歷了怎樣的過程！

1. DNS Lookup

DNS Lookup 即瀏覽器從DNS伺服器中進行域名查詢。

瀏覽器會先對頁面進行域名解析，獲取到伺服器的IP地址後，進而和伺服器進行通訊。

Tips: 通常在整個載入頁面的過程中，瀏覽器會多次進行DNS Lookup，包括頁面本身的域名查詢以及在解析HTML頁面時載入的JS、CSS、Image、Video等資源產生的域名查詢。

2. 建立TCP請求連線

瀏覽器和服務端TCP請求建立的過程，是基於TCP/IP，該協議由網路層的IP和傳輸層的TCP組成。IP是每一臺網際網路裝置在網際網路中的唯一地址。

TCP通過三次握手建立連線，並提供可靠的資料傳輸服務。

3. 服務端請求處理響應

在TCP連線建立後，Web伺服器接受請求，開始進行處理，同時瀏覽器端開始等待伺服器的處理響應。

Web伺服器根據請求型別的不同，進行相應的處理。靜態資源如圖片、CSS檔案、靜態HTML直接進行響應；如其他註冊的請求轉發給相應的應用伺服器，進行如資料處理、快取中取資料，將資料按照約定好的格式響應給瀏覽器。

在大型應用中，通常為分散式服務架構，應用伺服器的處理有可能經過很多個系統的中介軟體，最終獲取到需要的資料

4. 客戶端下載、解析、渲染顯示頁面

在伺服器返回資料後，客戶端瀏覽器接收資料，進行HTML下載、解析、渲染顯示。

• a. 如果是Gzip包，則先解壓為HTML
• b. 解析HTML的頭部程式碼，下載頭部程式碼中的樣式資原始檔或指令碼資原始檔
• c. 解析HTML程式碼和樣式檔案程式碼，構建HTML的DOM樹以及與CSS相關的CSSOM樹
• d. 通過遍歷DOM樹和CSSOM樹，瀏覽器依次計算每個節點的大小、座標、顏色等樣式，構造渲染樹
• e. 根據渲染樹完成繪製過程

瀏覽器下載HTML後，首先解析頭部程式碼，進行樣式表下載，然後繼續向下解析HTML程式碼，構建DOM樹，同時進行樣式下載。當DOM樹構建完成後，立即開始構造CSSOM樹。理想情況下，樣式表下載速度夠快，DOM樹和CSSOM樹進入一個並行的過程，當兩棵樹構建完畢，構建渲染樹，然後進行繪製。

Tips:瀏覽器安全解析策略對解析HTML造成的影響：

• 當解析HTML時遇到內聯JS程式碼，會阻塞DOM樹的構建
• 特別悲慘的情況： 當CSS樣式檔案沒有下載完成時，瀏覽器解析HTML遇到了內聯JS程式碼，此時！！！根據瀏覽器的安全解析策略，瀏覽器暫停JS指令碼執行，暫停HTML解析。直到CSS檔案下載完成，完成CSSOM樹構建，重新恢復原來的解析。

一定要合理放置JS程式碼！！！

四、白屏-效能優化

至此，我們已經瞭解了從瀏覽器在開啟一個連結開始，到螢幕展示的過程-白屏時間的歷程，那這對每個環節中發生的事情，我們可以有針對性的進行相關的優化。

1. DNS解析優化

針對DNS Lookup環節，我們可以針對性的進行DNS解析優化。

• DNS快取優化
• DNS預載入策略
• 穩定可靠的DNS伺服器

2. TCP網路鏈路優化

針對網路鏈路的優化，好像除了花錢沒有什麼更好的方式！

3. 服務端處理優化

服務端的處理優化，是一個非常龐大的話題，會涉及到如Redis快取、資料庫儲存優化或是系統內的各種中介軟體以及Gzip壓縮等...

4. 瀏覽器下載、解析、渲染頁面優化

根據瀏覽器對頁面的下載、解析、渲染過程，可以考慮一下的優化處理：

• 儘可能的精簡HTML的程式碼和結構
• 儘可能的優化CSS檔案和結構
• 一定要合理的放置JS程式碼，儘量不要使用內聯的JS程式碼

宣告

本文為胡哥拜讀周濤明、張榮華、張新兵幾位大佬所著《大型網站效能優化實戰》一書並結合自身經驗所得，願對諸位小夥伴有所幫助。手動微笑.gif

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點選右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公眾號，可與胡哥繼續深入交流呦！