打個小廣告：
如果你想獲取更多前端干貨、鵝廠工程師的前端面試指南，
歡迎關注我的個人微信公眾號：
前端夜談
可視化講解 DOM 構建過程
前言
最近在看 Secrets of the JavaScript Ninja, 書中第二章講到 DOM 的構建流程.
記得我之前也為理解 DOM 構建流程查閱過數(shù)次資料, 雖然每次查閱完都覺得 DOM 構建流程很簡單, 看完便懂, 但是懂了又忘還是讓人有些頭疼.
為了給自己加深印象, 也為了為大家提供一個可視化的理解 DOM 構建過程的方式, 筆者制作了一個簡單的網(wǎng)頁來動態(tài)演示 DOM 構建過程. 希望能給大家?guī)硪恍椭?
效果
在線查看
前進, 后退
網(wǎng)頁展示了一個簡單的 HTML 頁面的 DOM 渲染過程. 用戶點擊前進,后退按鈕時, 頁面左側會顯示出當前的 HTML 代碼, 右側則會顯示出實時的 DOM 結構圖:
自動播放
點擊 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 渲染做準備, 頁面構建是由下面兩部分購成的:
- 解析 HTML 節(jié)點, 并且構建 DOM 元素
- 執(zhí)行 JavaScript 代碼
其中第一步在瀏覽器解析到 HTML 節(jié)點時執(zhí)行, 第二步在解析到 script 標簽時執(zhí)行. 在頁面構建的過程中, 以上兩步可以無數(shù)次的交替執(zhí)行.
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 節(jié)點作為 DOM 的根節(jié)點:
<!DOCTYPE html>
<html>
接下來是 <head> 標簽, 將其放置在 html 節(jié)點下:
繼續(xù)解析, 遇到 <title> 標簽, 因為其是 <head> 的子標簽, 故將其放置在 head 節(jié)點下.
然后是 <style> 標簽, 類似的, 放在 head 節(jié)點下:
<style>
#list { color: green;}
#second { color: red;}
</style>
接下來解析到 <body> 標簽, 因其為 <html> 的子標簽, 故將其放置在 html 節(jié)點下:
然后是 <h1> 標簽, 放置在 body 節(jié)點下:
繼續(xù), <ul> 標簽, 同樣的, 放置在 body 節(jié)點下:
接下來, 瀏覽器遇到了 <script> 標簽, 根據(jù)前面的知識我們知道, 瀏覽器會停下來并執(zhí)行<script> 中的代碼. 所以下面這段代碼會被立即執(zhí)行:
<script>
var liElement = document.createElement("li");
liElement.textContent = 'I am a li';
document.getElementById('list').appendChild(liElement);
</script>
這段代碼的邏輯是: 向 id 為 list 的 DOM 節(jié)點添加一個 li 作為子元素, 故執(zhí)行完成后 DOM 樹會是這樣:
最后, 瀏覽器會解析到 <body/></html> 等標簽, 結束解析過程. 最終我們得到的 DOM 結構如圖:
后記
預計我會將 Secrets of the JavaScript Ninja 后續(xù)章節(jié)中的一些知識點也通過類似的方式進行可視化.
如果你也有希望能做成可視化講解的: 知識點, 算法, 技術原理, 歡迎在下面留言與我交流, 期待大家的反饋 :)
演示頁面用到的技術為: Vue, D3.js, 歡迎 fork & star
Github 地址
想繼續(xù)了解 D3.js
這里是我的 D3.js 、 數(shù)據(jù)可視化 相關博客的 github 地址, 歡迎 fork & star :tada:
