看看瀏覽器如何解析我們寫的頁面？

述：瀏覽器渲染一共有五步

處理 HTML 并構(gòu)建 DOM 樹。
處理 CSS 構(gòu)建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹。
根據(jù)渲染樹來布局，計算每個節(jié)點(diǎn)的位置。
調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上

具體如下圖過程如下圖所示

在構(gòu)建 CSSOM 樹時，會阻塞渲染，直至 CSSOM 樹構(gòu)建完成。并且構(gòu)建 CSSOM 樹是一個十分消耗性能的過程，所以應(yīng)該盡量保證層級扁平，減少過度層疊，越是具體的 CSS 選擇器，執(zhí)行速度越慢
當(dāng) HTML 解析到 script 標(biāo)簽時，會暫停構(gòu)建 DOM ，完成后才會從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件。并且 CSS 也會影響 JS 的執(zhí)行，只有當(dāng)解析完樣式表才會執(zhí)行 JS ，所以也可以認(rèn)為這種情況下， CSS 也會暫停構(gòu)建 DOM

二、瀏覽器渲染五個階段

2.1 第一步：解析HTML標(biāo)簽，構(gòu)建DOM樹

在這個階段，引擎開始解析 html ，解析出來的結(jié)果會成為一棵 dom 樹

dom 的目的至少有 2 個

getElementById

當(dāng)解析器到達(dá)script標(biāo)簽的時候，發(fā)生下面四件事情

html 解析器停止解析,
如果是外部腳本，就從外部網(wǎng)絡(luò)獲取腳本代碼
將控制權(quán)交給 js 引擎，執(zhí)行 js 代碼
恢復(fù) html 解析器的控制權(quán)

由此可以得到第一個結(jié)論1

由于 <script> 標(biāo)簽是阻塞解析的，將腳本放在網(wǎng)頁尾部會加速代碼渲染。
defer 和 async 屬性也能有助于加載外部腳本。
defer 使得腳本會在 dom 完整構(gòu)建之后執(zhí)行；
async 標(biāo)簽使得腳本只有在完全 available 才執(zhí)行，并且是以非阻塞的方式進(jìn)行的

2.2 第二步：解析CSS標(biāo)簽，構(gòu)建CSSOM樹

我們已經(jīng)看到 html 解析器碰到腳本后會做的事情，接下來我們看下 html 解析器碰到樣式表會發(fā)生的情況
js 會阻塞解析，因?yàn)樗鼤薷奈臋n( document )。 css 不會修改文檔的結(jié)構(gòu)，如果這樣的話，似乎看起來 css 樣式不會阻塞瀏覽器 html 解析。但是事實(shí)上 css 樣式表是阻塞的。阻塞是指當(dāng) cssom 樹建立好之后才會進(jìn)行下一步的解析渲染

通過以下手段可以減輕cssom帶來的影響

將 script 腳本放在頁面底部
盡可能快的加載 css 樣式表
將樣式表按照 media type 和 media query 區(qū)分，這樣有助于我們將 css 資源標(biāo)記成非阻塞渲染的資源。
非阻塞的資源還是會被瀏覽器下載，只是優(yōu)先級較低

2.3 第三步：把DOM和CSSOM組合成渲染樹（render tree）

2.4 第四步：在渲染樹的基礎(chǔ)上進(jìn)行布局，計算每個節(jié)點(diǎn)的幾何結(jié)構(gòu)

布局( layout )：定位坐標(biāo)和大小，是否換行，各種 position , overflow , z-index 屬性

2.5 調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上

將渲染樹的各個節(jié)點(diǎn)繪制到屏幕上，這一步被稱為繪制 painting

三、渲染優(yōu)化相關(guān)

3.1 Load 和 DOMContentLoaded 區(qū)別

Load 事件觸發(fā)代表頁面中的 DOM ， CSS ， JS ，圖片已經(jīng)全部加載完畢。
DOMContentLoaded 事件觸發(fā)代表初始的 HTML 被完全加載和解析，不需要等待 CSS ， JS ，圖片加載

