深刻解析瀏覽器的幕後工做原理(三) 呈現樹和 DOM 樹的關係

呈現樹和 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」對象。