Performance 面板總覽

功能寫完不等於使用者體驗就夠好。載入過慢、動畫卡頓、按鈕點擊延遲，這些都是會在使用者心中悄悄扣分的訊號，第一次造訪的訪客甚至可能直接離開。本章從 Performance 面板的結構談起，後續章節會逐步拆解效能分析的各個面向。

建構視角的對應章節：效能分析工具

兩種主要工具的定位#

開始量化網頁效能時通常有兩個切入點：

要進入 Performance 面板的測量，常用的起手式有兩種：

頁面初始化：先導向 about:blank，按下 Record 後再前往要測量的網址，可避開任何干擾；或直接點選 Start profiling and reload page 圖示。
針對功能：先按 Record，操作要測量的功能後再停止。

錄製結束後會生成效能報表，需要花一點時間熟悉操作:上下拖曳檢視其他列、左右拖曳移動時間範圍、滾輪縮放時間區間。

報告最上方的幾列簡明顯示了與效能直接相關的資訊。

正常運作時頁面會維持 60 FPS。瀏覽器是單執行緒，必須處理解析、執行、樣式計算與每個像素的繪製，只要單一畫面超過 16ms（1000/60）就會掉幀。

以顏色區分執行類型：

藍色區段代表正在進行的請求，可展開下方的 Network 看細節。

把游標移到 Frames 列上可以瀏覽特定時間點的畫面，左右移動就像重播一樣，方便鎖定要分析的時間區間。

點擊任意列的區塊，最下方會展開對應的詳細資訊面板。

排列各資源的時間與依賴關係，能看到 URL、Duration（傳輸與讀取時間）、Priority、資源大小等資訊。

不同於截圖只是定時快照，Frames 顯示哪些時間點產生了新畫面，以及每一幀持續多久，並附上 DPS 與 CPU 相關資訊。

每個 Timing 都是貫穿整份報表的時間線：

下方還能看到 Total Blocking Time (TBT)，代表主執行緒（Main Thread）被阻塞時間的總和。

Cumulative Layout Shift (CLS) 顯示頁面元素在載入過程的位移量，越低代表穩定性越好，與 FCP 同為 Core Web Vitals 的一員。

呈現瀏覽器運作期間使用 GPU 的部分。在網址列輸入 chrome://gpu 可看到目前哪些功能啟用了硬體加速。

這兩列與畫面顯示緊密相關。瀏覽器更新畫面大致經過：

哪些 JavaScript 操作會影響效能、有些動畫為何只需要合成（Composite），會在後續章節詳述。

Performance 面板把瀏覽器運作的細節攤在開發者眼前。後續章節會把效能議題拆成不同主題，逐一說明如何觀察與分析問題。