浏览器了解（六）RenderTree

 

RenderTree

浏览器渲染的简易流程如图所示

浏览器的Render过程将DomTree和CSSStyleSheet组合到一起，顺序地生成RenderTree，这里的RenderTree只包含页面中的可见元素，对于不可见元素（如<div style=’disylay:none’）将不会被包含在RenderTree中。

RenderTree中的每个节点有一个RenderObject与之对应，RenderObject对应一个Render节点的矩形框，RenderObject中包含了矩形框的大小，样式等信息。

一般情况下一个DOMTree的节点会对应到一个RenderTree节点，但是也不一定，例如不可见元素，或者Select元素（select元素在RenderTree中需要3个节点，显示框，下拉框，按钮）。

Render的细节：

对于每一个节点，会有一个block与之对应，占用一个矩形框，并且矩形框可以嵌套。当首先检测到html元素的时候，浏览器认为该节点是根节点，会将其作为ViewPort，也就是页面的最初包含的block，在webkit中就是” RenderView”对象。

 

转载于:https://blog.51cto.com/zilla/838517