呈現樹和 DOM 樹的關系

　　呈現器是和 DOM 元素相對應的，但並非一一對應。非可視化的 DOM 元素不會插入呈現樹中，例如“head”元素。如果元素的 display 屬性值為“none”，那麽也不會顯示在呈現樹中（但是 visibility 屬性值為“hidden”的元素仍會顯示）。

　　有一些 DOM 元素對應多個可視化對象。它們往往是具有復雜結構的元素，無法用單一的矩形來描述。例如，“select”元素有 3 個呈現器：一個用於顯示區域，一個用於下拉列表框，還有一個用於按鈕。如果由於寬度不夠，文本無法在一行中顯示而分為多行，那麽新的行也會作為新的呈現器而添加。
另一個關於多呈現器的例子是格式無效的 HTML。根據 CSS 規範，inline 元素只能包含 block 元素或 inline 元素中的一種。如果出現了混合內容，則應創建匿名的 block 呈現器，以包裹 inline 元素。

　　有一些呈現對象對應於 DOM 節點，但在樹中所在的位置與 DOM 節點不同。浮動定位和絕對定位的元素就是這樣，它們處於正常的流程之外，放置在樹中的其他地方，並映射到真正的框架，而放在原位的是占位框架。

圖：呈現樹及其對應的 DOM 樹 (3.1)。初始容器 block 為“viewport”，而在 Webkit 中則為“RenderView”對象。

深入解析瀏覽器的幕後工作原理(三) 呈現樹和 DOM 樹的關系