我們可能都知道瀏覽器含有一個(gè)渲染引擎，用來(lái)渲染窗口所展示的內(nèi)容。默認(rèn)情況下，渲染引擎可以顯示html、xml文檔及圖片，它也可以借助插件(一種瀏覽器擴(kuò)展)顯示其他類(lèi)型數(shù)據(jù)，例如使用PDF閱讀器插件，用于顯示PDF格式。但是其具體的渲染原理和流程估計(jì)也有很多人都不知道或者不清楚吧。這些天研究了一下瀏覽器的渲染原理，有了些心得，在這里跟大家分享一下，這里只討論渲染引擎最主要的用途——顯示應(yīng)用了CSS之后的html及圖片。

1.解析HTML，構(gòu)建DOM樹(shù)(這里遇到外鏈，此時(shí)會(huì)發(fā)起請(qǐng)求)

2.解析CSS，生成CSS規(guī)則樹(shù)

3.合并DOM樹(shù)和CSS規(guī)則，生成render樹(shù)

4.布局render樹(shù)(Layout/reflow)，負(fù)責(zé)各元素尺寸、位置的計(jì)算

5.繪制render樹(shù)(paint)，繪制頁(yè)面像素信息

6.瀏覽器會(huì)將各層的信息發(fā)送給GPU，GPU將各層合成(composite)，顯示在屏幕上。這一點(diǎn)在網(wǎng)站開(kāi)發(fā)中十分重要。

1.構(gòu)建DOM樹(shù)

?無(wú)論是DOM還是CSSOM，都是要經(jīng)過(guò) bytes→characters→tokens→nodes→objectmodel這個(gè)過(guò)程。

DOM樹(shù)構(gòu)建過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

2.構(gòu)建CSSOM樹(shù)

上述也提到了CSSOM的構(gòu)建過(guò)程，也是樹(shù)的結(jié)構(gòu)，在最終計(jì)算各個(gè)節(jié)點(diǎn)的樣式時(shí)，瀏覽器都會(huì)先從該節(jié)點(diǎn)的普遍屬性(比如body里設(shè)置的全局樣式)開(kāi)始，再去應(yīng)用該節(jié)點(diǎn)的具體屬性。還有要注意的是，每個(gè)瀏覽器都有自己默認(rèn)的樣式表，因此很多時(shí)候這棵CSSOM樹(shù)只是對(duì)這張默認(rèn)樣式表的部分替換。

3.生成render樹(shù)

DOM樹(shù)和CSSOM樹(shù)合并生成render樹(shù)

簡(jiǎn)單描述這個(gè)過(guò)程：

DOM樹(shù)從根節(jié)點(diǎn)開(kāi)始遍歷可見(jiàn)節(jié)點(diǎn)，這里之所以強(qiáng)調(diào)了“可見(jiàn)”，是因?yàn)槿绻龅皆O(shè)置了類(lèi)似 display:none;的不可見(jiàn)節(jié)點(diǎn)，在render過(guò)程中是會(huì)被跳過(guò)的(但 visibility:hidden;opacity:0這種仍舊占據(jù)空間的節(jié)點(diǎn)不會(huì)被跳過(guò)render)，保存各個(gè)節(jié)點(diǎn)的樣式信息及其余節(jié)點(diǎn)的從屬關(guān)系。

4.Layout 布局

有了各個(gè)節(jié)點(diǎn)的樣式信息和屬性，但不知道各個(gè)節(jié)點(diǎn)的確切位置和大小，所以要通過(guò)布局將樣式信息和屬性轉(zhuǎn)換為實(shí)際可視窗口的相對(duì)大小和位置。

5.Paint 繪制

對(duì)于網(wǎng)站建設(shè)而言，Paint 繪制可以說(shuō)是會(huì)給人一種萬(wàn)事俱備的感覺(jué)，最后只要將確定好位置大小的各節(jié)點(diǎn)，通過(guò)GPU渲染到屏幕的實(shí)際像素。

希望以上內(nèi)容對(duì)您有所幫，如果大家對(duì)這些內(nèi)容還有想要了解的可以隨時(shí)咨詢(xún)我們，也可以關(guān)注創(chuàng)新互聯(lián)的官方公眾號(hào)，里邊會(huì)有更多的相關(guān)內(nèi)容解決您的問(wèn)題。

當(dāng)前標(biāo)題：網(wǎng)站開(kāi)發(fā)關(guān)于瀏覽器渲染過(guò)程講解
本文網(wǎng)址：http://chinadenli.net/news1/315151.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、建站公司、網(wǎng)站設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)