瀏覽器原理
第一部分：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引擎解釋器的執行時單線程。因此說瀏覽器是單線程的說法不對。
- 1. 瀏覽器原理
- 2. 瀏覽器工做原理 （一） ： 瀏覽器渲染原理 & 瀏覽器內核
- 3. 瀏覽器緩存原理
- 4. 瀏覽器工做原理
- 5. 瀏覽器渲染原理
- 6. 瀏覽器運行原理
- 7. 瀏覽器工作原理
- 更多相關文章...
- • XSLT 瀏覽器 - XSLT 教程
- • Opera 瀏覽器 - 瀏覽器信息
- • ☆技術問答集錦（13）Java Instrument原理
- • Java Agent入門實戰（三）-JVM Attach原理與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。