大家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎的內(nèi)容。

今天，我們來了解一下 HTML 和網(wǎng)頁有什么關系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個過程中我們可以進行怎樣的處理來提升網(wǎng)頁的性能，從而提升用戶的體驗。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發(fā)現(xiàn)一直在轉圈，或者等了好長時間才打開頁面……

此時的你，會選擇關掉頁面還是耐心等待呢？

這一現(xiàn)象，除了網(wǎng)絡不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設計不合理導致加載時間過長導致的。

我們都知道，頁面是用 HTML／CSS／JavaScript 來編寫的。

HTML 的職責在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結構；

CSS 用來裝飾 HTML，讓我們的頁面更好看；

JavaScript 則可以豐富頁面功能，使靜態(tài)頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網(wǎng)頁結構，基本上所有網(wǎng)頁都是這樣的 HTML 結構：

其中：

html元素是頁面的根元素，它描述完整的網(wǎng)頁；

head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網(wǎng)頁里的內(nèi)容；

body元素包含了我們訪問頁面時所有顯示在頁面上的內(nèi)容，是用戶最終能看到的內(nèi)容；

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結構不合理可能會導致頁面響應慢，這個過程很多時候體現(xiàn)在＜script＞和＜style＞元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹）。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。

由于 JavaScript 在執(zhí)行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執(zhí)行時，GUI 線程會被掛起。

以網(wǎng)易云課堂官網(wǎng)為例，我們來看看網(wǎng)頁加載流程。

（1）當我們打開官網(wǎng)的時候，瀏覽器會從服務器中獲取到 HTML 內(nèi)容。

（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。

（3）＜head＞元素內(nèi)容會先被解析，此時瀏覽器還沒開始渲染頁面。

我們看到＜head＞元素里有用于描述頁面元數(shù)據(jù)的＜meta＞元素，還有一些＜link＞元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到＜head＞元素中還包含著不少的＜script＞元素，這些＜script＞元素通過src屬性指向外部資源。

（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執(zhí)行完成后，控制權會交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁面。

（6）此時＜body＞元素內(nèi)容開始被解析，瀏覽器開始渲染頁面。

在這個過程中，我們看到＜head＞中放置的＜script＞元素會阻塞頁面的渲染過程：把 JavaScript 放在＜head＞里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網(wǎng)頁長時間失去響應，瀏覽器就會呈現(xiàn)“假死”狀態(tài)，用戶體驗會變得很糟糕。

因此，對于對性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁，常常會將 JavaScript 腳本放在＜body＞的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer／async／preload等屬性來標記＜script＞標簽，來控制 JavaScript 的加載順序。

百度首頁

可以看到，雖然百度首頁的＜head＞元素里也包括了一些＜script＞元素，但大多數(shù)都加上了async屬性。async屬性會讓這些腳本并行進行請求獲取資源，同時當資源獲取完成后盡快解析和執(zhí)行，這個過程是異步的，不會阻塞 HTML 的解析和渲染。

對于百度這樣的搜索引擎來說，必須要在最短的時間內(nèi)提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級會相對較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在＜head＞里，可用來避免瀏覽器渲染的重復計算。

二、HTML 與 DOM 有什么不同

我們知道＜p＞是 HTML 元素，但又常常將＜p＞這樣一個元素稱為 DOM 節(jié)點，那么 HTML 和 DOM 到底有什么不一樣呢？

根據(jù) MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網(wǎng)頁的結構并渲染，那么使用 DOM 則可以獲取網(wǎng)頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現(xiàn)頁面的動態(tài)變化，以及用戶的交互操作。

在開發(fā)過程中，常常用對象的方式來描述某一類事物，用特定的結構集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節(jié)點以及包含屬性和方法的相關對象組成的結構集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節(jié)點。比如下面這樣的 HTML 內(nèi)容：

打開控制臺 Elements 面板，可以看到這樣的 HTML 結構，如下圖所示：

在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對于樹狀結構來說，常常使用parent／child／sibling等方式來描述各個節(jié)點之間的關系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結構，因此組件也是呈樹狀結構，組件間的關系也同樣可以使用parent／child／sibling這樣的方式來描述。同時，現(xiàn)在大多數(shù)應用程序同樣以root為根節(jié)點展開，我們進行狀態(tài)管理、數(shù)據(jù)管理也常常會呈現(xiàn)出樹狀結構。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現(xiàn)將子元素的事件委托給父級元素來進行處理，這便是事件委托。

如果我們在每個元素上都進行監(jiān)聽的話，則需要綁定三個事件；（假設頁面上有a，b，c三個兄弟節(jié)點）

使用事件委托，可以通過將事件添加到它們的父節(jié)點，而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)：

這樣能解決什么問題呢？

綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。

將事件委托給父節(jié)點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進行事件綁定。

常見的使用方式主要是上述這種列表結構，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數(shù)量內(nèi)容較大的時候，對成千上萬節(jié)點進行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡單和基礎的一個做法。

注意：

如果我們直接在document．body上進行事件委托，可能會帶來額外的問題；

由于瀏覽器在進行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區(qū)域進行標記，被標記的區(qū)域會與主線程進行通信。

如果我們document．body上被綁定了事件，這時候整個頁面都會被標記；

即使我們的頁面不關心某些部分的用戶交互，合成器線程也必須與主線程進行通信，并在每次事件發(fā)生時進行等待。這種情況，我們可以使用passive： true選項來解決

五、總結

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關概念