瀏覽器渲染原理

瀏覽器渲染原理學習後的總結以下：

一：瀏覽器的主要功能

1.用戶界面-----地址欄，後退，前進按鈕，書籤目錄等，也就是除了主窗口之外的部分。

2.瀏覽器引擎---用來查詢及操做 渲染引擎的接口，另外還用來操做瀏覽器的數據存儲。

3.渲染引擎-----用來顯示請求的內容。

4.網絡--------用來完成網絡調用，例如http請求，它具備平臺無關。

5.UI後端------用來繪製相似組合選擇框，以及對話框等基本組件，具備不特定於某個平臺的通用接口。

6.JS解析器----用來解釋執行js代碼。

7.數據存儲----屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據。

二：渲染引擎是幹什麼的？

解析html構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹（渲染引擎首先經過網絡得到所請求文檔的內容，一般以8k分塊的方式完成）。

 三：解析樹-詞法分析器

解析分爲兩個子過程 -> 語法分析和詞法分析

1.詞法分析：把字符初步解析成咱們能夠理解的詞，學名token，html結構不算太複雜，咱們須要90%的token大約只有標籤開始，屬性，標籤結束，註釋，CDATA節點。

2.語法分析：把開始標籤結束標籤配對，屬性賦值好，父子關係聯繫好，構成dom樹。

四：html解析器HTML Parser

1.對輸入的內容進行解析，解析的過程其實就是解析字符串的過程。

2.文本節點生成後（詞法解析後），開始解析第一個節點（html），而且是開始節點，便把它壓入棧，若是遇到文本直接將該文本追加入棧...

3.每次把開始節點壓入棧，結束標籤時，找到對應的開始標籤一塊兒出棧操做，好比結束標籤</title>，則將<title>XXX</tltle>，整個內容出棧。

4.正常狀況下，全部的節點處理完，棧應該是空的。

五：css解析器

不一樣於html，css屬於上下文無關方法。

將每一個css解析爲樣式表對象。

六：渲染樹構建

1.每個渲染對象用一個和該節點的css盒模型相對應的矩形區域來表示。

2.渲染樹和dom樹：渲染對象和dom元素相對應，但這種關係不是一對一的，不可兼得dom元素不會被插入渲染樹，例如head。另外display爲none的元素也不會在渲染樹中。

還有一些dom元素對應幾個可見對象，他們通常是一些具備複雜結構的元素，沒法用一個矩形來描述，例如select。

一些渲染對象和所對應的dom節點不在樹上相同的位置，例如，浮動和絕對定位的元素在文本流以外，在兩棵樹上的位置不一樣，渲染樹上標示出真實的結構，並用一個佔位結構標識

出它們原來的位置。

3.建立樹的流程：處理html和body標籤將構建渲染樹的根，這個根渲染對象對應被css規範稱爲containing block的元素，它的大小就是viewport-瀏覽器窗口的顯示區域，firefox稱它

爲viewportFrame，webkit稱爲renderView，這個就是文檔所指向的渲染對象，樹中其它的部分都將做爲一個插入的dom節點被建立。

4.樣式計算：從樣式的底層節點開始，它具備最高優先級（一般是最特定的選擇器），遍歷規則樹直到填滿結構。

a.瀏覽器聲明

b.用戶聲明

c.做者的通常聲明

d.做者的important聲明

e.用戶的important聲明

七：佈局

1.佈局：當渲染對象被建立並添加到樹中，它們並無位置和大小，計算這些值的過程稱爲layout或者reflow（重構）。

佈局是一個遞歸的過程，由根渲染對象開始，他對應html文檔元素，佈局繼續遞歸的經過一些或全部的frame層級，爲每個須要幾何信息的渲染對象進行計算。

2.Dirty bit系統

爲了避免由於每個小的變化所有從新佈局，瀏覽器使用一個dirty bit系統，一個渲染對象發生了變化或者被添加了，就標記它及他的childen爲dirty-須要layout。

3.全局和增量layout

當layout在整棵渲染樹觸發時，稱爲全局layout。

a.全局樣式改變影響全部的渲染對象，好比字號的改變

b.窗口resize

layout也能夠是增量的，這樣只有標記爲dirty的渲染對象會從新佈局

4.增量layout的過程是異步的，全局的layout是同步觸發的

5.當一個layout由於resize或是渲染位置改變（並非大小改變），而觸發時，渲染對象的大小將會從緩存中讀取，而不會從新計算。

通常狀況下，若是隻有子樹發生改變則layout不從根開始

6.當一個渲染對象在佈局過程當中須要折行時，則暫停並告訴它的parent須要折行，parent將建立額外的渲染對象並調用它們的layout。

八：繪製painting

繪製階段：繪製渲染樹並調用渲染對象的paint方法將它們的內容顯示在屏幕上。

1.全局和增量：和佈局同樣，繪製也能夠是全局的以及增量的。

2.繪製順序，就是元素押入堆棧的順序，這個順序影響着繪製，堆棧從後向前進行繪製：

a.背景色

b.背景圖

c.border

d.children

e.outline 

3.firefox顯示列表

firefox讀取渲染樹併爲繪製的矩形建立一個顯示列表，該列表以正確的繪製順序包含這個矩形相關渲染對象。在渲染樹的基礎上可使重繪只需查找一次樹，

而不須要屢次查找--繪製全部的背景，全部的圖片，全部的border等。不會添加被隱藏的元素。

4.webkit矩形存儲

重繪前，webkit將舊的矩形保存爲位圖，而後只繪製新舊矩形的差集。

九：動態變化和渲染引擎的線程

1.動態變化：瀏覽器老是試着以最小的動做響應一個變化，因此一個元素顏色的變化將致使該元素的重繪，元素位置的變化將致使元素的佈局和重繪，添加

一個dom節點，也會致使這個元素的佈局和重繪。

2.渲染引擎的線程：渲染引擎是單線程的，除了網絡操做之外，幾乎全部的事情都在單一的線程中處理，在firfox和safari中，這是瀏覽器的主線程，chrome

中這是tab的主線程。

3.事件循環：瀏覽器主線程是一個事件循環，它被設計的無限循環以保持執行過程的可用，等待事件（layout，painting）並執行它們。

參考來源：http://blog.csdn.net/lxcao/article/details/52859017