可視化講解 DOM 構建過程

時間 2019-12-21

標籤可視化講解 dom 構建過程欄目 HTML 简体版

原文原文鏈接

前言

最近在看 Secrets of the JavaScript Ninja, 書中第二章講到 DOM 的構建流程.html

記得我以前也爲理解 DOM 構建流程查閱過數次資料, 雖然每次查閱完都以爲 DOM 構建流程很簡單, 看完便懂, 可是懂了又忘仍是讓人有些頭疼.node

爲了給本身加深印象, 也爲了爲你們提供一個可視化的理解 DOM 構建過程的方式, 筆者製做了一個簡單的網頁來動態演示 DOM 構建過程. 但願能給你們帶來一些幫助.git

效果

在線查看

在線 demo (請使用 pc 訪問)github

前進, 後退

網頁展現了一個簡單的 HTML 頁面的 DOM 渲染過程. 用戶點擊前進,後退按鈕時, 頁面左側會顯示出當前的 HTML 代碼, 右側則會顯示出實時的 DOM 結構圖:web

自動播放

點擊 Auto Play 按鈕, 頁面會自動播放頁面的整個構建過程:算法

DOM 構建過程

DOM 元素的做用 & 基本構建過程:

這裏直接引用一下原文:瀏覽器

The goal of this page-building phase is to set up the UI of a web application, and this is done in two distinct steps: 1 Parsing the HTML and building the Document Object Model (DOM) 2 Executing JavaScript code Step 1 is performed when the browser is processing HTML nodes, and step 2 is > performed whenever a special type of HTML element—the script element (that > contains or refers to JavaScript code)—is encountered. During the page-building phase, the browser can switch between these two steps as many times as necessary.微信

瀏覽器 頁面構建 步驟的目的是爲 UI 渲染作準備, 頁面構建是由下面兩部分購成的:app

解析 HTML 節點, 而且構建 DOM 元素
執行 JavaScript 代碼

其中第一步在瀏覽器解析到 HTML 節點時執行, 第二步在解析到 script 標籤時執行. 在頁面構建的過程當中, 以上兩步能夠無數次的交替執行.dom

It’s important to emphasize that, although the HTML and the DOM are closely linked, with the DOM being constructed from HTML, they aren’t one and the same. You should think of the HTML code as a blueprint the browser follows when > constructing the initial DOM—the UI—of the page. The browser can even fix > problems that it finds with this blueprint in order to create a valid DOM.

須要注意的是, 雖然 HTML 和 DOM 二者關係緊密(DOM 是由 HTML 文件構建而來), 但他們並非相同的. 你應該將 HTML 看做是瀏覽器用來渲染 DOM 元素(頁面 UI) 的藍圖. 瀏覽器甚至能夠能夠修復這個藍圖(HTML)中的問題, 並構建出有效的 DOM.

下面用可視化講解中的步驟依次講解:

首先看看咱們想要渲染的 HTML 代碼:

<!DOCTYPE html>
<html>
    <head>
      <title>Web app lifecycle</title>
      <style>
          #list { color: green;}
          #second { color: red;}
      </style>
    </head>
    <body>
        <h1>head one</h1>
        <ul id="list"></ul>
        <script>
            var liElement = document.createElement("li");
            liElement.textContent = 'I am a li';
            document.getElementById('list').appendChild(liElement);
        </script>
    </body>
</html>

接下來按照瀏覽器的構建順序來看:

首先瀏覽器遇到下面這段代碼, 解析出 html 節點做爲 DOM 的根節點:

<!DOCTYPE html>
<html>

接下來是 <head> 標籤, 將其放置在 html 節點下:

繼續解析, 遇到 <title> 標籤, 由於其是 <head> 的子標籤, 故將其放置在 head 節點下.

而後是 <style> 標籤, 相似的, 放在 head 節點下:

<style>
    #list { color: green;}
    #second { color: red;}
</style>

接下來解析到 <body> 標籤, 因其爲 <html> 的子標籤, 故將其放置在 html 節點下:

而後是 <h1> 標籤, 放置在 body 節點下:

繼續, <ul> 標籤, 一樣的, 放置在 body 節點下:

接下來, 瀏覽器遇到了 <script> 標籤, 根據前面的知識咱們知道, 瀏覽器會停下來並執行<script> 中的代碼. 因此下面這段代碼會被當即執行:

<script>
    var liElement = document.createElement("li");
    liElement.textContent = 'I am a li';
    document.getElementById('list').appendChild(liElement);
</script>

這段代碼的邏輯是: 向 id 爲 list 的 DOM 節點添加一個 li 做爲子元素, 故執行完成後 DOM 樹會是這樣:

最後, 瀏覽器會解析到 <body/></html> 等標籤, 結束解析過程. 最終咱們獲得的 DOM 結構如圖: