瀏覽器渲染原理及流程

時間 2019-12-04

原文原文鏈接

渲染引擎簡介

目前經常使用的瀏覽器：
Firefox . chrome . safari 是基於兩種渲染引擎構建的，Firefox使用Geoko,是Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit.html

渲染主流程

概念解釋
DOM Tree:瀏覽器將HTML解析成樹形的數據結構.
CSS Rule Tree:瀏覽器將CSS解析在樹形的數據結構.
Render Tree:DOM和CSSOM(CSS Object Model:CSS對象模型)合併後生成Render Tree.
layout:有了Render Tree，瀏覽器已經能知道網頁中有哪些節點，各個節點的CSS的定義以及他們的從屬關係，從而去計算出每一個節點的屏幕中的位置.
painting:按照算出來的規則，經過顯卡，把內容畫到屏幕上.
reflow(迴流):當瀏覽器發現某個部分發生了點變化影響了佈局，須要倒回去從新渲染，稱此爲回退的過程，叫reflow.reflow會從<html>這個root frame開始遞歸往下，依次計算全部的結點幾何尺寸和位置。feflow幾乎是沒法避免的.
例如：樹狀目錄的摺疊，展開，實質上是元素的顯示與隱藏等，都將引發瀏覽器的reflow，
鼠標劃過，點擊，只要這些行爲引發了頁面上的某些元素的佔位面積，定位方式，邊距等屬性的變化，都會引發它的內部，周圍甚至整個頁面的從新渲染。
repaint(重繪):改變某個元素的背景色，文字顏色，邊框顏色等等不影響它周圍或內部佈局的屬性時，屏幕的一部分要重畫，可是元素的幾何尺寸沒有變.web

注意點：
1.display:none的節點不會被加入Render Tree,而visibility:hidden則會，因此若是某個節點最開始是不顯示的，設爲display:none是最好的
2.display:none會觸發reflow，而visibility:hidden只會觸發repaint,由於位置沒有發生變化.
3.有些狀況下，好比修改了元素的樣式，瀏覽器不會馬上reflow和repaint一次，而是會把這樣的操做積攢一批，而後作一次reflow，這又叫異步reflow或增量異步reflow,可是有些狀況，如resize窗口，改變了頁面默認的字體等，對於這些操做，瀏覽器會立刻進行reflowchrome

主流程
渲染引擎首先經過網絡得到所請求文檔的內容，一般以8K分塊的方式完成。基本流程爲：
解析HTML以構建DOM樹 -> 解析CSS構建CSSOM -> 將DOM樹與CSSOM樹合併，構建Render樹 -> 佈局render樹 -> 繪製render樹後端

來看看webkit的流程：瀏覽器

接下來是Gecko的流程：
Gecko裏把格式化好的可視元素稱作「楨樹」（Frame tree），每個元素就是一個楨，webkit使用的是渲染樹的術語，渲染樹由渲染對象組成，webkit裏使用layout表示元素的佈局，Gecko則稱爲reflow。webkit使用attachment來連接DOM節點與可視化信息以構建渲染樹。一個非語義上的小差異就是Gecko在HTML與DOM樹之間有一個附加的層，稱做"content sink",是建立DOM對象的工廠.
網絡

雖然Webkit與Gecko使用的術語略微不一樣，可是這個過程是基本相同的，以下：
1.瀏覽器會將HTML解析成一個DOM樹，DOM樹構建過程是一個深度遍歷過程，當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點.
2.將CSS解析成CSS Rule Tree.
3.根據DOM和CSSOM來構造Render Tree,Render tree不等於DOM Tree,由於像Header或display:none的東西沒有必要放在渲染樹中.
4.有了Render Tree,瀏覽器已經能知道網頁中有哪些節點，各個節點的CSS定義以及他們的從屬關係，下一步操做稱之爲layout，顧名思義就是計算出每一個節點在屏幕中的位置.
5.下一步就是繪製，即遍歷render樹，並使用UI後端層繪製每一個節點。
注意：上述這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容.數據結構

此文章參考此連接異步