淺談前端性能

何謂前端性能

簡單的來說，用戶從瀏覽器發出 HTTP request 之後，到頁面渲染完成，這個過程越短，性能就越好。有幾個時間點可以做為優化的參考

• 縮短白屏時間
• 盡快顯示畫面
• 盡快完成 JavaScript 指令腳本

如何提高性能

No measurement, no optimization

從發出 HTTP request，到頁面渲染完成，這整個過程牽扯到瀏覽器、伺服器、HTTP 協定等，並不是改個地方就能一勞永逸。而是一步步找出性能瓶頸，並逐漸優化每個步驟。

舉個例子，當我們在瀏覽器的網址列輸入 www.google.com 之後，整個流程是這樣子的：

1. 域名解析，找到伺服器 IP 位置
2. 發起 TCP 的三次交握，建立連線
3. 連線建立後，發出 HTTP 請求
4. 伺服器響應請求，並回傳 HTML

之後的事就交由瀏覽器處理了，也是本文的重點。

瀏覽器渲染原理

1. 解析 HTML 文件，並加載 CSS 樣式表
2. 解析 HTML 及 CSS，分別產生 DOM tree 及 CSSDOM tree
3. 合併 DOM tree 及 CSSDOM tree 產生 Rendering tree
4. 計算每個節點的準確位置和大小
5. 最後繪製每個像素到螢幕上

以上的渲染過程，如果涉及 JavaScript 腳本會更加複雜，本文不多做解說，更多細節可以參考轉譯樹狀結構的建構、版面配置和繪製。

找出瓶頸

大致上了解整個流程後，我們可以根據每一個步驟，找出優化的方向：

• 標示正確的文件格式
  Doctype 會影響瀏覽器的渲染模式，不同的渲染模式會影響 CSS 甚至 JavaScript 腳本的解析
• 使用 CDN
  將靜態資源放至 CDN server
• 異步加載腳本
  能避免因為執行腳本而阻塞渲染
• 減少 HTTP 請求
  合併 CSS、JavaScript 和小圖片，減少 HTTP 傳輸帶來的延遲
• 精簡 HTML
  減少不必要的 HTML tag，加快建立 DOM tree
• 精簡 CSS
  優化 CSS 規則，加快建立 CSSDOM tree
• 按需加載 CSS
  只加載該頁面需要的 CSS 規則，避免無謂的 CSS 計算
• 圖片壓縮
  圖片通常是耗時的資源，應該將圖片壓縮成最合適的大小

結論

本文是一些前端常見的優化，但不代表上述的方法適合所有情況。每個頁面都有不同的性質，實際情況需要看每個頁面的需求去制訂，找出最佳的平衡。