6張圖讓你搞懂瀏覽器渲染網(wǎng)頁(yè)過(guò)程
我的想法：如果我要構(gòu)建快速可靠的網(wǎng)站，需要真正了解瀏覽器渲染網(wǎng)頁(yè)的每個(gè)步驟機(jī)制，這樣就可以在開(kāi)發(fā)過(guò)程中對(duì)每個(gè)步驟進(jìn)行優(yōu)化。這篇文章是我在較高水平上對(duì)端到端過(guò)程的學(xué)習(xí)總結(jié)。
好了，廢話不多說(shuō)，我們開(kāi)始吧。這個(gè)過(guò)程可以分為以下幾個(gè)主要階段：
- 開(kāi)始解析HTML
- 獲取外部資源
- 解析 CSS 并構(gòu)建CSSOM
- 執(zhí)行 JavaScript
- 合并 DOM 和 CSSOM 以構(gòu)造渲染樹(shù)
- 計(jì)算布局和繪制
1.開(kāi)始解析HTML
當(dāng)瀏覽器通過(guò)網(wǎng)絡(luò)接收頁(yè)面的HTML數(shù)據(jù)時(shí)，它會(huì)立即設(shè)置解析器將HTML轉(zhuǎn)換為文檔對(duì)象模型(DOM)。
文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問(wèn)，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象(包含屬性和方法的對(duì)象)組成的結(jié)構(gòu)集合。簡(jiǎn)言之，它會(huì)將web頁(yè)面和腳本或程序語(yǔ)言連接起來(lái)。
解析過(guò)程的第一步是將HTML分解并表示為開(kāi)始標(biāo)記、結(jié)束標(biāo)記及其內(nèi)容標(biāo)記，然后它可以構(gòu)造DOM。
2. 獲取外部資源
當(dāng)解析器遇到外部資源(如CSS或JavaScript文件)時(shí)，解析器將提取這些文件。解析器在加載CSS文件時(shí)繼續(xù)運(yùn)行，此時(shí)會(huì)阻止頁(yè)面渲染，直到資源加載解析完(稍后會(huì)詳細(xì)介紹)。
JavaScript 文件略有不同-默認(rèn)情況下，解析器會(huì)在加載 JS 文件然后進(jìn)行解析同時(shí)會(huì)阻止對(duì)HTML的解析。可以將兩個(gè)屬性添加到腳本標(biāo)簽中以減輕這種情況：defer 和async。兩者都允許解析器在后臺(tái)加載JavaScript 文件的同時(shí)繼續(xù)運(yùn)行，但是它們的執(zhí)行方式不同。關(guān)于這一點(diǎn)后面還會(huì)再講一點(diǎn)，但總的來(lái)說(shuō)：
defer表示文件的執(zhí)行將被延遲，直到文檔的解析完成為止。如果多個(gè)文件具有defer屬性，則將按照頁(yè)面放置的順序依次執(zhí)行。
- <script type="text/javascript" src="script.js" defer>
async 意味著文件將在加載后立即執(zhí)行，這可能是在解析過(guò)程中或在解析過(guò)程之后執(zhí)行的，因此不能保證異步腳本的執(zhí)行順序。
- <script type="text/javascript" src="script.js" async>
預(yù)加載資源
元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁(yè)面中 元素內(nèi)部書(shū)寫(xiě)一些聲明式的資源獲取請(qǐng)求，可以指明哪些資源是在頁(yè)面加載完成后即刻需要的。
對(duì)于這種即刻需要的資源，你可能希望在頁(yè)面加載的生命周期的早期階段就開(kāi)始獲取，在瀏覽器的主渲染機(jī)制介入前就進(jìn)行預(yù)加載。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁(yè)面的初步渲染，進(jìn)而提升性能。
- <link href="style.css" rel="preload" as="style" />
3.解析CSS并構(gòu)建
CSSOM你可能很早就知道DOM，但對(duì)**CSSOM(CSS對(duì)象模型)**可能聽(tīng)得少，反正我也沒(méi)聽(tīng)過(guò)幾次。
CSS 對(duì)象模型 (CSSOM) 是樹(shù)形形式的所有CSS選擇器和每個(gè)選擇器的相關(guān)屬性的映射，具有樹(shù)的根節(jié)點(diǎn)，同級(jí)，后代，子級(jí)和其他關(guān)系。CSSOM 與 文檔對(duì)象模型(DOM) 非常相似。兩者都是關(guān)鍵渲染路徑的一部分，也是正確渲染一個(gè)網(wǎng)站必須采取的一系列步驟。
CSSOM 與 DOM一起構(gòu)建渲染樹(shù)，瀏覽器依次使用渲染樹(shù)來(lái)布局和繪制網(wǎng)頁(yè)。
與HTML文件和DOM相似，加載CSS文件時(shí)，必須將它們解析并轉(zhuǎn)換為樹(shù)-這次是CSSOM。它描述了頁(yè)面上的所有CSS選擇器，它們的層次結(jié)構(gòu)和屬性。
CSSOM 與 DOM的不同之處在于它不能以增量方式構(gòu)建，因?yàn)镃SS規(guī)則由于特定性而可以在各個(gè)不同的點(diǎn)相互覆蓋。這就是CSS 阻塞渲染的原因，因?yàn)樵诮馕鏊蠧SS并構(gòu)建CSSOM之前，瀏覽器無(wú)法知道每個(gè)元素在屏幕上的位置。
4.執(zhí)行JavaScript
不同的瀏覽器有不同的 JS 引擎來(lái)執(zhí)行此任務(wù)。從計(jì)算機(jī)資源的角度來(lái)看，解析 JS 可能是一個(gè)昂貴的過(guò)程，比其他類(lèi)型的資源更昂貴，因此優(yōu)化它對(duì)于獲得良好的性能是如此重要。
載入事件
加載的JS和DOM被完全解析并準(zhǔn)備就緒后就會(huì) emit document.DOMContentLoaded事件。對(duì)于需要訪問(wèn)DOM的任何腳本，例如以某種方式進(jìn)行操作或偵聽(tīng)用戶(hù)交互事件，優(yōu)良作法是在執(zhí)行腳本之前先等待此事件。
- document.addEventListener('DOMContentLoaded', (event) => {
- // 這里面可以安全地訪問(wèn)DOM了
- });
在所有其他內(nèi)容(例如異步JavaScript，圖像等)完成加載后，將觸發(fā)window.load事件。
- window.addEventListener('load', (event) => {
- // 頁(yè)面現(xiàn)已完全加載
- });
5.合并DOM和CSSOM 構(gòu)建渲染樹(shù)
渲染樹(shù)是DOM和CSSOM的組合，表示將要渲染到頁(yè)面上的所有內(nèi)容。這并不一定意味著渲染樹(shù)中的所有節(jié)點(diǎn)都將在視覺(jué)上呈現(xiàn)，例如，將包含opacity: 0或visibility: hidden的樣式的節(jié)點(diǎn)，并仍然可以被屏幕閱讀器等讀取，而display: none不包括任何內(nèi)容。此外，諸如之類(lèi)的不包含任何視覺(jué)信息的標(biāo)簽將始終被忽略。
與 JS 引擎一樣，不同的瀏覽器具有不同的渲染引擎。
6. 計(jì)算布局和繪制
現(xiàn)在我們有了完整的渲染樹(shù)，瀏覽器知道了要渲染什么，但是不知道在哪里渲染。因此，必須計(jì)算頁(yè)面的布局(即每個(gè)節(jié)點(diǎn)的位置和大小)。渲染引擎從頂部開(kāi)始一直向下遍歷渲染樹(shù)，計(jì)算應(yīng)顯示每個(gè)節(jié)點(diǎn)的坐標(biāo)。
完成之后，最后一步是獲取布局信息并將像素繪制到屏幕上。
作者：James Starkie 譯者：前端小智 來(lái)源：dev
原文：https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ahc
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
