瀏覽器基本結構
瀏覽器結構一般包括如下：
1.用戶界面(User Interface)：用戶所看到的界面，并且與之交互的功能；
2.瀏覽器引擎(Browser Engine)：負責控制和管理下一級的渲染引擎；
3.渲染引擎(Rendering Engine)：負責用戶的請求（比如html和xml，渲染引擎會解析HTML和XML，以及相應的CSS，然后返回解析的內容）；
4.網絡(Networking)：負責處理網路相關事物，處理http請求等；
5.UI后端(UI Backend)：負責繪制瀏覽器提示框等瀏覽器組件，其底層使用的是操作系統的用戶接口；
6.JavaScript解析器(JavaScript Interpreter)：用來解析以及執行JavaScript代碼；
7.數據儲存(data storage)：負責持久存儲諸如cookie和緩存等應用數據。
渲染引擎以及渲染路徑
渲染引擎所做是的將內容展現出來，默認是支持HTML、XML還有圖片類型，對于其他諸如PDF等類型的內容則需要安裝相應插件，但瀏覽器的展示工作流程基本是一樣的。
- 首先解析HTML，生成DOM節點樹。
解析文檔的時候，是從上至下掃描并且解析文檔；DOM樹，即文檔內所有節點構成的一個樹形結構。
- 其次加載并且解析樣式，生成CSSOM(CSS Object Model)
CSSOM樹，與DOM樹結構相似，只是另外為每一個節點關聯了樣式信息。
- 加載并且執行JavaScript代碼
或許是由于通常會在JavaScript腳本中改變文檔DOM結構，于是瀏覽器以同步方式解析，加載和執行腳本，瀏覽器在解析文檔時，當解析到<script>標簽時，會解析其中的腳本（對于外鏈的JavaScript文件，需要先加載該文件內容，再進行解析），然后立即執行，這整個過程都會阻塞文檔解析，直到腳本執行完才會繼續解析文檔。就是說由于腳本是同步加載和執行的，它會阻塞文檔解析，這也解釋了為什么現在通常建議將<script>標簽放在標簽前面，而不是放在<head>標簽里。
- 根據DOM和CSSOM，生成渲染樹(Rendering Tree)
渲染樹，代表一個文檔的視覺展示，瀏覽器通過它將文檔內容繪制在瀏覽器窗口，展示給用戶，它由按順序展示在屏幕上的一系列矩形對象組成，這些矩形對象都帶有字體，顏色和尺寸，位置等視覺樣式屬性。對于這些矩對象，FireFox稱之為框架（frame）,Webkit瀏覽器稱之為渲染對象（render object, renderer），后文統稱為渲染對象。
- 布局，根據生成的渲染樹的每一個節點擺放到相應的位置上
創建渲染樹后，下一步就是布局（Layout）,或者叫回流（reflow,relayout），這個過程就是通過渲染樹中渲染對象的信息，計算出每一個渲染對象的位置和尺寸，將其安置在瀏覽器窗口的正確位置，而有些時候我們會在文檔布局完成后對DOM進行修改，這時候可能需要重新進行布局，也可稱其為回流，本質上還是一個布局的過程，每一個渲染對象都有一個布局或者回流方法，實現其布局或回流。
布局是一個從上到下，從外到內進行的遞歸過程，從根渲染對象，即對應著HTML文檔根元素<html>，然后下一級渲染對象，如對應著<body>元素，如此層層遞歸，依次計算每一個渲染對象的幾何信息（位置和尺寸）。
- 遍歷渲染樹的每一個節點，為每一個節點配套相應的樣式
瀏覽器UI組件將遍歷渲染樹并調用渲染對象的繪制（paint）方法，將內容展現在屏幕上，也有可能在之后對DOM進行修改，需要重新繪制渲染對象，也就是重繪，繪制和重繪的關系可以參考布局和回流的關系。
Webkit引擎渲染流程圖
Gecko引擎渲染流程圖
