在上篇文章中，我們介紹了渲染流水線中的 DOM 生成、樣式計(jì)算和布局三個(gè)階段，那今天我們接著講解渲染流水線后面的階段。
這里還是先簡(jiǎn)單回顧下上節(jié)前三個(gè)階段的主要內(nèi)容：在 HTML 頁(yè)面內(nèi)容被提交給渲染引擎之后，渲染引擎首先將 HTML 解析為瀏覽器可以理解的 DOM；然后根據(jù) CSS 樣式表，計(jì)算出 DOM 樹所有節(jié)點(diǎn)的樣式；接著又計(jì)算每個(gè)元素的幾何坐標(biāo)位置，并將這些信息保存在布局樹中。
分層
現(xiàn)在我們有了布局樹，而且每個(gè)元素的具體位置信息都計(jì)算出來(lái)了，那么接下來(lái)是不是就要開始著手繪制頁(yè)面了？
答案依然是否定的。
因?yàn)轫?yè)面中有很多復(fù)雜的效果，如一些復(fù)雜的 3D 變換、頁(yè)面滾動(dòng)，或者使用 z-indexing 做 z 軸排序等，為了更加方便地實(shí)現(xiàn)這些效果，渲染引擎還需要為特定的節(jié)點(diǎn)生成專用的圖層，并生成一棵對(duì)應(yīng)的圖層樹（LayerTree）。如果你熟悉 PS，相信你會(huì)很容易理解圖層的概念，正是這些圖層疊加在一起構(gòu)成了最終的頁(yè)面圖像。
要想直觀地理解什么是圖層，你可以打開 Chrome 的“開發(fā)者工具”，選擇“Layers”標(biāo)簽，就可以可視化頁(yè)面的分層情況，如下圖所示：
從上圖可以看出，渲染引擎給頁(yè)面分了很多圖層，這些圖層按照一定順序疊加在一起，就形成了最終的頁(yè)面，你可以參考下圖：
現(xiàn)在你知道了瀏覽器的頁(yè)面實(shí)際上被分成了很多圖層，這些圖層疊加后合成了最終的頁(yè)面。下面我們?cè)賮?lái)看看這些圖層和布局樹節(jié)點(diǎn)之間的關(guān)系，如文中圖所示：
通常情況下，并不是布局樹的每個(gè)節(jié)點(diǎn)都包含一個(gè)圖層，如果一個(gè)節(jié)點(diǎn)沒(méi)有對(duì)應(yīng)的層，那么這個(gè)節(jié)點(diǎn)就從屬于父節(jié)點(diǎn)的圖層。如上圖中的 span 標(biāo)簽沒(méi)有專屬圖層，那么它們就從屬于它們的父節(jié)點(diǎn)圖層。但不管怎樣，最終每一個(gè)節(jié)點(diǎn)都會(huì)直接或者間接地從屬于一個(gè)層。
那么需要滿足什么條件，渲染引擎才會(huì)為特定的節(jié)點(diǎn)創(chuàng)建新的圖層呢？通常滿足下面兩點(diǎn)中任意一點(diǎn)的元素就可以被提升為單獨(dú)的一個(gè)圖層。
第一點(diǎn)，擁有層疊上下文屬性的元素會(huì)被提升為單獨(dú)的一層。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-553052.html
頁(yè)面是個(gè)二維平面，但是層疊上下文能夠讓 HTML 元素具有三維概念，這些 HTML 元素按照自身屬性的優(yōu)先級(jí)分布在垂直于這個(gè)二維平面的 z 軸上。你可以結(jié)合下圖來(lái)直觀感受下：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-553052.html
到了這里，關(guān)于渲染流程（下）：HTML、CSS和JavaScript，是如何變成頁(yè)面的？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁(yè)面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端開發(fā)技術(shù)10（HTML5、CSS3、JavaScript ）CSS+DIV頁(yè)面布局，固定定位，相對(duì)定位relative，絕對(duì)定位absolute，層定位的應(yīng)用——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
