淺談前端性能

1t8rfvssb2rjganwv5i0nua

何謂前端性能

簡單的來說,用戶從瀏覽器發出 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 腳本會更加複雜,本文不多做解說,更多細節可以參考轉譯樹狀結構的建構、版面配置和繪製

找出瓶頸

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

15zzhjykbs2krnthw5havhq

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

結論

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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s