使用 Performance 看看瀏覽器在做些什么
加入我們一起學(xué)習(xí)，天天進(jìn)步
作者：ES2049
來(lái)源：https://segmentfault.com/a/1190000038442806
前言
Chrome 瀏覽器的 Performance 面板為我們提供了檢測(cè)頁(yè)面性能的能力，但其提供的遠(yuǎn)不止一些性能數(shù)據(jù)。本文將從工作原理的視角，結(jié)合實(shí)際工程的錄制結(jié)果，探一探性能面板向我們透露的其他信息。
性能面板
關(guān)于面板的功能與使用方法，可以參考這篇文章。本節(jié)主要介紹瀏覽器架構(gòu)與性能面板的關(guān)系。
因?yàn)樯形礇Q出最終的標(biāo)準(zhǔn)架構(gòu)，各大瀏覽器的實(shí)現(xiàn)細(xì)節(jié)各有不同。這里我們以 Chrome 的架構(gòu)為例，對(duì)照其架構(gòu)與性能面板的關(guān)系。
由下圖我們可以看到性能面板呈現(xiàn)的幾個(gè)主要線程。性能面板并不包含架構(gòu)中全部的線程，主要還是與頁(yè)面渲染過(guò)程相關(guān)的部分。
Network
Network 代表瀏覽器進(jìn)程中的網(wǎng)絡(luò)線程，我們可以看到時(shí)間軸上包含了所有的網(wǎng)絡(luò)請(qǐng)求和文件下載的調(diào)用信息，并以不同顏色標(biāo)識(shí)不同類型的資源。
Main
Main 代表渲染進(jìn)程中的主線程，渲染相關(guān)的事情基本都是它來(lái)做，腳本執(zhí)行、樣式計(jì)算、布局計(jì)算、繪制等等。
Compositor & Raster
Compositor 代表渲染進(jìn)程中的合成線程，Raster 代表渲染進(jìn)程中的柵格線程。如今瀏覽器繪制一個(gè)頁(yè)面，可以分為以下幾步：
主線程將頁(yè)面分成若干圖層（后文中會(huì)提及 Update Layer Tree） 柵格線程分別對(duì)每一個(gè)層進(jìn)行柵格化處理 合成線程將柵格化的圖塊合并成一個(gè)頁(yè)面
我們可以看到，在性能面板中主線程在最后調(diào)用了柵格線程做實(shí)際的渲染。
GPU
顯然，這部分就是 GPU Process 中的 GPU 線程。
瀏覽器的工作報(bào)告
接下來(lái)我們將大致從時(shí)間維度，看看瀏覽器錄制下來(lái)的「工作報(bào)告」。
文檔的下載解析
我們旅途的起點(diǎn)將從點(diǎn)擊 Chrome Performance Panel 的 Reload 按鈕（形如刷新）開(kāi)始。當(dāng)前頁(yè)面首先進(jìn)行卸載，伴隨著幾個(gè)日志上報(bào)，瀏覽器開(kāi)始了 index.html 的下載工作。
HTML 文檔下載完成后，瀏覽器開(kāi)始按照 HTML 標(biāo)準(zhǔn)對(duì) index.html 進(jìn)行解析，在主線程中將接收到的文本字符串解析為 DOM 。我們可以注意到，HTML 的解析過(guò)程并不是一氣呵成，這是因?yàn)?HTML 通常還包括了其他外部資源，如圖片、CSS、JS 等。這些文件需要通過(guò)網(wǎng)絡(luò)請(qǐng)求或緩存來(lái)獲取。其中，當(dāng) HTML 解析器解析到?