瀏覽器渲染原理及流程

陸斌發(fā)布于2019-08-29 18:47 / 1105人閱讀

摘要：幾乎是無(wú)法避免的例如樹(shù)狀目錄的折疊，展開(kāi)，實(shí)質(zhì)上是元素的顯示與隱藏等，都將引起瀏覽器的，鼠標(biāo)劃過(guò)，點(diǎn)擊，只要這些行為引起了頁(yè)面上的某些元素的占位面積，定位方式，邊距等屬性的變化，都會(huì)引起它的內(nèi)部，周圍甚至整個(gè)頁(yè)面的重新渲染。

渲染引擎簡(jiǎn)介

目前常用的瀏覽器：
Firefox . chrome . safari 是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko,是Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit.

渲染主流程

概念解釋
DOM Tree:瀏覽器將HTML解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu).
CSS Rule Tree:瀏覽器將CSS解析在樹(shù)形的數(shù)據(jù)結(jié)構(gòu).
Render Tree:DOM和CSSOM(CSS Object Model:CSS對(duì)象模型)合并后生成Render Tree.
layout:有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的CSS的定義以及他們的從屬關(guān)系，從而去計(jì)算出每個(gè)節(jié)點(diǎn)的屏幕中的位置.
painting:按照算出來(lái)的規(guī)則，通過(guò)顯卡，把內(nèi)容畫到屏幕上.
reflow(回流):當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，稱此為回退的過(guò)程，叫reflow.reflow會(huì)從這個(gè)root frame開(kāi)始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置。feflow幾乎是無(wú)法避免的.
例如：樹(shù)狀目錄的折疊，展開(kāi)，實(shí)質(zhì)上是元素的顯示與隱藏等，都將引起瀏覽器的reflow，
鼠標(biāo)劃過(guò)，點(diǎn)擊，只要這些行為引起了頁(yè)面上的某些元素的占位面積，定位方式，邊距等屬性的變化，都會(huì)引起它的內(nèi)部，周圍甚至整個(gè)頁(yè)面的重新渲染。
repaint(重繪):改變某個(gè)元素的背景色，文字顏色，邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫，但是元素的幾何尺寸沒(méi)有變.

注意點(diǎn)：
1.display:none的節(jié)點(diǎn)不會(huì)被加入Render Tree,而visibility:hidden則會(huì)，所以如果某個(gè)節(jié)點(diǎn)最開(kāi)始是不顯示的，設(shè)為display:none是最好的
2.display:none會(huì)觸發(fā)reflow，而visibility:hidden只會(huì)觸發(fā)repaint,因?yàn)槲恢脹](méi)有發(fā)生變化.
3.有些情況下，比如修改了元素的樣式，瀏覽器不會(huì)立刻reflow和repaint一次，而是會(huì)把這樣的操作積攢一批，然后做一次reflow，這又叫異步reflow或增量異步reflow,但是有些情況，如resize窗口，改變了頁(yè)面默認(rèn)的字體等，對(duì)于這些操作，瀏覽器會(huì)馬上進(jìn)行reflow

主流程
渲染引擎首先通過(guò)網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容，通常以8K分塊的方式完成。基本流程為：
解析HTML以構(gòu)建DOM樹(shù) -> 解析CSS構(gòu)建CSSOM -> 將DOM樹(shù)與CSSOM樹(shù)合并，構(gòu)建Render樹(shù) -> 布局render樹(shù) -> 繪制render樹(shù)

來(lái)看看webkit的流程：

接下來(lái)是Gecko的流程：
Gecko里把格式化好的可視元素稱做“楨樹(shù)”（Frame tree），每一個(gè)元素就是一個(gè)楨，webkit使用的是渲染樹(shù)的術(shù)語(yǔ)，渲染樹(shù)由渲染對(duì)象組成，webkit里使用layout表示元素的布局，Gecko則稱為reflow。webkit使用attachment來(lái)鏈接DOM節(jié)點(diǎn)與可視化信息以構(gòu)建渲染樹(shù)。一個(gè)非語(yǔ)義上的小差別就是Gecko在HTML與DOM樹(shù)之間有一個(gè)附加的層，稱作"content sink",是創(chuàng)建DOM對(duì)象的工廠.

雖然Webkit與Gecko使用的術(shù)語(yǔ)略微不同，但是這個(gè)過(guò)程是基本相同的，如下：
1.瀏覽器會(huì)將HTML解析成一個(gè)DOM樹(shù)，DOM樹(shù)構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程，當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn).
2.將CSS解析成CSS Rule Tree.
3.根據(jù)DOM和CSSOM來(lái)構(gòu)造Render Tree,Render tree不等于DOM Tree,因?yàn)橄馠eader或display:none的東西沒(méi)有必要放在渲染樹(shù)中.
4.有了Render Tree,瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系，下一步操作稱之為layout，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置.
5.下一步就是繪制，即遍歷render樹(shù)，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。
注意：上述這個(gè)過(guò)程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹(shù)。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載其余內(nèi)容.

此文章參考此鏈接

高性能計(jì)算備案流程及資料 ddos攻擊原理及防范人工智能原理及應(yīng)用單片機(jī)原理及接口技術(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114574.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

陸斌

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

融億云：限時(shí)秒殺,香港cn2云服務(wù)器僅9.9元/首月;99元/首年起

閱讀 3840·2021-09-22 10:57
使用css時(shí)，可能會(huì)出錯(cuò)的兩個(gè)地方

閱讀 1964·2019-08-30 15:55
如何獲取籃球比賽實(shí)時(shí)賠率

閱讀 2758·2019-08-30 15:44
對(duì)列布局columns的理解

閱讀 1784·2019-08-30 15:44
在線工具收集

閱讀 1917·2019-08-30 15:44
水平、垂直居中方式總結(jié)

閱讀 2300·2019-08-30 12:49
瀏覽器渲染原理及流程

閱讀 1106·2019-08-29 18:47
css實(shí)現(xiàn)居中、自適應(yīng)

閱讀 3194·2019-08-29 16:15

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

瀏覽器渲染原理及流程

相關(guān)文章