瀏覽器工做原理整理

瀏覽器組成

1. 用戶界面-地址欄、按鈕之類的
2. 瀏覽器引擎-用來查詢及操做渲染引擎的接口
3. 渲染引擎-顯示請求的內容
4. 網絡-進行網絡請求
5. ui後端-用來滬指選擇框、對話框的基本組件
6. js解析器
7. 數據存儲

須要注意的是，不一樣於大部分瀏覽器，Chrome爲每一個Tab分配了各自的渲染引擎實例，每一個Tab就是一個獨立的進程

渲染引擎

主流程

解析html以構建dom樹->構建render樹->佈局render樹->繪製render樹

渲染引擎開始解析html，並將標籤轉化胃內容樹中的dom節點,接着它解析外部css文件及style標籤中的樣式信息，這些樣式信息和html元素中的樣式信息將被用來構建另外一顆樹---渲染樹

渲染樹是有一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。

渲染樹構建好了以後，將會執行佈局過程，它將肯定每一個節點上在屏幕上的確切座標，再下一步就是繪製渲染樹，使用ui後端層繪製每一個節點

解析

解析一個文檔即將其轉換爲具備必定意義的結構——編碼能夠理解和使用的東西。解析的結果一般是表達文檔結構的節點樹，稱爲解析樹或語法樹。

文法

解析基於文檔依據的語法規則——文檔的語言或格式。每種可被解析的格式必須具備由詞彙及語法規則組成的特定的文法，稱爲上下文無關文法。人類語言不具備這一特性，所以不能被通常的解析技術所解析。

html解析器

html解析器將html標識解析成解析樹，解析書是有dom元素及屬性節點組成，dom是文檔對象模型的縮寫。解析算法 html並非由頂向下或者自低向上的解析，
緣由是：

1. 這門語言自己的寬容特性
2. 瀏覽器對一些常見的非法html有容錯機制
3. 解析過程是往復的，一般源碼不會在解析過程當中發生改變，但在html中，腳本標籤包含的「document.write 」可能添加標籤，這說明在解析過程當中實際上修改了輸入

瀏覽器爲html制定了專門的解析器。

CSS解析

css解析器，css 每一個標識都有特定的正則進行解析。一個規則集合具備一個或者可選個數的多個選擇器

腳本解析

web的模式是同步的，開發者但願解析到一個script標籤時當即解析執行腳本，並阻塞文檔的解析直到腳本執行完。若是腳本是外引的，則網絡必須先請求到這個資源——這個過程也是同步的，會阻塞文檔的解析直到資源被請求到。這個模式保持了不少年，而且在html4及html5中都特別指定了。開發者能夠將腳本標識爲defer，以使其不阻塞文檔解析，並在文檔解析結束後執行。Html5增長了標記腳本爲異步的選項，以使腳本的解析執行使用另外一個線程。

渲染樹的構造

這個比較複雜，之後單獨來寫