文章目錄
performance面板
這一章，我們一塊來看看performance面板的常用功能，打開devtools並跳轉到performance面板。
performance面板的最主要功能就是查看並優化頁面的各方面性能，其中就包括最常見的頁面渲染性能。（注：這塊版本由於我自己目前用的並不多，所以目前這塊知識的講述會顯得很淺顯。）
記錄表現
首先先來講述此頁面的常用按鈕的功能使用。
最左邊的第一個按鈕和第二個按鈕的功能在下方空白區域有說明，其功能分別是開始一個新的表現記錄即記錄運行時性能以及記錄一個頁面加載即記錄加載性能。
注意：只有這兩個按鈕才能開啓性能分析頁面。
第三個按鈕就是清除當前的性能分析頁面的記錄。
剩下的一些按鈕以及其下面的這塊可隱藏的功能區域幾乎都是爲了性能分析頁面所服務，大家有興趣可以自己試試。
性能分析
上圖就是一個新的記錄三秒的運行時性能表現，這個面板主要有上下兩個部分且都是爲了體現其性能表現，上半部分顯得有些雜亂且有很多細節的性能分支，比如Frames、Main、Raster等等，隨着所要查看的頁面的不同還會有更多的細節分支，每個分支都有其各自的體現性能的方式。
相比之下，下半部分的性能顯示就更爲直觀，以圖中爲例，3s的時間其中有1.5的時間用於頁面渲染，顯然此頁面的渲染的代碼性能並不高，有待優化。
除了Summary的面板查看性能外還有Bottom-up，Call Tree以及Event Log等三個面板，這裏也不再詳細講述，有興趣大家可以自己試試。
注意：隨着鼠標下上半面板所選擇的區域的不一樣，下半面板的顯示內容也會隨之改變，默認情況的是選擇全局Main板塊。
渲染功能區
剛剛我們查看到頁面的渲染部分耗時最大，接下來我們可以進一步查看具體的有關頁面渲染的更多細節功能。還記得Ctrl+Shift+P的快捷鍵嗎？沒錯，它就是打開devtools裏很多隱藏功能區的快捷鍵，其中就包括一個大系列的抽屜功能，輸入Show Render即可看到更多詳細的渲染功能。
這裏有很多有關查看頁面渲染的功能選項並且也都有相應的英文解釋，所以這裏我就不做過多介紹。
渲染性能
知道了瀏覽器可以支持渲染功能，那麼其最基本的底層原理又是什麼呢？
60fps 與設備刷新率
目前大多數設備的屏幕刷新率爲 60 次/秒。因此，如果在頁面中有一個動畫或漸變效果，或者用戶正在滾動頁面，那麼瀏覽器渲染動畫或頁面的每一幀的速率也需要跟設備屏幕的刷新率保持一致。
其中每個幀的預算時間僅比 16 毫秒多一點 (1 秒/ 60 = 16.66 毫秒)。但實際上，瀏覽器有整理工作要做，因此所有工作需要在 10 毫秒內完成。如果無法符合此預算，幀率將下降，並且內容會在屏幕上抖動。此現象通常稱爲卡頓，會對用戶體驗產生負面影響。
像素管道
像素管道即可以控制渲染的管道，其有五個區域：
- JavaScript。一般來說，我們會使用 JavaScript 來實現一些視覺變化的效果。
- Style。此過程是根據匹配選擇器計算出哪些元素應用哪些 CSS 規則的過程。從中知道規則之後，將應用規則並計算每個元素的最終樣式。
- Layout。在知道對一個元素應用哪些規則之後，瀏覽器即可開始計算它要佔據的空間大小及其在屏幕的位置。
- Paint。繪製是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個可視部分。繪製一般是在多個層上完成的。
- Composite。由於頁面的各部分可能被繪製到多層，由此它們需要按正確順序繪製到屏幕上，以便正確渲染頁面。對於與另一元素重疊的元素來說，這點特別重要，因爲一個錯誤可能使一個元素錯誤地出現在另一個元素的上層。
管道的每個部分都有可能產生卡頓。
定製devtools
這部分主要講述通過devtools的內部功能設置來設定適合自己風格的devtools。
Settings和Drawer
這兩大功能區域我在之前的文章裏都提到過。
首先，settings裏包含許多devtools的定製功能也是devtools裏功能最豐富的區域，大家可以自行去哪裏逛逛，兩種常用的打開devtools的settings的方式：
（快捷鍵）F1/（Shift+?）或者單擊settings按鈕。
drawer是隱藏功能區域裏的一類功能區，所以這裏面是一些隱藏的定製devtools的功能。
兩種打開方式：Esc或者（Ctrl+Shift+P）+drawer。
不難發現，目前總共有14種drawer：
如果有興趣的話可以把隱藏區域的所有功能都試試，那裏面除了drawer功能區域外還有Panel、Appearance、Console、Debugger、Elements、Global、Help、Mobile、Navigation、Network、Performance、Persistence、Rendering、Resources、Screenshot、Sensors、Settings、Sources這些功能區域。乍一看，功能區域非常多，但是其實有很多功能我們都以及打過照面。
面板重排序
這是原始的面板排序：
在不改變devtools寬度的情況下，此行只能顯示五種面板，爲了滿足我們自己的風格需求我們可以更改面板的前後順序（通過鼠標拖拽）以及顯示的面板（通過最右邊的選擇按鈕）。
並且我們還能夠改變devtools的寬度來顯示更多/更少的面板種類：
devtools的顯示位置
devtools總共有四種顯示位置可選：瀏覽器左邊，瀏覽器右邊，瀏覽器下邊以及開闢一個新的窗口。
首先，點擊devtools第一行的擴展按鈕：
然後Dock side可以選擇自己想要的devtools的顯示位置。
devtools的主題背景
先看看如下兩種devtools的背景效果圖：
一種light主題，一種dark主題，有沒有覺得dark主題似乎更酷。
打開方式：
首先打開Settings，在Preferences下的Appearance有Theme下拉按鈕選項，有兩套默認可選的主題背景，至於System preference是怎麼玩的我暫時也不知道。
結語
送君千里終須一別，到此，經過五期的內容總結，devtools裏的一些基本常用的功能都已經介紹完畢，但是我所介紹的這麼多也只是devtools強大功能的冰山一角。剩餘的內容要麼就是比較簡單也不常用，大家可以自己一眼就能看明白，要麼就是我自己暫時也不會，所以這裏只是一個暫時的終點。隨着自己的繼續學習，後面還會介紹有關devtools的更好玩更實用的功能文章。
最後，我在這裏再給出devtools的官方教程，有條件的夥伴可以參看此教程進行學習：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn