瀏覽器渲染原理及流程

z2xy 發布于2019-08-02 16:15 / 1329人閱讀

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

渲染引擎簡介

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

渲染主流程

概念解釋
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會從這個root frame開始遞歸往下，依次計算所有的結點幾何尺寸和位置。feflow幾乎是無法避免的.
例如：樹狀目錄的折疊，展開，實質上是元素的顯示與隱藏等，都將引起瀏覽器的reflow，
鼠標劃過，點擊，只要這些行為引起了頁面上的某些元素的占位面積，定位方式，邊距等屬性的變化，都會引起它的內部，周圍甚至整個頁面的重新渲染。
repaint(重繪):改變某個元素的背景色，文字顏色，邊框顏色等等不影響它周圍或內部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變.

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

主流程
渲染引擎首先通過網絡獲得所請求文檔的內容，通常以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樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容.

此文章參考此鏈接

GPU云服務器云服務器備案流程及資料 ddos攻擊原理及防范人工智能原理及應用單片機原理及接口技術

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54964.html

瀏覽器渲染原理及流程

摘要：幾乎是無法避免的例如樹狀目錄的折疊，展開，實質上是元素的顯示與隱藏等，都將引起瀏覽器的，鼠標劃過，點擊，只要這些行為引起了頁面上的某些元素的占位面積，定位方式，邊距等屬性的變化，都會引起它的內部，周圍甚至整個頁面的重新渲染。渲染引擎簡介目前常用的瀏覽器：Firefox . chrome . safari 是基于兩種渲染引擎構建的，Firefox使用Geoko,是Mozilla自主研...

陸斌 2019-08-29 18:47 評論0 收藏0
瀏覽器渲染原理及流程

摘要：渲染主流程渲染引擎首先通過網絡獲得所請求文檔的內容，通常以分塊的方式完成。回流當瀏覽器發現某個部分發生了點變化影響了布局，需要倒回去重新渲染，內行稱這個回退的過程叫。有了，瀏覽器已經能知道網頁中有哪些節點各個節點的定義以及他們的從屬關系。渲染主流程渲染引擎首先通過網絡獲得所請求文檔的內容，通常以8K分塊的方式完成。下面是渲染引擎在取得內容之后的基本流程：解析html以構建dom樹...

BLUE 2019-08-30 11:03 評論0 收藏0
瀏覽器渲染原理及流程

摘要：渲染主流程渲染引擎首先通過網絡獲得所請求文檔的內容，通常以分塊的方式完成。回流當瀏覽器發現某個部分發生了點變化影響了布局，需要倒回去重新渲染，內行稱這個回退的過程叫。有了，瀏覽器已經能知道網頁中有哪些節點各個節點的定義以及他們的從屬關系。渲染主流程渲染引擎首先通過網絡獲得所請求文檔的內容，通常以8K分塊的方式完成。下面是渲染引擎在取得內容之后的基本流程：解析html以構建dom樹...

ysl_unh 2019-08-02 15:13 評論0 收藏0
瀏覽器渲染原理及流程

摘要：渲染主流程渲染引擎首先通過網絡獲得所請求文檔的內容，通常以分塊的方式完成。回流當瀏覽器發現某個部分發生了點變化影響了布局，需要倒回去重新渲染，內行稱這個回退的過程叫。有了，瀏覽器已經能知道網頁中有哪些節點各個節點的定義以及他們的從屬關系。渲染主流程渲染引擎首先通過網絡獲得所請求文檔的內容，通常以8K分塊的方式完成。下面是渲染引擎在取得內容之后的基本流程：解析html以構建dom樹...

Jenny_Tong 2019-08-23 17:56 評論0 收藏0
18年求職面經及總結

摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業學過兩門和相關的課程語言和單片機這個專業的唯一好處就是大部分人并不知道這個專 18年求職面經及總結我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

zhangwang 2019-08-22 11:07 評論0 收藏0