雖然一直在用Chrome DevTools，但大多停留在常用的功能和調(diào)試上，比如Elements/Network/Sources/Console等主要功能，而對于性能分析/優(yōu)化相關(guān)的Timeline/Profiles一直敬而遠(yuǎn)之，深感其門檻高，于是潛心閱讀文檔，以望窺得一二，以解決實際問題。
不同版本的Chrome DevTools差別很大，該系列文章基于最新版的Mac Chrome完成，主要介紹Network/Timeline/Profiles三個方面的內(nèi)容。
之前寫過一篇關(guān)于渲染性能的長文章，有興趣的可以先閱讀閱讀。
Timeline有哪些功能？
Timeline主要有4個視窗，分別有不同的功能：
Controls 工具欄：提供了錄制，清除記錄，配置錄制過程中需要捕捉哪些數(shù)據(jù)的功能。
Overview 概覽：頁面性能的概覽圖，通過此圖可以大致的分析頁面。
Flame Chart 火焰圖：展示了JavaScript的調(diào)用堆棧信息。上圖中還可以看到三條垂直的虛線，其中藍(lán)線表示DOMConentLoaded事件，綠線表示第一次繪制，紅線表示load事件，由此也可以看出DOMContentLoaded事件比load事件要早不少。
Details 詳情：選中某個事件，會顯示該事件的信息，如果沒有選中任何事件，就會顯示選中時間區(qū)段的幀信息。
接下來會詳細(xì)介紹Timeline的詳細(xì)功能。
Overview 概覽視窗
在Overview 概覽這個小視窗里包含了三部分圖形：
FPS：每秒的幀數(shù)，綠色條約稿，表示FPS值越高，通常上面附帶紅色塊的幀表示該幀時間過長(jank)，可能需要優(yōu)化。
CPU：CPU資源，面積圖表示不同事件對CPU資源的消耗。
NET：每種顏色條代表不同的資源，條越長表示加載資源耗時越長，每根條上顏色淺的部分表示請求等待時間，顏色深的部分表示資源傳輸時間。此外，HTML文件是藍(lán)色條，腳本文件是黃色條，樣式文件是紫色條，媒體文件是綠色條，其他的是灰色條，網(wǎng)絡(luò)請求部分更詳細(xì)的信息建議查看Network。
錄制
點擊小黑點開始錄制，再次點擊停止錄制，Chrome DevTools還人性化的提供了一些小彩蛋：在Timeline直接刷新頁面，會自動開始錄制頁面加載過程；錄制結(jié)束，會自動定位到可能需要優(yōu)化的部分。
當(dāng)然，錄制還是有一些小技巧：
錄制時間盡可能短：便于分析
操作要簡單：每次錄制盡量保證簡單的操作
禁止瀏覽器緩存：通過Chrome DevTools > Network > Disable cache禁止緩存
禁掉插件：去除插件對錄制過程的影響，禁掉插件覺得很費事兒？用隱私模式呀
JS Profile選項
勾選Chrome DevTools > Timeline > JS Profile，然后錄制，可以捕捉JavaScript堆棧調(diào)用信息。
Paint選項
打開Chrome DevTools > Timeline > JS Profile，然后錄制，可以捕捉繪制信息。選中某個Paint事件，就可以查看其繪制詳情。
別忘了前文提到過的Chrome DevTools > ESC > Rendering > Enable paint flashing的功能，能提供很直觀的Paint感受，但凡發(fā)生Paint的區(qū)域，都會閃爍一下。
Details 詳情視窗
選中Flame Chart 火焰圖中的事件，就可以在詳情視窗中查看該事件的明細(xì)；有些tab是特定事件專有的，只會在特定事件選中后才會出現(xiàn)。
Timeline事件搜索
Command + F可以搜索Timeline事件，很人性化的功能，既可以很直觀的看出指定時間區(qū)間內(nèi)的事件數(shù)目，同時還可以很方便的過濾掉不關(guān)注的事件。
Timeline事件
Timeline錄制過程中包含很多事件，大致分為：加載事件、腳本事件、渲染事件、繪制事件，其中每個類別的事件都包含數(shù)個小事件，并且還擁有不同的事件屬性，具體可以查看Timeline事件文檔
系列文章
Chrome DevTools 之 Network，網(wǎng)絡(luò)加載分析利器
Chrome DevTools 之 Profiles，深度性能優(yōu)化必備
