浏览器渲染机制面试_【前端面试必考题】页面渲染机制（一）
頁(yè)面渲染機(jī)制這部分內(nèi)容會(huì)分成兩篇來(lái)進(jìn)行講解，這兩篇里我們準(zhǔn)備聊一下頁(yè)面的渲染的過(guò)程，包括頁(yè)面的加載、DOM 樹(shù)的構(gòu)建、CSSOM 樹(shù)的構(gòu)建、渲染樹(shù)的構(gòu)建和最后的渲染過(guò)程等。瀏覽器的渲染機(jī)制和網(wǎng)頁(yè)的優(yōu)化息息相關(guān)，只有知道了頁(yè)面是怎么渲染出來(lái)的，才能在寫(xiě)代碼的時(shí)候使用最合理的方式，比如知道了 CSS 文件的解析過(guò)程后就知道為什么要把 CSS 文件放在 HTML 的前邊，知道為什么要少用@import 了。這一部分的內(nèi)容，我們會(huì)先介紹渲染的整體過(guò)程，然后再把這個(gè)過(guò)程中比較重要的部分做詳細(xì)介紹。
頁(yè)面的加載和渲染全過(guò)程
當(dāng)我們?cè)跒g覽器里輸入一個(gè) URL 后，最終會(huì)呈現(xiàn)一個(gè)完整的網(wǎng)頁(yè)。這中間會(huì)經(jīng)歷如下的過(guò)程:
HTML 的加載
輸入 URL 后，最先拿到的是 HTML 文件。HTML是一個(gè)網(wǎng)頁(yè)的基礎(chǔ)，所以要在最開(kāi)始的時(shí)候下載它。HTML下載完成以后就會(huì)開(kāi)始對(duì)它進(jìn)行解析。
其他靜態(tài)資源下載
HTML 在解析的過(guò)程中，如果發(fā)現(xiàn) HTML 文本里面夾雜的一些外部的資源鏈接，比如 CSS、JS 和圖片等時(shí)，會(huì)立即啟用別的線程下載這些靜態(tài)資源。這里有個(gè)特殊的是 JS 文件，當(dāng)遇到 JS 文件的時(shí)候，HTML 的解析會(huì)停下來(lái)，等 JS 文件下載結(jié)束并且執(zhí)行完，HTML 的解析工作再接著來(lái)。這樣做是因?yàn)?JS 里可能會(huì)出現(xiàn)修改已經(jīng)完成的解析結(jié)果，有白白浪費(fèi)資源的風(fēng)險(xiǎn)，所以 HTML 解析器干脆等 JS 折騰完了再干。
DOM 樹(shù)構(gòu)建
在 HTML 解析的同時(shí)，解析器會(huì)把解析完的HTML轉(zhuǎn)化成DOM 對(duì)象，再進(jìn)一步構(gòu)建 DOM 樹(shù)。
CSSOM 樹(shù)構(gòu)建
當(dāng) CSS 下載完，CSS 解析器就開(kāi)始對(duì) CSS 進(jìn)行解析，把 CSS 解析成 CSS 對(duì)象，然后把這些 CSS 對(duì)象組裝起來(lái)，構(gòu)建出一棵 CSSOM 樹(shù)。
渲染樹(shù)構(gòu)建
DOM 樹(shù)和 CSSOM 樹(shù)都構(gòu)建完成以后，瀏覽器會(huì)根據(jù)這兩棵樹(shù)構(gòu)建出一棵渲染樹(shù)。
布局計(jì)算
渲染樹(shù)構(gòu)建完成以后，所有元素的位置關(guān)系和需要應(yīng)用的樣式就確定了。這時(shí)候?yàn)g覽器會(huì)計(jì)算出所有元素的大小和絕對(duì)位置。
渲染布局計(jì)算完成以后，瀏覽器就可以在頁(yè)面上渲染元素了。比如從 (x1, y1) 到(x2, y2)的正方形區(qū)域渲染成藍(lán)色。經(jīng)過(guò)渲染引擎的處理后，整個(gè)頁(yè)面就顯示在了屏幕上。
上面講了一下瀏覽器從加載到渲染的大概過(guò)程，這部分內(nèi)容是想讓同學(xué)們對(duì)加載有個(gè)大概的印象，接下來(lái)我們把這個(gè)過(guò)程中比較重要的部分再詳細(xì)講解下。
DOM 樹(shù)的構(gòu)建
頁(yè)面中的每一個(gè) HTML 標(biāo)簽，都會(huì)被瀏覽器解析成一個(gè)對(duì)象，我們稱它為文檔對(duì)象(Document Object)。HTML 的本質(zhì)是一個(gè)嵌套結(jié)構(gòu)，在解析的時(shí)候會(huì)把每個(gè)文檔對(duì)象用一個(gè)樹(shù)形結(jié)構(gòu)組織起來(lái)，所有的文檔對(duì)象都會(huì)掛在一個(gè)叫做 Document 的東西上，這種組織方式就是 HTML 最基礎(chǔ)的結(jié)構(gòu)–文檔對(duì)象模型(DOM)，這棵樹(shù)里面的每個(gè)文檔對(duì)象就叫做 DOM 節(jié)點(diǎn)。
在 HTML 加載的過(guò)程中，DOM 樹(shù)就在開(kāi)始構(gòu)建了。構(gòu)建的過(guò)程是先把 HTML 里每個(gè)標(biāo)簽都解析成 DOM 節(jié)點(diǎn)(每個(gè)標(biāo)簽的屬性、值和上下文關(guān)系等都在這個(gè)文檔對(duì)象里)，然后使用深度遍歷的方法把這些對(duì)象構(gòu)造成一棵樹(shù)。
我們以下面的 HTML 文件為例：
Document文章詳情頁(yè)
文章標(biāo)題
吃葡萄不吐葡萄皮
不吃葡萄倒吐葡萄皮
在構(gòu)建 DOM 樹(shù)的時(shí)候，就是從最外層 HTML 節(jié)點(diǎn)開(kāi)始，按深度優(yōu)先的方式構(gòu)建。之所以用深度優(yōu)先，是因?yàn)?HTML在加載的時(shí)候是自上而下的，最先加載的是根節(jié)點(diǎn)，然后是根節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
，再然后是head的第一個(gè)子節(jié)點(diǎn)…h(huán)ead構(gòu)建完成后再去構(gòu)建 body 部分的內(nèi)容，以此類推。使用深度優(yōu)先的方式構(gòu)建這棵樹(shù)就和文檔的加載順序吻合了。最后，上面這個(gè) html 結(jié)構(gòu)就會(huì)生成一棵 DOM 樹(shù)。CSSOM 樹(shù)的構(gòu)建
在瀏覽器構(gòu)建 DOM 樹(shù)的同時(shí)，如果樣式也加載完成了，那么 CSSOM 樹(shù)也在同步地構(gòu)建。CSS 樹(shù)和 DOM 類似，它的樹(shù)形結(jié)構(gòu)記錄著所有樣式的信息。
我們以給上面的 HTML 加上如下的樣式：
body{
font-size: 16px;
}
// 去掉所有p元素的內(nèi)外邊距
p{
margin: 0;
padding: 0;
}
// 頁(yè)面頭部行高50px，文本垂直居中，隱藏
.header{
height: 50px;
line-height: 50px;
display: none;
text-align: center;
}
.header .page-name{
font-size: 20px;
}
// 文本區(qū)域左右兩邊留10px空白
.content{
padding: 0 10px;
}
.contetn .title{
font-seize: 20px;
}
// 內(nèi)容區(qū)行高30px
.content .graph{
line-height: 30px;
}
// 文章中的圖片用作塊級(jí)元素，水平居中
.content img{
display: block;
margin: 0 auto;
}
我們就以這一組樣式為例，這樣一組樣式中有公用的樣式 p 和 body，有標(biāo)題欄 .header 部分的樣式，還有內(nèi)容區(qū) .content 部分的樣式。
總結(jié)
這一篇講了渲染的大致過(guò)程、DOM 樹(shù)的構(gòu)建和 CSSOM 樹(shù)的構(gòu)建。到這個(gè)階段，渲染需要的基礎(chǔ)工作就準(zhǔn)備完成了。下一篇我們繼續(xù)講解，感興趣的同學(xué)可以關(guān)注我的下一篇文章。
總結(jié)
以上是生活随笔為你收集整理的浏览器渲染机制面试_【前端面试必考题】页面渲染机制（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vue表格刷新数据_Vue.js+Lay
- 下一篇： sparkshelljarlib_Spa