[1]瀏覽器的功能：將用戶選擇的web資源呈現出來，需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML，也包括PDF、image及其他格式，用戶用URI來指定所請求資源的位置。
[2]瀏覽器的結構
[用戶接口 user interface]包括地址欄、書簽選項、前進后退、刷新、暫停、主頁等窗口上除了網頁顯示區域以外的部分
[瀏覽器引擎 browser engine]查詢與操作渲染引擎的接口
[渲染引擎 rendering engine]顯示用CSS格式化的HTML與圖片
[網絡 network]用于網絡請求，如HTTP請求，它包括平臺無關的接口和各平臺獨立的實現
[UI后端 UI backend]繪制基礎元件，如組合框與窗口，提供平臺無關的接口，內部使用操作系統的相應實現
[JS解釋器 javascript interpreter]用于解析執行Javascript代碼
[數據存儲 data persistence]瀏覽器需要把所有數據存到硬盤上，如cookies
[3]渲染引擎
firefox使用的是geoko
safari和chrome使用的是webkit
[3.1]基本流程:渲染引擎首先通過網絡獲得所請求文檔的內容，通常以8k分塊的方式完成->解析html構建dom樹->構造render樹->布局render樹->繪制render樹
[3.2]詳細流程:渲染引擎開始解析html,并將標簽轉化為內容樹中的dom節點。接著，解析外部css文件及style標簽中的樣式信息，這些樣式信息以及html中的樣式信息將被用來構建另一棵樹-render樹。render樹由一些包含css屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。render樹構建好之后，將會執行布局過程，它將確定每個節點在屏幕上的確切坐標。再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個節點。
[3.3]特點:為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹，它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。
[3.4]注意:webkit中元素的定位稱為布局，而gecko中稱為回流。
[4]解析與DOM樹構建(parsing and DOM tree construction)
[4.1]html解析
[4.1.1]html不能被一般的自頂向下或者自底向上的解析器所解析的原因如下：
[1]這門語言本身的寬容特性
[2]瀏覽器對一些常見的非法html有容錯機制
[3]解析過程是往復的，通常源碼不會有解析過程中發生改變，但在html中，腳本標簽包含document.write可能添加標簽，這說明在解析過程中實際上修改了輸入
[4.1.2]html5規范中描述了html的解析算法:包括兩個階段——符號化及構建樹。符號化是詞法分析的過程，將輸入解析為符號，html的符號包括開始標簽、結束標簽、屬性名及屬性值，符號識別器識別出符號后，將其傳遞給樹構建器，并讀取下一個字符，以識別下一個符號，這樣直到處理完所有輸入。
[4.2]css解析
[4.2.1]特性：css解析屬于上下文無關文法
[4.2.2]實現：webkit使用flex和bison解析生成器從css語法文件中自動生成解析器。Bison創建一個自底向上的解析器，firefox使用自頂向下解析器。它們都將每個css文件解析為樣式表對象，每個對象包含css規則，css規則對象包含選擇器和聲明對象，以及其他一些符合css語法的對象。
[4.2.3] 處理腳本及樣式表的順序
[4.2.3.1]腳本：web的模式是同步的。開發者可以將腳本標識為defer,以使其不阻塞文檔解析，并在文檔解析結束后執行。
[4.2.3.2]預解析：當執行腳本時，另一個線程解析剩下的文檔，并加載后面需要通過網絡加載的資源。這種方式可以使資源并行加載從而使整體速度更快。
[4.2.3.3]樣式表：腳本可能在文檔的解析過程中請求樣式信息，如果樣式還沒有加載和解析，腳本將得到錯誤的值，firefox在存在樣式表還在加載和解析時阻塞所有的腳本，而chrome只在當腳本試圖訪問某些可能被未加載的樣式表所影響的特定的樣式屬性時才阻塞這些腳本。
[5]渲染樹構建
[5.1]當DOM樹構建完成時，瀏覽器開始構建另一棵樹——渲染樹，渲染樹由元素顯示序列中的可見元素組成，它是文檔的可視化表示，構建這棵樹是為了以正確的順序繪制文檔內容。
[5.2]實現：firefox將渲染樹中的元素稱為frames，webkit則用renderer或渲染對象來描述這些元素。
[5.3]渲染對象和DOM元素相對應，但這種對應關系不是一對一的，不可見的DOM元素不會被插入渲染樹，例如head元素另外display屬性為none的元素也不會出現在渲染樹中，而visibility屬性為hidden的元素將出現在渲染樹中
[5.4]創建樹的流程：
[5.4.1]firefox中，表述為一個監聽DOM更新的監聽器，將frame的創建委派給frame constructor,這個構建器計算樣式，并創建一個frame
[5.4.2]webkit中計算樣式生成渲染對象的過程稱為attachment,每個dom節點有一個attach方法，attachment的過程是同步的，調用新節點的attach方法將節點插入到dom樹中
[6]布局
[6.1]當渲染對象被創建并添加到樹中，它們并沒有位置和大小，計算這些值的過程稱為layout或reflow
[6.2]全局和增量layout
[6.2.1]當layout在整棵渲染樹觸發時，稱為全局layout,這可能在下面這些情況下發生:
1、一個全局的樣式改變影響所有的渲染對象，比如字號的改變
2、窗口resize
全局layout一般是同步觸發，有些時候，layout會被當作一個初始layout之后的回調，比如滑動條的滑動。
[6.2.2]增量layout的過程是異步的，firefox為增量layout生成了reflow隊列，以及一個調度執行這些批處理命令。webkit也有一個計時器用來執行增量layout——遍歷樹，為dirty狀態的渲染對象重新布局。當腳本請求樣式信息時，例如offsetHeight，會同步觸發增量布局。
[6.3]當一個渲染對象在布局過程中需要折行時，則暫停并告訴它的parent需要折行，parent將創建額外的渲染對象并調用它們的layout
[7]繪制 painting
[7.1]繪制階段，遍歷渲染樹并調用渲染對象的paint方法將它們的內容顯示在屏幕上，繪制使用UI基礎組件
[7.2]一個塊渲染對象的堆棧順序是：背景色->背景圖->border->children->outline
[7.3]動態變化：瀏覽器總是試著以最小的動作響應一個變化，所以一個元素顏色的變化將只導致該元素的重繪，元素位置的變化將大致元素的布局和重繪，添加一個DOM節點，也會導致這個元素的布局和重繪。一些主要的變化，比如增加html元素的字號，將會導致緩存失效，從而引起整體的布局和重繪。
文章列表
留言列表
