瀏覽器原理

時間 2019-11-13

標籤瀏覽器原理欄目瀏覽器简体版

原文原文鏈接

第一部分：shell外殼：菜單，工具欄等；css

第二部分：內核html

瀏覽器的組件：web

用戶界面：瀏覽器軟件界面；
瀏覽器引擎：查詢及操做渲染引擎的接口；
渲染引擎：顯示請求內容，即渲染html組件；
網絡：完成網絡調動，發送和響應http請求；
js解釋器：編譯執行js代碼；
UI後端：操做系統的組件,如：下拉列表框和窗口
數據存儲：瀏覽器持久層：cookie localstorage sesionstorage

渲染引擎：算法

基本主流程：shell

請求html ->解析html--加載外部樣式及外部腳本-> 構建DOM樹->構建render樹（dom+cssom樹）->繪製render樹;後端

(外部樣式會阻塞內部腳本的執行。瀏覽器

外部樣式與外部腳本並行加載，但外部樣式會阻塞外部腳本執行。)cookie

不一樣的內核渲染的流程不同，webkit：網絡

編譯流程：多線程

源碼->解析->解析樹->轉換->機器碼

解析原理：

轉換成必定意義的結構：編碼能夠理解和使用的東西。

解析的結果一般是表達文檔結構的節點樹，解析書或語法樹。

解析兩個子過程：

詞法解析；
語法解析

解析樹=詞法解析+語法解析+…的過程。

轉換：把解析書轉換爲機器碼；

那麼，html解析原理：

特殊性：

html語言的寬容性；
瀏覽器對html語言的容錯機制（修復）；
Html過程的往復性，解析過程可對輸入的文檔緊進行修改：document.write等；

html解析算法兩個階段：

第一：符號化；

第二：構件樹；

css解析：selector: p p-txt , declaration: 3px margn…

腳本解析<script>：

web的模式是同步的，開發者但願解析到一個script標籤時當即解析執行腳本，並阻塞文檔的解析直到腳本執行完。
若是腳本是外引的，則網絡必須先請求到這個資源——這個過程也是同步的，會阻塞文檔的解析直到資源被請求到；

因此render樹渲染後再調<script>,放在htmlz最後；

預解析：

當執行腳本時，另外一個線程解析剩下的文檔，並加載後面須要經過網絡加載的資源。這種方式可使資源並行加載從而使總體速度更快。
預解析並不改變Dom樹，它將這個工做留給主解析過程，本身只解析外部資源的引用，好比外部腳本、樣式表及圖片

渲染樹的構建（rendertree）:渲染對象RenderObject ；

渲染樹和dom樹的關係：

具體詳情：

遍歷dom樹，忽略<head>和節點display:none；
對每個可見的dom,找到對應的cssom,而且應用樣式；
最後輸出一個渲染樹rendertree包括：顯示可見的節點及內容和信息；

css優先順序，從低到高有：

1.　瀏覽器默認樣式

2.　用戶個性化瀏覽器設置

3.　HTML開發者定義的通常樣式

4.　HTML開發者定義的!important樣式

5.　用戶個性化瀏覽器設置!important樣式

渲染對象和對應的DOM節點也可能不在相同的位置。例如，浮動和絕對定位的元素在文本流以外。

怎麼樣解決css數據龐大，佔大量內存？
和每一個元素匹配規則致使性能問題？
應用規則及複雜的聯級關係？

共享樣式；

進化匹配過程；

以正確的級聯順序；

逐步處理。

佈局layout

當渲染對象被建立並添加到樹中，他們斌更沒有位置和大小，計算這些值得過程稱爲layout或reflow。每個渲染對象都有一個layout或reflow方法，出發佈局時調用。

layout過程：

計算自身寬高；
讀取設置的children，並判斷其dirty狀態，選擇渲染dirty的子對象。
根據子對象積累高度，margin和padding來設置本身的高度供給parent對象使用；
更新dirty標識爲false;

Dirty bit系統：一個渲染對象發生變化時就標記它和它的children爲dirty,表示須要layout。目的：不因每一個小變化就所有從新佈局。

繪製painting

遍歷渲染樹並調用渲染對象的pain方法將他們的內容顯示到屏幕上；

繪製順序：

一個塊渲染對象的堆棧順序爲：

背景色；
背景圖；
Border;
Children
Outline

動態變化：瀏覽器老是試着以最小的動做響應一個變化，因此就存在有些屬性只改變單個渲染對象就：字體、顏色、等；但也有些屬性修改會致使大面積的重繪：位置。

線程和事件：

瀏覽器是多線程的，渲染引擎和js是單線程的。其中渲染引擎則是瀏覽器的主線程；

瀏覽器的主線程是一個事件循環，他被設計爲無限循環以保持執行過程的可用：等待時間並執行他們。

瀏覽器執行的是多線程，js引擎解釋器的執行時單線程。因此說瀏覽器是單線程的說法不對。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。