介紹
Chrome 開發(fā)者工具非常重要，所蘊含的內(nèi)容也是非常多的，熟練使用它能讓你更加深入地了解瀏覽器內(nèi)部工作原理。
網(wǎng)絡(luò)面板
時間線
時間線主要用來展示 HTTP、HTTPS、WebSocket 加載的狀態(tài)和時間的一個關(guān)系，用于直觀感受頁面的加載過程。如果是多條豎線堆疊在一起，那說明這些資源被同時加載。至于具體到每個文件的加載信息，還需用到詳細(xì)列表。
下載信息概要
下載信息概要面板中，需要關(guān)注兩點：
-
DOMContentLoaded事件發(fā)生后，說明頁面已經(jīng)構(gòu)建好 DOM 了，這就意味著構(gòu)建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已經(jīng)下載完成了 -
Load說明瀏覽器已經(jīng)加載了所有的資源（圖像、樣式表等）
通過這個下載信息概要面板可以查看觸發(fā)這兩個事件所花費的時間。
請求列表
單個請求時間線
看一個請求的詳細(xì)流程，可以看它的時間線面板
- 第一個是
Queuing，也就是排隊的意思，當(dāng)瀏覽器發(fā)起一個請求時，會有很多原因?qū)е略撜埱蟛荒鼙涣⒓磮?zhí)行，需要排隊等待（首先，頁面中的資源是有優(yōu)先級的，比如 CSS、HTML、JavaScript 等都是頁面中的核心文件，所以優(yōu)先級最高；而圖片、視頻、音頻這類資源就不是核心資源，優(yōu)先級就比較低。通常當(dāng)后者遇到前者時，就需要“讓路”，進(jìn)入待排隊狀態(tài)。其次，瀏覽器會為每個域名最多維護(hù) 6 個 TCP 連接，如果發(fā)起一個 HTTP 請求時，這 6 個 TCP 連接都處于忙碌狀態(tài)，那么這個請求就會處于排隊狀態(tài)。最后，網(wǎng)路進(jìn)程在為數(shù)據(jù)分配磁盤空間時，新的 HTTP 請求也需要短暫的等到磁盤分配結(jié)束。）。 - 等待排隊完成之后，就要進(jìn)入發(fā)起連接的狀態(tài)了。不過在這之前，還有一些原因可能導(dǎo)致連接過程被推遲，這個推遲就表現(xiàn)在面板中的
Stalled上，它表示停滯的意思。 - 如果使用了代理服務(wù)器，還會增加一個
Proxy Negotiation階段，也就是代理協(xié)商階段，它表示代理服務(wù)器連接協(xié)商所用的時間 - 接下來就是是
Initial connection/SSL階段，也就是和服務(wù)器建立連接的階段，還需要一個額外的 SSL 握手時間，這個過程主要用來協(xié)商一些加密信息 - 和服務(wù)器建立好連接之后，網(wǎng)絡(luò)進(jìn)程會準(zhǔn)備請求數(shù)據(jù)，并將其發(fā)送給網(wǎng)絡(luò)，這就是
Request sent階段。通常這個階段非常快，因為只需要把瀏覽器緩沖區(qū)的數(shù)據(jù)發(fā)送出去就結(jié)束了，并不需要判斷服務(wù)器是否接收到。 - 數(shù)據(jù)發(fā)送出去后，接下來就是等待接收服務(wù)器第一個字節(jié)的數(shù)據(jù)，這個階段稱為
Waiting(TTFB)，通常也稱為"第一時間"，是反映服務(wù)器端響應(yīng)速度的重要指標(biāo)（它包含了 TCP 連接時間、發(fā)送 HTTP 請求時間和獲得響應(yīng)消息第一個字節(jié)時間。如果 TTFB 時間過大，說明服務(wù)器性能較差） - 接收到第一個字節(jié)之后，進(jìn)入陸續(xù)接收完整數(shù)據(jù)的階段，也就是
Content Download，這意味著第一字節(jié)時間到接收到全部響應(yīng)數(shù)據(jù)所用的時間
優(yōu)化時間線上耗時項
-
Queuing 時間過長
Queuing時間過長，大概率是由瀏覽器為每個域名最多維護(hù) 6 個連接導(dǎo)致的?；谶@個原因，可以讓 1 個站點下面的資源放在多個域名下面，比如放到 3 個域名下就可以支持 18 個連接了，這種方法稱為域名切片技術(shù)。另外，因為 HTTP2 已經(jīng)沒有每個域名最多維護(hù) 6 個 TCP 連接的限制了，所以把站點升級到 HTTP2 也不失為一個方法。 -
TTFB 時間過長
可能的原因有： 服務(wù)器生成頁面數(shù)據(jù)的時間過長（對于動態(tài)網(wǎng)頁來說，服務(wù)器收到用戶打開一個頁面的請求時，首先要從數(shù)據(jù)庫中讀取該頁面所需的數(shù)據(jù)，然后把這些數(shù)據(jù)傳入到模板中，模板渲染后再返回給用戶，這個處理過程中，可能某個環(huán)節(jié)出現(xiàn)問題）、網(wǎng)絡(luò)的原因（使用了低帶寬的服務(wù)器等）、發(fā)送請求頭時帶上了多余的用戶信息（比如一些不必要的 Cookie 信息，服務(wù)器接收到這些信息之后可能需要對每一項都做處理，加大了服務(wù)器的處理時長）。
針對每一項采取對應(yīng)措施，例如通過增加各種緩存技術(shù)來提高服務(wù)器處理速度、使用 CDN 緩存靜態(tài)文件來解決網(wǎng)絡(luò)問題、盡量減少不必要的 Cookie 數(shù)據(jù)信息等。 -
Content Download 時間過長
可能是字節(jié)數(shù)太多的原因?qū)е碌?，可以減少文件大小，比如壓縮、去掉源碼中不必要的注釋等。
lighthouse 插件
chrome 瀏覽器中添加擴(kuò)展程序 lighthouse，結(jié)合頁面加載過程來觀察頁面指標(biāo)數(shù)據(jù)
腳本執(zhí)行結(jié)束，渲染進(jìn)程判斷該頁面的 DOM 生成完畢，于是觸發(fā) DOMContentLoad 事件。等所有資源都加載完成之后，再觸發(fā) onload 事件。
Performance（性能指標(biāo)）
-
First Paint (FP)
當(dāng)渲染進(jìn)程確認(rèn)要渲染當(dāng)前的請求后，渲染進(jìn)程會創(chuàng)建一個空白頁面，我們把創(chuàng)建空白頁面的這個時間稱為FP。
然后渲染進(jìn)程繼續(xù)請求關(guān)鍵資源（關(guān)鍵資源包括了 JavaScript 文件和 CSS 文件，因為關(guān)鍵資源會阻塞頁面的渲染，所以需要等待關(guān)鍵資源加載完成后，才能執(zhí)行進(jìn)一步的頁面繪制。腳本的執(zhí)行會修改 DOM，引發(fā)重繪和重排等操作）。 -
First Contentful Paint (FCP)
首次內(nèi)容繪制，瀏覽器首次繪制來自 DOM 的內(nèi)容的時間，這是用戶第一次開始看到頁面內(nèi)容，但僅僅是內(nèi)容，并不意味著它是有用的內(nèi)容（例如 Header、導(dǎo)航欄等）。 -
Time to Interactive (TTI)
網(wǎng)頁第一次完全達(dá)到可交互狀態(tài)的時間點，瀏覽器可以持續(xù)性的響應(yīng)用戶的輸入。 -
Speed Index（首屏?xí)r間）
速度指數(shù)是一個表示頁面可視區(qū)域中內(nèi)容的填充速度的指標(biāo)，可以通過計算頁面可見區(qū)域內(nèi)容顯示的平均時間來衡量 -
Total Blocking Time (TBT)
總阻塞時間，度量了FCP和TTI之間的總時間，在該時間范圍內(nèi)，主線程被阻塞足夠長的時間以防止輸入響應(yīng)。
只要存在長任務(wù)，該主線程就會被視為“阻塞”，是因為瀏覽器無法中斷正在進(jìn)行的任務(wù)，如果用戶確實在較長的任務(wù)中間與頁面進(jìn)行交互，則瀏覽器必須等待任務(wù)完成才能響應(yīng)。 -
Largest Contentful Paint (LCP)
最大內(nèi)容繪制，可視區(qū)域中最大的內(nèi)容元素呈現(xiàn)到屏幕上的時間，用以估算頁面的主要內(nèi)容對用戶可見時間（LCP考慮的元素包括<img>元素、<image>元素內(nèi)的<svg>元素、<video>元素、通過url()函數(shù)加載背景圖片的元素、包含文本節(jié)點或其他內(nèi)聯(lián)文本元素子級的塊級元素）。 -
Cumulative Layout Shift (CLS)
累積布局偏移，CLS會測量在頁面整個生命周期中發(fā)生的每個意外的布局移位的所有單獨布局移位分?jǐn)?shù)的總和，它是一種保證頁面的視覺穩(wěn)定性從而提升用戶體驗的指標(biāo)方案（布局偏移發(fā)生在可見元素從一個渲染幀到下一個渲染幀改變其位置的任何時候，CLS得分是給開發(fā)者的一個信號，表明他們的用戶沒有經(jīng)歷不必要的內(nèi)容移動，分?jǐn)?shù)越低越好）。
Accessibility（可訪問性）
Accessibility 輔助功能：無障礙設(shè)計，也稱為網(wǎng)站可達(dá)性。是指所創(chuàng)建的網(wǎng)站對所有用戶都可用/可訪問，不管用戶的生理/身體能力如何、不管用戶是以何種方式訪問網(wǎng)站。
比如：某處文字背景色和蚊子顏色對比度不夠，對于視障用戶可能不好區(qū)分。
Best Practices（最佳實踐）
實踐性檢測，如網(wǎng)頁安全性，如是否開啟 HTTPS、網(wǎng)頁存在的漏洞等，下圖是通過審計的項目
SEO（搜索優(yōu)化）
比如網(wǎng)頁 title 是否符合搜索引擎的優(yōu)化標(biāo)準(zhǔn)等
Performance 面板
認(rèn)識配置面板
- 區(qū)域 1 可以設(shè)置
Network來限制網(wǎng)絡(luò)加載速度，CPU來限制 CPU 的運算速度（例如：將網(wǎng)絡(luò)設(shè)置為Fast 3G，CPU 運算能力降低到 1/6 ）。 - 區(qū)域 2 中兩個按鈕可以用來監(jiān)控加載階段和交互階段的性能數(shù)據(jù)，不過是分別通過錄制來完成的（不同于 lighthouse 只能監(jiān)控加載階段的性能數(shù)據(jù)）。
錄制加載階段性能數(shù)據(jù)時，Performance 會重新刷新頁面，并等到頁面完全渲染出來后，Performance 就會自動停止錄制
錄制交互階段性能數(shù)據(jù)，需要手動停止錄制過程
認(rèn)識報告頁
兩種方式最終生成的報告都是一樣的，三個主要部分，分別是概覽面板、性能指標(biāo)面板、詳情面板。如圖所示：
概覽面板
概覽面板提供幾個關(guān)鍵指標(biāo)：**頁面幀速（FPS，F(xiàn)rames Per Second）、CPU資源消耗、網(wǎng)絡(luò)請求流量、V8 內(nèi)存使用量（堆內(nèi)存）**等，按照時間順序做成圖表的形式展現(xiàn)出來，這就是概覽面板。根據(jù)概覽面板，如何幫助我們定位可能存在的問題呢？
- FPS 圖中紅色塊表示附近渲染出一幀所需時間過長
- 如果 CPU 圖像占用面積太大，表示 CPU 使用了越高，有可能因為某個 JavaScript 占用太多的主線程時間
- 如果 V8 內(nèi)存使用量一直在增加，有可能是某種原因?qū)е铝藘?nèi)存泄漏
性能面板
我們通過概覽面板來定位問題的時間節(jié)點，然后再使用性能面板分析該時間節(jié)點內(nèi)的性能數(shù)據(jù)，具體來說，比如概率面板中的 FPS 圖中出現(xiàn)了紅色塊，點擊該紅色塊，可以定位到該紅色塊的時間節(jié)點內(nèi)，如圖所示：
你也可以通過鍵盤 "WASD" 四個鍵來進(jìn)行縮放和位置移動。這里 Main 指標(biāo)，詳細(xì)記錄了渲染主線程上的任務(wù)執(zhí)行記錄，通過分析 Main 指標(biāo)，能夠定位到頁面中所存在的性能問題。下面詳細(xì)介紹如何分析 Main 指標(biāo)。Main 指標(biāo)放大可以看到很多一段一段灰色橫條，每個灰色橫條對應(yīng)了一個任務(wù)，長條長度對應(yīng)了任務(wù)的執(zhí)行時長，如下圖所示：
通常，渲染主線程上的任務(wù)都是比較復(fù)雜的，Main 指標(biāo)不僅記錄了一個任務(wù)的時長，同時記錄了任務(wù)執(zhí)行過程中的一些關(guān)鍵細(xì)節(jié)，這些細(xì)節(jié)就是任務(wù)的過程，灰色下面的橫條就是一個個過程，同樣這些橫條的長度就代表這些過程執(zhí)行的時長。下面我們結(jié)合一個簡單的頁面來分析頁面加載過程：
<style>
.area{
border: 2px ridge;
}
.box{
background-color: rgba(106, 24, 238, 0.26);
height: 5em;
margin: 1em;
width: 5em;
}
</style>
<div class="area">
<div class="box rAF"></div>
</div>
<br>
function setNewArea() {
let el = document.createElement('div')
el.setAttribute('class', 'area')
el.innerHTML = '<div class="box rAF"></div>'
document.body.append(el)
}
setNewArea()
解析 HTML 數(shù)據(jù)階段，它的主要任務(wù)就是通過解析 HTML 數(shù)據(jù)、解析 CSS 數(shù)據(jù)、執(zhí)行 JavaScript 來生成 DOM 和 CSSOM，結(jié)合下圖分析：
文章來源：http://www.zghlxwxcb.cn/news/detail-800409.html
在 ParseHTML 過程中，如果解析到了 script 標(biāo)簽，便進(jìn)入腳本執(zhí)行過程，也就是圖中的 Evaluate Script。我們知道，執(zhí)行一段腳本首先需要編譯該腳本，也就是圖中對應(yīng)的 Compile Script。編譯好后，進(jìn)入程序執(zhí)行階段，在執(zhí)行全局代碼時，V8 會構(gòu)造一個 ananymouse 過程，在執(zhí)行 ananymouse 過程中，會調(diào)用 setNewArea，在調(diào)用 setNewArea 過程中又調(diào)用了 createElement，由于之后調(diào)用了 document.append 方法，觸發(fā)了 DOM 內(nèi)容的修改，所以又強(qiáng)制執(zhí)行了 Parse HTML。DOM 生成完成后，會觸發(fā)相關(guān)的 DOM 事件，比如典型的 DOMContentLoaded 和 readyStateChange 事件。文章來源地址http://www.zghlxwxcb.cn/news/detail-800409.html
到了這里，關(guān)于Chrome 開發(fā)者工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
