2024-05-30 · Web Performance

用效能面板診斷主執行緒卡頓

從一份雜亂的錄影檔,一路追到掉幀的那支函式。

前言

一次完整的除錯過程:錄製追蹤檔、閱讀長任務、對照版面來回重算,並用前後對照的火焰圖證明真的修好了。

常見的翻車方式

跳過這個步驟的團隊,通常會踩到三種坑:

  • 優化了一個沒有人同意要動的數字。
  • 照抄了約束條件完全不同的專案的作法。
  • 一直延後決策,直到反悔的成本高得嚇人。

建議的切入方式

  1. 用使用者的語言,一句話講清楚問題。
  2. 選一個每週都能量測的訊號,而不只是上線當天看一次。
  3. 給小實驗設時間盒;兩天的 spike 勝過兩週的辯論。

小結

如果 Web Performance 教會我們什麼,那就是「無聊的一致性」打贏「聰明的一次性方案」。把學到的東西帶回團隊,別讓它變成口耳相傳的都市傳說。