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