[1]準備
[2]概覽
[3]檢視
[4]分析
前面的話
使用Chrome DevTools的performance面闆可以記錄和分析頁面在運作時的所有活動。本文将詳細介紹如何使用performance面闆解決性能瓶頸
準備
【匿名模式】
匿名模式可以保證Chrome在一個相對幹淨的環境下運作。比如安裝了許多chrome插件，這些插件可能會影響我們分析性能表現
使用快捷鍵ctrl + shift + N 即可代碼匿名模式下的chrome新标簽頁
【移動裝置CPU】
移動裝置的CPU一般比桌上型電腦和筆記本弱很多。分析頁面時，可以用CPU控制器（CPU Throttling）來模拟移動端裝置CPU
在DevTools中，點選 Performance 的 tab。 確定 Screenshots checkbox 被選中；點選 Capture Settings（⚙️）按鈕，DevTools會展示很多設定，來模拟各種狀況；對于模拟CPU，選擇4x slowdown，于是Devtools就開始模拟4倍低速CPU
概覽
【組成】
performance面闆有如下四個窗格：
1、controls。開始記錄，停止記錄和配置記錄期間捕獲的資訊
2、overview。頁面性能的進階彙總
3、火焰圖。 CPU 堆疊追蹤的可視化
4、統計彙總。以圖表的形式彙總資料
【顔色表示】
HTML 檔案為藍色
腳本為黃色
樣式表為紫色
媒體檔案為綠色
其他資源為灰色 【做記錄】
打開想要記錄的頁面，然後重新加載頁面。 performance面闆會自動記錄頁面重新加載。
要記錄頁面互動，打開 performance 面闆，然後按 Record 按鈕 或者鍵入鍵盤快捷鍵 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，開始記錄。記錄時，Record 按鈕會變成紅色。執行頁面互動，然後按 Record 按鈕或再次鍵入鍵盤快捷鍵停止記錄
完成記錄後，DevTools 會猜測哪一部分記錄最相關，并自動縮放到那一個部分
檢視
【Overview】
Overview 窗格包含以下三個圖表：
1、FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓
2、CPU。 CPU 資源。此面積圖訓示消耗 CPU 資源的事件類型
3、NET。每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個位元組下載下傳完成的時間）
可以放大顯示一部分記錄，以便簡化分析。使用 Overview 窗格可以放大顯示一部分記錄。 放大後，火焰圖會自動縮放以比對同一部分
選擇部分後，可以使用 W、A、S 和 D 鍵調整您的選擇。 W 和 S 分别代表放大和縮小。 A 和 D 分别代表左移和右移
【火焰圖】
在火焰圖上看到一到三條垂直的虛線。藍線代表
DOMContentLoaded
事件。 綠線代表首次繪制的時間。 紅線代表
load
事件
在火焰圖中選擇事件時，Details 窗格會顯示與事件相關的其他資訊
診斷
【JS】
JavaScript 計算，特别是會觸發大量視覺變化的計算會降低應用性能。 不要讓時機不當或長時間運作的 JavaScript 影響使用者互動
下面是一些常見 JavaScript 問題
1、大開銷輸入處理程式影響響應或動畫
讓浏覽器盡可能晚地處理觸摸和滾動，或者綁定偵聽
2、時機不當的 JavaScript 影響響應、動畫、加載
使用
requestAnimationFrame
、使 DOM 操作遍布各個幀、使用網絡工作線程
3、長時間運作的 JavaScript 影響響應
将純粹的計算工作轉移到web worker中。如果需要 DOM 通路權限，配合使用
requestAnimationFrame
【樣式】
樣式更改開銷較大，在這些更改會影響 DOM 中的多個元素時更是如此。 隻要将樣式應用到元素，浏覽器就必須确定對所有相關元素的影響、重新計算布局并重新繪制
點選 Recalculate Style 事件（以紫色顯示）可以在 Details 窗格中檢視更多相關資訊。 如果樣式更改需要較長時間，對性能的影響會非常大。 如果樣式計算會影響大量元素，則需要改進另一個方面
要降低 Recalculate Style 事件的影響，使用一些對渲染性能的影響較小的屬性。如使用 transform 和 opacity 屬性更改來實作動畫，使用
will-change
或
translateZ
提升移動的元素
下面是一些常見的CSS問題
1、大開銷樣式計算影響響應或動畫
任何會更改元素幾何形狀的 CSS 屬性，如寬度、高度或位置；浏覽器必須檢查所有其他元素并重做布局。避免會觸發重排的CSS屬性
2、複雜的選擇器影響響應或動畫
嵌套選擇器強制浏覽器了解與所有其他元素有關的全部内容，包括父級和子級。盡量在CSS中引用隻有一個類的元素
【重排】
布局（或重排）是浏覽器用來計算頁面上所有元素的位置和大小的過程。 網頁的布局模式意味着一個元素可能影響其他元素；例如
body
元素的寬度一般會影響其子元素的寬度以及樹中各處的節點等等。這個過程對于浏覽器來說可能很複雜。 一般的經驗法則是，如果在幀完成前從 DOM 請求傳回幾何值，将發現會出現“強制同步布局”，在頻繁地重複或針對較大的 DOM 樹執行操作時這會成為性能的大瓶頸。
performance面闆可以确定頁面何時會導緻強制同步布局。 這些 Layout 事件使用紅色豎線标記
“布局抖動”是指反複出現強制同步布局情況。 這種情況會在 JavaScript 從 DOM 反複地寫入和讀取時出現，将會強制浏覽器反複重新計算布局
【重繪】
繪制是填充像素的過程。這經常是渲染流程開銷最大的部分。 如果在任何情況下注意到頁面出現卡頓現象，很有可能存在繪制問題。
合成是将頁面的已繪制部分放在一起以在螢幕上顯示的過程。 大多數情況下，如果堅持僅合成器屬性并避免一起繪制，性能會有極大的改進，但是需要留意過多的層計數
一定不要使用下面的代碼
* {
will-change: transform;
transform: translateZ(0);
} 這是以迂回方式說想要提升頁面上的每個元素。此處的問題是建立的每一層都需要記憶體和管理，而這些并不是免費的。事實上，在記憶體有限的裝置上，對性能的影響可能遠遠超過建立層帶來的任何好處。每一層的紋理都需要上傳到 GPU，使 CPU 與 GPU 之間的帶寬、GPU 上可用于紋理處理的記憶體都受到進一步限制
如果大部分渲染時間花費在繪制上，即表示存在繪制問題
下面是一些常見的繪制問題
1、繪制風暴影響響應或動畫
較大的繪制區域或大開銷繪制影響了響應或動畫，要避免繪制、提升将要移動到自有層的元素，使用變形和不透明度
2、層數激增影響動畫
使用 translateZ(0) 過度提升過多的元素會嚴重影響動畫性能，要謹慎提升到層，并且僅在了解這樣會有切實改進時才提升到層
好的代碼像粥一樣，都是用時間熬出來的