一道面試題說起

從輸入 URL 到頁面載入完成，發生了什麼？

我們從先從前端效能優化上來分析一下這個問題

• 第一步：我們輸入在地址會經過DNS解析，將 URL 解析為對應的 IP 地址。
• 第二步：客戶端和對應 IP 服務端建立 TCP 連結。
• 第三步：客戶端向伺服器傳送 http 請求
• 第四步：服務端處理完我們的請求之後，把目標資料放在 HTTP 響應裡返回給客戶端
• 第五步：拿到響應資料的瀏覽器就可以開始走一個渲染的流程。渲染完畢，頁面便呈現給了使用者，並時刻等待響應使用者的操作

如下圖所示：

我們任何的效能優化都是在上面的五個步驟中權衡利弊，選出最優的優化方案。
詳細的過程參考 從輸入url到頁面載入完成發生了什麼詳解

效能優化點和對應的方法論

網路層的效能優化

可以優化的點：

• DNS 解析花時間，能不能儘量減少解析次數或者把解析前置？
• TCP 每次的三次握手都急死人，有沒有解決方案？
• 關於HTTP 請求的優化有那些呢？

對應的方法論：

• 瀏覽器 DNS 快取和 DNS prefetch
• 長連線、預連線、接入 SPDY 協議等
• 在減少請求次數和減小請求體積，防抖，節流，雪碧圖，上傳程式碼壓縮包，圖片的載入優化。

瀏覽器層面的效能優化

• 資源載入優化-- 預載入和懶載入
• 服務端渲染
• 瀏覽器快取機制的利用
• DOM 樹的構建、網頁排版和渲染過程、迴流與重繪的考量、DOM 操作
  下圖將是在效能優化上要了解和嘗試的點。
  

總結

總的來說，我們將從網路層面和渲染層面兩個大的維度來逐個點亮前端效能優化的技能樹。在網路層面，我們需要學習一些必需的理論基礎作為前置知識。這部分的學習或許不需要大家寫特別多的程式碼，但需要大家對每一個知識點理解透徹，進而應用到自己日常優化的決策中去。網路層面結束後，由本地儲存開始，我們會漸漸過渡到瀏覽器這一端的優化。