渲染樹的形成原理你真的很懂嗎？
瀏覽器系列文章
說一下為什么寫這個系列？
原因一：該文章系列不管你是前端開發(fā)者，還是后端開發(fā)者在面試中經常會被問到一個問題?
“從瀏覽器輸入url到頁面顯示經歷了哪些？”?一個?非常常見的問題，看了該系列絕對能驚到面試官，可能就因為這一道面試題就收了你呢！嘿嘿。原因二：自己主要是后端方向，該系列文章也是為了學習記錄，方便以后查閱。極客時間李兵老師也開了這個專欄，看后還有幾個疑問的點，自己查詢資料學習整理一遍。
什么是DOM
DOM是Document Object Model（文檔對象模型）的縮寫
W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內容、結構和樣式。-這是W3Cschool給的概念
看了上面的概念好像太“官方”，解釋就是 DOM 是對 HTML 文檔結構化的表述，后端服務器返回給瀏覽器渲染引擎的 HTML 文件字節(jié)流是無法直接被瀏覽器渲染引擎理解的，要轉化為渲染器引擎可以理解的內部結構，這個結構就是 DOM。W3C 那個概念我好像還沒有把它全部翻譯完，“允許程序和腳本動態(tài)地訪問和更新文檔的內容、結構和樣式”。這里其實就是DOM的作用了
頁面展示: DOM 是生成頁面的基礎數(shù)據結構
JavaScript 腳本操作: DOM 提供給 JavaScript 腳本操作的接口，JavaScript 可以通過這些接口對 DOM 結構進行訪問，從而改變文檔的結構和樣式
安全: DOM 是一道安全防線，DOM 解析階段會過濾掉一些不安全的 DOM 內容。
本文我主要以 Webkit 渲染引擎來講解，Safari 和 Chrome 都使用 Webkit。Webkit 是一款開源渲染引擎，它本來是為 linux 平臺研發(fā)的，后來由 Apple 移植到 Mac 及 Windows 上。
渲染樹最終形成經歷了哪些
先看一張整體的流程圖
下面圍繞這張圖和不同代表性對例子進行講解。
HTML解析器
從后端返回給瀏覽器渲染引擎 HTML 文件字節(jié)流， 第一步要經過的就是渲染引擎中的 HTML 解析器。它實現(xiàn)了將 HTML 字節(jié)流轉換為 DOM樹 結構。HTML 文件字節(jié)流返回的過程中 HTML 解析器就一直在解析，邊加載邊解析哦(這里注意下，有些文章寫的有問題)。
例子1:最簡單的不帶 CSS 和 JavaScript 的 HTML 代碼講解 HTML 解析器
根據這段代碼具體分析 HTML 解析器做了哪些事
階段一 字節(jié)流轉換為字符并W3C標準令牌化
讀取 HTML 的原始字節(jié)流，并根據文件的指定編碼（例如 UTF-8）將它們轉換成各個字符。并將字符串轉換成 W3C HTML5 標準規(guī)定的各種令牌，例如，“”、“”，以及其他尖括號內的字符串。每個令牌都具有特殊含義和一組規(guī)則。
一堆字節(jié)流 bytes
3C 62 6F ...
轉成正常的html文件
koala
程序員成長指北
階段二 通過分詞器將字節(jié)流轉化為 Token
分詞器將字節(jié)流轉換為一個一個的 Token，Token 分為 Tag Token和文本 Token，上面這段代碼最后分詞器轉化后的結果是:
階段三和階段四 將 Token 解析為 DOM 節(jié)點，并將 DOM 節(jié)點添加到 DOM 樹中
HTML 解析器維護了一個 Token 棧結構（數(shù)據結構真是個好東西），這個棧結構的目的就是用來計算節(jié)點間的父子關系，在上一個階段生成的 Token 會被順序壓到這個棧中，以下是具體規(guī)則：
HTML 解析器開始工作時，會默認創(chuàng)建了一個根為 document 的空 DOM 結構，同時會將一個 StartTag document 的 Token 壓入棧底。
如果壓入到棧中的 StartTagToken，HTML 解析器會為該 Token 創(chuàng)建一個 DOM節(jié)點，然后將這個 Dom節(jié)點加入到 DOM樹中，它的?
父節(jié)點就是棧中相鄰的那個元素生成的 DOM節(jié)點
如果分詞器解析出來的是文本 Token，那么會生成一個文本節(jié)點，然后把這個文本 Dom 節(jié)點加入到 DOM 樹中（注:文本Token不需入棧）,它的?
父節(jié)點就是當前棧頂 Token 所對應的 DOM 節(jié)點。
如果分詞器解析出來的是 EndTag 標簽，比如例子中的 EndTag div，HTML 解析器會查看 Token棧頂?shù)脑厥欠袷?StartTag div，如果是，就將 StartTag div從棧中彈出，邊上該 div 元素解析完成。
最后按照上面的規(guī)則，分詞器一路解析下來，就形成了這個簡單的 DOM 樹。
此時應該搞懂了核心圖中 HTML 解析器的部分，和 DOM 樹的基本繪制流程，但是現(xiàn)實很殘酷，哪里有這么簡單的前端代碼，還有有 JavaScript 和 CSS 呢！繼續(xù)往下看
CSS解析器
CSS 解析器最終的目的也是構建樹不過它構建的樹是 CSSOM 樹 樹的構建流程和 DOM 樹的構建流程基本相同
還是那張圖，具體我就不一一講解一遍了。直接用這個簡單例子
body { font-size: 16px }
div { font-weight: bold }
div p { display: none }
看下最后構造的 CSSOM 樹
CSSOM 為何具有樹結構？為頁面上的任何對象計算最后一組樣式時，瀏覽器都會先從適用于該節(jié)點的最通用規(guī)則開始（例如，如果該節(jié)點是 body 元素的子項，則應用所有 body 樣式），然后通過應用更具體的規(guī)則（即規(guī)則“向下級聯(lián)”）以遞歸方式優(yōu)化計算的樣式。
以上面的 CSSOM 樹為例進行更具體的闡述。span 標記內包含的任何置于 body 元素內的文本都將具有 16 像素字號，并且顏色為紅色 — font-size 指令從 body 向下級聯(lián)至 span。不過，如果某個 span 標記是某個段落 (p) 標記的子項，則其內容將不會顯示。
注意點:
CSS解析可以與DOM解析同進行
如果只有 CSS 和 HTML 的頁面，CSS 不會影響 DOM 樹的創(chuàng)建，但是如果頁面中還有 JavaScript，結論就不一樣了，請繼續(xù)往下看。
javascript對DOM樹與CSSOM樹創(chuàng)建的影響
上面兩個例子中都還沒有javascript的出現(xiàn)，接下來說下JavaScript 對 DOM 樹和 CSSOM 樹構建的影響。
情況1：當前頁面中只有 Html 和 JavaScript，而且 JavaScript 非外部引入
? ? ? ? ?DOM 樹構建時當遇到JavaScript腳本，就要暫停 DOM 解析，先去執(zhí)行? ? ? ? ? ? ? ? ?Javascript，因為在JavaScript可能會操作當前已經生成的DOM節(jié)點。
? ? ? ? ?有一點需要注意:javascript是可能操作當前已經生成的DOM節(jié)點，如果是后? ? ? ? ? ?面還未生成的DOM節(jié)點是不生效的，比如這段代碼:
<html><body><div>1div><script>let div1 = document.getElementsByTagName('div')[0]div1.innerText = '程序員成長指北'let div2 = document.getElementsByTagName('div')[1]div2.innerText = 'kaola'script><div>testdiv>body>html>
? ? ? 顯示結果為兩行：
? ? ? 第一行結果是程序員成長指北 ? ? ? 第二行記過是test ? ? ? 因為在執(zhí)行第三行和第四行 script 腳本的時候，DOM樹中還沒有生成第二個? ? ? ? ? div對應的dom節(jié)點。
情況2：當頁面中同時有Html JavaScript CSS ，而且都非外部引入
DOM 樹構建時當遇到 JavaScript 腳本，就要暫停 DOM 解析，先去執(zhí)行 JavaScript，同時 JavaScript 還要判斷 CSSOM 是否解析完成，因為在 JavaScript 可能會操作 CSSOM 節(jié)點，CSSOM 節(jié)點確認解析完成，執(zhí)行 JavaScript 再次回到 DOM 樹創(chuàng)建。（所以這里也可以理解為CSS解析間接影響DOM樹創(chuàng)建）
情況3：當頁面中同時有Html，JavaScript， CSS ，而且外部引入
Webkit渲染引擎有一個優(yōu)化，當渲染進程接收HTML文件字節(jié)流時，會先開啟一個預解析線程，如果遇到 JavaScript 文件或者 CSS 文件，那么預解析線程會提前下載這些數(shù)據。當渲染進程接收 HTML 文件字節(jié)流時，會先開啟一個預解析線程，如果遇到 JavaScript 文件或者 CSS 文件，那么預解析線程會提前下載這些數(shù)據。DOM樹在創(chuàng)建過程中如果遇到JavaScript文件，接下來就和情況2類型一樣了。
影響關系圖: 畫了一張影響關系圖希望大家更好的記憶:
構建渲染樹
通過 DOM 樹和 CSSOM 樹，瀏覽器就可以通過二者構建渲染樹了。瀏覽器會先從 DOM 樹的根節(jié)點開始遍歷每個可見節(jié)點，然后對每個可見節(jié)點找到適配的CSS樣式規(guī)則并應用。具體的規(guī)則有以下幾點需要注意：
Render Tree和DOM Tree不完全對應。
請注意 visibility: hidden 與 display: none 是不一樣的。前者隱藏元素，但元素仍占據著布局空間（即將其渲染成一個空框），而后者 (display: none) 將元素從渲染樹中完全移除，元素既不可見，也不是布局的組成部分
看一下前文中提到的 DOM 樹和 CSSOM 樹最終合成的渲染樹結果是:
本文渲染樹形成過程可以做哪些優(yōu)化
看完了渲染樹的形成，在開發(fā)過程中我們能做哪些優(yōu)化？(注意這里的優(yōu)化只是針對渲染樹形成部分，其他的優(yōu)化會在系列文章之后繼續(xù)講)
在引入順序上，CSS 資源先于 JavaScript 資源。樣式文件應當在 head 標簽中，而腳本文件在 body 結束前，這樣可以防止阻塞的方式。
盡量減少在 JavaScript 中進行DOM操作。
簡化并優(yōu)化CSS選擇器，盡量將嵌套層減少到最小。
總結
看完這篇文章趕緊檢測一下你寫的前端代碼，腦補一下渲染樹形成過程，想想自己代碼有沒有需要改善的地方，系列文章會繼續(xù)分享，下篇該系列文章渲染樹的布局與繪制以及虛擬DOM樹出現(xiàn)的必要性，感謝觀看。
參考文章
極客時間瀏覽器專欄 瀏覽器渲染原理 https://srtian96.gitee.io/blog/2018/06/01/瀏覽器渲染原理/
說Node.js做后端開發(fā)，stream有必要了解下
—————END—————
喜歡本文的朋友，歡迎關注公眾號?達達前端，收看更多精彩內容
點個[在看]，是對達達最大的支持！