3.2 圖層

一般來說，可以把普通文檔流看成一個圖層。特定的屬性可以生成一個新的圖層。不同的圖層渲染互不影響，所以對于某些頻繁需要渲染的建議單獨(dú)生成一個新圖層，提高性能。但也不能生成過多的圖層，會引起反作用。

通過以下幾個常用屬性可以生成新圖層

3D 變換： translate3d 、 translateZ
will-change
video 、 iframe 標(biāo)簽
通過動畫實(shí)現(xiàn)的 opacity 動畫轉(zhuǎn)換
position: fixed

3.3 重繪（Repaint）和回流（Reflow）

重繪和回流是渲染步驟中的一小節(jié)，但是這兩個步驟對于性能影響很大

color

回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流?；亓魉璧某杀颈戎乩L高的多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流

以下幾個動作可能會導(dǎo)致性能問題

window

很多人不知道的是，重繪和回流其實(shí)和 Event loop 有關(guān)

當(dāng) Event loop 執(zhí)行完 Microtasks 后，會判斷 document 是否需要更新。因?yàn)闉g覽器是 60Hz 的刷新率，每 16ms 才會更新一次。
然后判斷是否有 resize 或者 scroll ，有的話會去觸發(fā)事件，所以 resize 和 scroll 事件也是至少 16ms 才會觸發(fā)一次，并且自帶節(jié)流功能。
判斷是否觸發(fā)了 media query
更新動畫并且發(fā)送事件
判斷是否有全屏操作事件
執(zhí)行 requestAnimationFrame 回調(diào)
執(zhí)行 IntersectionObserver 回調(diào)，該方法用于判斷元素是否可見，可以用于懶加載上，但是兼容性不好
更新界面
以上就是一幀中可能會做的事情。如果在一幀中有空閑時間，就會去執(zhí)行 requestIdleCallback 回調(diào)

3.4 減少重繪和回流

使用 translate 替代 top

使用 visibility 替換 display: none ，因?yàn)榍罢咧粫鹬乩L，后者會引發(fā)回流（改變了布局）
把 DOM 離線后修改，比如：先把 DOM 給 display:none (有一次 Reflow) ，然后你修改 100 次，然后再把它顯示出來
不要把 DOM 結(jié)點(diǎn)的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量

for(let i = 0; i < 1000; i++) {
 // 獲取 offsetTop 會導(dǎo)致回流，因?yàn)樾枰カ@取正確的值
 console.log(document.querySelector('.test').style.offsetTop)
}

不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
動畫實(shí)現(xiàn)的速度的選擇，動畫速度越快，回流次數(shù)越多，也可以選擇使用 requestAnimationFrame
CSS 選擇符從右往左匹配查找，避免 DOM 深度過深
將頻繁運(yùn)行的動畫變?yōu)閳D層，圖層能夠阻止該節(jié)點(diǎn)回流影響別的元素。比如對于 video 標(biāo)簽，瀏覽器會自動將該節(jié)點(diǎn)變?yōu)閳D層。

要：在本文中，將重點(diǎn)關(guān)注網(wǎng)頁的初始渲染，即它從解析 HTML 開始。我將探索可能導(dǎo)致高渲染時間的問題，以及如何解決它們。

本文分享自華為云社區(qū)《頁面首屏渲染性能指南-云社區(qū)-華為云》，作者：Ocean2022。

我們知道渲染頁面是一個將服務(wù)器的響應(yīng)內(nèi)容翻譯成圖片的過程。但是，如果你頁面的渲染性能比較糟糕的話，可能會帶來相對較高的跳出率。

在本文中，我將重點(diǎn)關(guān)注網(wǎng)頁的初始渲染，即它從解析 HTML 開始。我將探索可能導(dǎo)致高渲染時間的問題，以及如何解決它們。

關(guān)鍵渲染路徑（CRP）

關(guān)鍵渲染路徑 (CRP) 是瀏覽器將代碼轉(zhuǎn)換為屏幕上可顯示像素的過程。它有幾個階段，其中一些可以并行執(zhí)行以節(jié)省時間，但有些部分必須依次完成。 如下圖所示：

首先，一旦瀏覽器得到響應(yīng)，它就會開始解析它。當(dāng)它遇到依賴項(xiàng)時，它會嘗試下載它。如果它是一個樣式表文件，瀏覽器必須在渲染頁面之前完全解析它，這就是為什么 CSS 會阻塞渲染的原因。

如果是腳本，瀏覽器必須：停止解析，下載腳本，然后運(yùn)行。只有在那之后它才能繼續(xù)解析，因?yàn)?JavaScript 程序可以改變網(wǎng)頁的內(nèi)容（尤其是 HTML）。這就是為什么 JS 會阻塞解析的原因。

完成所有解析后，瀏覽器將構(gòu)建文檔對象模型 (DOM) 和級聯(lián)樣式表對象模型 (CSSOM)。將它們組合在一起得到渲染樹。頁面的不顯示部分不會進(jìn)入渲染樹，因?yàn)樗话L制頁面所需的數(shù)據(jù)。

倒數(shù)第二步是將渲染樹進(jìn)行布局，這個階段也稱為回流：就是計算每個渲染樹節(jié)點(diǎn)的每個位置及其大小的地方。

最后一步是繪制。它會根據(jù)瀏覽器在前一階段計算得到的數(shù)據(jù)對像素進(jìn)行著色。

優(yōu)化相關(guān)結(jié)論

因此，根據(jù)這一過程，我們在優(yōu)化性能方面，得出了一些結(jié)論。如果你要提升頁面初始化渲染的性能，你需要：

減少傳輸?shù)臄?shù)據(jù)量
減少瀏覽器必須下載的資源數(shù)量（尤其是阻塞的資源）
減小 CRP 的長度

同時，我們會根據(jù)下面 3 個指標(biāo)來衡量優(yōu)化的效率：

FP(First Paint)
FCP(First Contentful Paint)
FMP(First Meaningful Paint)

除了渲染時間之外，還有其他一些因素也需要考慮。例如，你的頁面使用了多少阻塞資源以及下載它們需要多長時間。

性能優(yōu)化策略

鑒于我們在上面得出的結(jié)論，我們得出網(wǎng)站性能優(yōu)化有三種主要策略：

盡量減少通過網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量；
減少通過網(wǎng)絡(luò)傳輸?shù)馁Y源總數(shù)；
縮短關(guān)鍵渲染路徑；

1. 減少要傳輸?shù)臄?shù)據(jù)量

首先，移除所有未使用的部分，例如 JavaScript 中無法訪問的函數(shù)、帶有從不匹配任何元素的選擇器的樣式以及被 CSS 永遠(yuǎn)隱藏的 HTML 標(biāo)簽。其次，刪除所有重復(fù)項(xiàng)。

然后，我建議建立一個自動壓縮過程。例如，它應(yīng)該從你的后端服務(wù)中刪除所有注釋（但不是源代碼）以及每個不包含附加信息的字符（例如 JS 中的空白字符）。

完成后，我們剩下的可以是文本字符串。這意味著我們可以安全地應(yīng)用諸如 GZIP（大多數(shù)瀏覽器都理解）之類的壓縮算法。

最后，還有緩存。瀏覽器第一次呈現(xiàn)頁面時它不會有幫助，但它會在以后的訪問中節(jié)省很多。 但是，記住兩點(diǎn)至關(guān)重要：

如果你使用 CDN，請確保支持緩存并在正確設(shè)置。
與其等待資源的到期，不如 將文件的“指紋”嵌入到其 URL 中，以使本地緩存無效。

當(dāng)然，應(yīng)該為每個資源定義緩存策略。有些可能很少改變或根本不會改變，有的則是變化的很快，還有些文件包含敏感的信息（可以使用 “private” 防止 CDN 緩存私有數(shù)據(jù)）。

2. 減少關(guān)鍵資源的總數(shù)

“關(guān)鍵”僅指網(wǎng)頁正確呈現(xiàn)所需的資源。因此，我們可以直接跳過所有流程中沒有涉及的樣式以及腳本文件。

樣式

為了告訴瀏覽器不需要特定的 CSS 文件，我們應(yīng)該為所有引用樣式表的鏈接設(shè)置媒體屬性。使用這種方法，瀏覽器將只根據(jù)需要處理與當(dāng)前媒體（設(shè)備類型、屏幕尺寸）匹配的資源，同時降低所有其他樣式表的優(yōu)先級。例如，如果你將 media=“print” 屬性添加到引用樣式以打印頁面的樣式標(biāo)記，則這些樣式不會在不打印媒體時干擾你的關(guān)鍵渲染路徑。

為了進(jìn)一步改進(jìn)該過程，你還可以將一些樣式內(nèi)聯(lián)，這可以為我們節(jié)省了至少一次到服務(wù)器的往返行程。

腳本

如上所述，腳本會阻塞解析，因?yàn)樗鼈兛梢愿淖?DOM 和 CSSOM。為了避免這一點(diǎn)，所有腳本標(biāo)簽都必須用屬性標(biāo)記——異步或延遲。

標(biāo)有 async 的腳本不會阻塞 DOM 構(gòu)建或 CSSOM，因?yàn)樗鼈兛梢栽?CSSOM 構(gòu)建之前執(zhí)行。但請記住，內(nèi)聯(lián)腳本無論如何都會阻止 CSSOM，除非你將它們放在 CSS 之上。

相比之下，標(biāo)有 defer 的腳本將在頁面加載結(jié)束時進(jìn)行執(zhí)行。

換句話說，使用 defer，腳本直到頁面加載事件被觸發(fā)后才會執(zhí)行，而 async 讓腳本在文檔被解析時就會在后臺運(yùn)行。

3.縮短關(guān)鍵渲染路徑長度

最后，應(yīng)將 CRP 長度縮短到可能的最小值。

作為樣式標(biāo)簽屬性的媒體查詢將減少必須下載的資源總數(shù)。 script 標(biāo)簽屬性 defer 和 async 將防止相應(yīng)的腳本阻塞解析。

使用 GZIP 壓縮、壓縮和歸檔資源將減少傳輸數(shù)據(jù)的大?。◤亩矞p少數(shù)據(jù)傳輸時間）。

內(nèi)聯(lián)一些樣式和腳本也可以減少瀏覽器和服務(wù)器之間的往返次數(shù)。

按照最新的最佳性能實(shí)踐理念，一個網(wǎng)站應(yīng)該做的最快的第一件事就是展示 ATF 內(nèi)容。 ATF 代表首屏。 這是立即可見的區(qū)域，無需滾動。 因此，最好以首先加載所需樣式和腳本的方式重新排列與渲染相關(guān)的所有內(nèi)容，而其他所有內(nèi)容都停止（既不解析也不渲染）。

結(jié)尾

總而言之，網(wǎng)站性能優(yōu)化包含了網(wǎng)站響應(yīng)的各個方面，例如緩存、設(shè)置 CDN、重構(gòu)、資源優(yōu)化等，但是所有這些都可以逐步完成。作為 Web 開發(fā)人員，你可以將本文作為參考，并始終記住在實(shí)驗(yàn)之前和之后測量性能。

瀏覽器開發(fā)人員盡最大努力優(yōu)化你訪問的每個頁面的網(wǎng)站性能，這就是瀏覽器通常實(shí)現(xiàn)所謂的“預(yù)加載器”的原因。這部分程序會在你以 HTML 格式請求的資源之前進(jìn)行掃描，以便一次發(fā)出多個請求并讓它們并行運(yùn)行。這就是為什么在 HTML（逐行）以及腳本標(biāo)簽中保持樣式標(biāo)簽彼此靠近的原因。

此外，嘗試批量更新 HTML 以避免多個布局事件，這些事件不僅由 DOM 或 CSSOM 中的更改觸發(fā)，而且在設(shè)備方向更改和窗口大小調(diào)整時也會觸發(fā)。

