瀏覽器渲染原理及流程

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

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

渲染引擎簡介

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

渲染主流程

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

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

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

來看看webkit的流程：

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

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

此文章參考此鏈接