雖然一直在用Chrome DevTools赖捌，但大多停留在常用的功能和調(diào)試上，比如Elements/Network/Sources/Console等主要功能赫编，而對(duì)于性能分析/優(yōu)化相關(guān)的Timeline/Profiles一直敬而遠(yuǎn)之巡蘸，深感其門檻高，于是潛心閱讀文檔擂送，以望窺得一二悦荒，以解決實(shí)際問(wèn)題。
不同版本的Chrome DevTools差別很大嘹吨，這篇文章基于最新版的Mac Chrome完成搬味，主要介紹Network/Timeline/Profiles三個(gè)方面的內(nèi)容，為后續(xù)的加載優(yōu)化蟀拷，性能優(yōu)化做準(zhǔn)備碰纬。
之前寫(xiě)過(guò)一篇關(guān)于渲染性能的長(zhǎng)文章，有興趣的可以先閱讀閱讀问芬。
Network有哪些功能悦析？
Network主要有5個(gè)視窗，分別有不同的功能：
Controls 工具欄：用來(lái)控制Network的功能及外觀此衅。
Filters 篩選欄：根據(jù)篩選條件篩選請(qǐng)求列表强戴，按住command/ctrl鍵可多選亭螟。
Overviews 概覽：資源被加載過(guò)來(lái)的時(shí)間線，如果多條時(shí)間線垂直堆疊骑歹，表示多個(gè)資源被并行加載预烙。
Request Table 請(qǐng)求列表：該視窗列出了所有的資源請(qǐng)求，默認(rèn)按時(shí)間順序排序道媚，點(diǎn)擊某個(gè)資源扁掸，可以查看更詳細(xì)的信息。
Summary 總覽：匯總了請(qǐng)求數(shù)量最域，傳輸數(shù)據(jù)大小谴分，加載時(shí)間等信息。
默認(rèn)情況下羡宙，Request Table 請(qǐng)求列表展示如下信息狸剃，當(dāng)然，在請(qǐng)求列表的表頭右鍵可以配置請(qǐng)求列表顯示的內(nèi)容狗热。
Name：資源的名稱。
Status：HTTP的狀態(tài)碼虑省。
Type：資源的MIME類型匿刮。
Initiator：表示請(qǐng)求的上游，即發(fā)起者探颈。Parser表示是HTML解析器發(fā)起的請(qǐng)求熟丸；Redirect表示是HTTP跳轉(zhuǎn)發(fā)起的請(qǐng)求；Script表示是由腳本發(fā)起的請(qǐng)求伪节；Other表示是由其他動(dòng)作發(fā)起的請(qǐng)求光羞，比如用戶跳轉(zhuǎn)或者在導(dǎo)航欄輸入地址等。
Size：請(qǐng)求的大小怀大，包括響應(yīng)頭和響應(yīng)體的內(nèi)容纱兑。
Time：請(qǐng)求的時(shí)間，從請(qǐng)求開(kāi)始到請(qǐng)求完全結(jié)束化借。
Timeline：請(qǐng)求的時(shí)間線潜慎。
怎么錄制頁(yè)面快照？
選中工具欄的快照?qǐng)D標(biāo)蓖康，可以錄制頁(yè)面快照铐炫。
選中某一個(gè)快照，在概覽/請(qǐng)求列表出現(xiàn)的黃色豎線蒜焊，就是該快照被捕捉的真實(shí)時(shí)間倒信，雙擊快照可以放大。
DOMContentLoaded事件/Load事件的區(qū)別泳梆？
DOMContentLoaded事件 頁(yè)面文檔完全加載并解析完畢之后鳖悠，會(huì)觸發(fā)DOMContentLoaded事件榜掌，它在兩個(gè)地方都有體現(xiàn)：概覽視窗的藍(lán)色豎線，總覽視窗的觸發(fā)時(shí)間竞穷。
Load事件 當(dāng)所有資源加載完成后觸發(fā)的唐责，它在三個(gè)地方有體現(xiàn)：概覽視窗的紅色豎線，請(qǐng)求列表視窗的紅色豎線瘾带，總覽視窗的觸發(fā)時(shí)間鼠哥。
結(jié)合DOM文檔加載的加載步驟，DOMContentLoaded事件/Load事件觸發(fā)時(shí)機(jī)如下：
- 解析HTML結(jié)構(gòu)看政。
- 加載外部腳本和樣式表文件朴恳。
- 解析并執(zhí)行腳本代碼。// 部分腳本會(huì)阻塞頁(yè)面的加載
- DOM樹(shù)構(gòu)建完成允蚣。//
DOMContentLoaded 事件 - 加載圖片等外部文件于颖。
- 頁(yè)面加載完畢。//
load 事件
資源請(qǐng)求明細(xì)包含了哪些信息嚷兔？
點(diǎn)擊請(qǐng)求列表某個(gè)請(qǐng)求的名稱森渐，可以查看該請(qǐng)求的詳細(xì)信息。詳細(xì)信息主要有4個(gè)方面：
Headers：資源的HTTP頭
Preview：預(yù)覽JSON/image/text資源
Response：資源的HTTP響應(yīng)頭
Timing：資源的請(qǐng)求生命周期
Cookies：查看HTTP請(qǐng)求頭和響應(yīng)頭附帶的cookie信息
查看HTTP頭：包含了資源的請(qǐng)求URL冒晰，HTTP方法同衣，響應(yīng)的狀態(tài)碼。此外壶运，還列出了HTTP請(qǐng)求頭和響應(yīng)頭及其值耐齐，以及請(qǐng)求參數(shù)。
查看HTTP響應(yīng)內(nèi)容：可以清楚的看到HTTP請(qǐng)求的返回結(jié)果蒋情。
資源預(yù)覽：沒(méi)什么好講的埠况，可以查看JSON/image/text等資源。
Cookies：該域名下存儲(chǔ)的cookie信息棵癣，其中包含了cookie的特性辕翰。
Name：cookie的名稱。
Value：cookie的值浙巫。
Domain：cookie所屬域名金蜀。
Path：cookie所屬URL。
Expire/Max-Age：cookie的存活時(shí)間的畴。
Size：cookie的字節(jié)大小渊抄。
HTTP：表示cookie只能被瀏覽器設(shè)置游桩，而且JS不能修改需五。
Secure：表示cookie只能在安全連接上傳輸。
Timing：查看資源請(qǐng)求的生命周期族奢，包含Queing/Stalled/Request/Response/Request sent/Waiting/Content Download各個(gè)階段煎娇。
如何查看資源請(qǐng)求的上游和下游二庵？
按時(shí)shift鍵贪染，鼠標(biāo)hover在請(qǐng)求上，可以查看請(qǐng)求的上游和下游催享，如下圖所示杭隙，hover在common.js上，可以看到有一個(gè)綠色請(qǐng)求因妙、一個(gè)紅色請(qǐng)求痰憎。其中綠色請(qǐng)求表示common.js的上游請(qǐng)求，即誰(shuí)觸發(fā)了common.js請(qǐng)求攀涵，紅色請(qǐng)求表示common.js的下游請(qǐng)求铣耘，即common.js又觸發(fā)了什么請(qǐng)求。
想對(duì)請(qǐng)求列表排序以故？
請(qǐng)求列表的資源默認(rèn)是按照起始時(shí)間排序蜗细，最上面的請(qǐng)求最先發(fā)起。點(diǎn)擊表頭的Timeline可以重新排序怒详，主要有如下幾個(gè)維度炉媒。
Timline - Start Time：按請(qǐng)求的發(fā)起時(shí)間排序。
Timline - Response Time：按請(qǐng)求的響應(yīng)時(shí)間排序昆烁。
Timline - End Time：按請(qǐng)求的結(jié)束時(shí)間排序橱野。
Timline - Total Duration：按請(qǐng)求的總耗時(shí)排序，可以快捷的找出耗時(shí)最多的資源善玫。
Timline - Latency：按請(qǐng)求的延遲排序，延遲是指請(qǐng)求發(fā)起的時(shí)間到響應(yīng)開(kāi)始的時(shí)間密强，可以快捷的找出請(qǐng)求等待時(shí)間最長(zhǎng)（TTFB）的資源茅郎。
想對(duì)請(qǐng)求進(jìn)行篩選？
通過(guò)篩選視窗可以對(duì)請(qǐng)求進(jìn)行多維度的篩選或渤，按住Command/Ctrl鍵可以同時(shí)選擇多個(gè)篩選條件系冗。
此外，篩選框可以實(shí)現(xiàn)很多定制化的篩選薪鹦，比如字符串匹配掌敬，關(guān)鍵詞篩選等，其中關(guān)鍵詞篩選主要有如下幾種：
domain：篩選出指定域名的請(qǐng)求池磁，不僅支持自動(dòng)補(bǔ)全奔害，還支持*匹配。
has-response-header：篩選出包含指定響應(yīng)頭的請(qǐng)求地熄。
is：通過(guò)is:running找出WebSocket請(qǐng)求华临。
larger-than：篩選出請(qǐng)求大于指定字節(jié)大小的請(qǐng)求，其中1000表示1k端考。
method：篩選出指定HTTP方法的請(qǐng)求雅潭，比如GET請(qǐng)求揭厚、POST請(qǐng)求等。
mime-type：篩選出指定文件類型的請(qǐng)求扶供。
mixed-content：篩選出混合內(nèi)容的請(qǐng)求（不懂啥意思）筛圆。
scheme：篩選出指定協(xié)議的請(qǐng)求，比如scheme:http椿浓、scheme:https太援。
set-cookie-domain：篩選出指定cookie域名屬性的包含Set-Cookie的請(qǐng)求。
set-cookie-name：篩選出指定cookie名稱屬性的包含Set-Cookie的請(qǐng)求轰绵。
set-cookie-value：篩選出指定cookie值屬性的包含Set-Cookie的請(qǐng)求粉寞。
status-code：篩選出指定HTTP狀態(tài)碼的請(qǐng)求。
主流的幾個(gè)篩選截圖如下：
如何模擬不同的網(wǎng)絡(luò)環(huán)境左腔？
Network > Filters 篩選欄下有可以模擬不同網(wǎng)絡(luò)環(huán)境下的選項(xiàng)唧垦，對(duì)于模擬測(cè)試低網(wǎng)速環(huán)境，以及針對(duì)低網(wǎng)速環(huán)境做加載優(yōu)化很有幫助液样。
如何清除緩存和Cookie振亮？
在Network的請(qǐng)求列表視窗中，右鍵也提供了清除Cookie和緩存的選項(xiàng)鞭莽。
另外坊秸，調(diào)試模式下，強(qiáng)烈建議勾選Disable cache選項(xiàng)澎怒，以避免緩存引起的一些詭異問(wèn)題褒搔。
系列文章
Chrome DevTools 之 Timeline，快捷性能優(yōu)化工具
Chrome DevTools 之 Profiles喷面，深度性能優(yōu)化必備