點(diǎn)擊下方，第一時間了解華為云新鮮技術(shù)~

華為云博客_大數(shù)據(jù)博客_AI博客_云計算博客_開發(fā)者中心-華為云

覽器解析HTML文件的過程是網(wǎng)頁呈現(xiàn)的關(guān)鍵步驟之一。具體介紹如下：

HTML文檔的接收和預(yù)處理

網(wǎng)絡(luò)請求處理：當(dāng)用戶輸入URL或點(diǎn)擊鏈接時，瀏覽器發(fā)起HTTP請求，服務(wù)器響應(yīng)并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網(wǎng)絡(luò)通信操作。
預(yù)解析優(yōu)化：為了提高性能，現(xiàn)代瀏覽器在主線程解析HTML之前會啟動一個預(yù)解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續(xù)渲染過程的順暢進(jìn)行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標(biāo)記轉(zhuǎn)化為符號序列，然后通過句法分析器按照HTML規(guī)范構(gòu)建出DOM樹。每個節(jié)點(diǎn)代表一個HTML元素，形成了多層次的樹狀結(jié)構(gòu)。
生成對象接口：生成的DOM樹是頁面元素的結(jié)構(gòu)化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態(tài)修改頁面內(nèi)容和結(jié)構(gòu)。

CSS解析與CSSOM樹構(gòu)建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標(biāo)簽引入的外部CSS文件和<style>標(biāo)簽中的內(nèi)聯(lián)CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關(guān)系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應(yīng)的樣式能夠被準(zhǔn)確計算。這些計算過程為后續(xù)的布局提供必要的樣式信息。

JavaScript加載與執(zhí)行

阻塞式加載：當(dāng)解析器遇到<script>標(biāo)簽時，它會停止HTML的解析，轉(zhuǎn)而先加載并執(zhí)行JavaScript代碼。這是因?yàn)镴S可能會修改DOM結(jié)構(gòu)或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進(jìn)行JS的加載和執(zhí)行，而不阻塞HTML解析。

渲染樹的構(gòu)建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節(jié)點(diǎn)及對應(yīng)的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關(guān)注<body>內(nèi)的可視化內(nèi)容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節(jié)點(diǎn)開始，遞歸地計算每個節(jié)點(diǎn)的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續(xù)繪制的基礎(chǔ)。
布局過程的優(yōu)化：現(xiàn)代瀏覽器會盡量優(yōu)化布局過程，例如通過流式布局的方式減少重復(fù)計算，確保高效地完成布局任務(wù)。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點(diǎn)的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內(nèi)容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進(jìn)行繪制，這樣只需更新變化的部分。

因此，我們開發(fā)中要注意以下幾點(diǎn)：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預(yù)處理器：合理組織CSS文件的結(jié)構(gòu)和覆蓋規(guī)則，利用CSS預(yù)處理器進(jìn)行模塊化管理。
利用瀏覽器緩存機(jī)制：通過設(shè)置合理的緩存策略，減少重復(fù)加載相同資源，提升二次訪問的體驗(yàn)。
優(yōu)化圖片和多媒體資源：適當(dāng)壓縮圖片和優(yōu)化多媒體資源的加載，減少網(wǎng)絡(luò)傳輸時間和渲染負(fù)擔(dān)。

綜上所述，瀏覽器解析HTML文件是一個復(fù)雜而高度優(yōu)化的過程，涉及從網(wǎng)絡(luò)獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發(fā)者需要深入理解這些步驟，以優(yōu)化網(wǎng)頁性能和用戶體驗(yàn)。通過合理組織HTML結(jié)構(gòu)、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行，可以顯著提升頁面加載速度和運(yùn)行效率。

在線咨詢

上一篇：3個月狂收近3.8億元！境外注冊境內(nèi)發(fā)展代理迅速擴(kuò)張……警惕互聯(lián)網(wǎng)賭博新動向
下一篇：技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

看看瀏覽器如何解析我們寫的頁面？