聊一聊瀏覽器渲染原理及流程

2021-10-23    分類： 網(wǎng)站建設(shè)

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


渲染引擎簡(jiǎn)介

本文所討論的瀏覽器——Firefox、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit。


渲染主流程

渲染引擎首先通過網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程：

解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹


這里先解釋一下幾個(gè)概念，方便大家理解：

DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)。

CSS Rule Tree：瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)。

　　Render Tree: DOM和CSSOM合并后生成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: 按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。

reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個(gè)回退的過程叫reflow。reflow 會(huì)從 <html> 這個(gè) root frame 開始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置。reflow幾乎是無法避免的?，F(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實(shí)質(zhì)上是元素的顯示與隱藏）等，都將引起瀏覽器的reflow。鼠標(biāo)滑過、點(diǎn)擊……只要這些行為引起了頁(yè)面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會(huì)引起它內(nèi)部、周圍甚至整個(gè)頁(yè)面的重新渲染。通常我們都無法預(yù)估瀏覽器到底會(huì)reflow哪一部分的代碼，它們都彼此相互影響著。

repaint（重繪）：改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。

注意：(1)display:none 的節(jié)點(diǎn)不會(huì)被加入Render Tree，而visibility: hidden 則會(huì)，所以，如果某個(gè)節(jié)點(diǎn)最開始是不顯示的，設(shè)為display:none是更優(yōu)的。

　　(2)display:none 會(huì)觸發(fā) reflow，而 visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆]有發(fā)現(xiàn)位置變化。

　　　(3)有些情況下，比如修改了元素的樣式，瀏覽器并不會(huì)立刻reflow 或 repaint 一次，而是會(huì)把這樣的操作積攢一批，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁(yè)面默認(rèn)的字體等。對(duì)于這些操作，瀏覽器會(huì)馬上進(jìn)行 reflow。


來看看webkit的主要流程：


再來看看Geoko的主要流程：


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

盡管Webkit與Gecko使用略微不同的術(shù)語(yǔ)，這個(gè)過程還是基本相同的，如下：

1. 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹，DOM 樹的構(gòu)建過程是一個(gè)深度遍歷過程：當(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來構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了。

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樹，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。

注意：上述這個(gè)過程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。

本文標(biāo)題：聊一聊瀏覽器渲染原理及流程
當(dāng)前鏈接：http://www.bm7419.com/news37/132537.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站制作、微信小程序、標(biāo)簽優(yōu)化、App設(shè)計(jì)

廣告

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

網(wǎng)站優(yōu)化排名