2024-05-30 · Web Performance
用效能面板診斷主執行緒卡頓
從一份雜亂的錄影檔,一路追到掉幀的那支函式。
前言
一次完整的除錯過程:錄製追蹤檔、閱讀長任務、對照版面來回重算,並用前後對照的火焰圖證明真的修好了。
常見的翻車方式
跳過這個步驟的團隊,通常會踩到三種坑:
- 優化了一個沒有人同意要動的數字。
- 照抄了約束條件完全不同的專案的作法。
- 一直延後決策,直到反悔的成本高得嚇人。
建議的切入方式
- 用使用者的語言,一句話講清楚問題。
- 選一個每週都能量測的訊號,而不只是上線當天看一次。
- 給小實驗設時間盒;兩天的 spike 勝過兩週的辯論。
小結
如果 Web Performance 教會我們什麼,那就是「無聊的一致性」打贏「聰明的一次性方案」。把學到的東西帶回團隊,別讓它變成口耳相傳的都市傳說。