浏览器了解（六）RenderTree

来源：互联网发布：zerohedge怎么样知乎编辑：程序博客网时间：2024/05/16 17:22

v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);}

RenderTree

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

浏览器呈现简单流程

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

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

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

Render的细节：

RenderTree生成过程

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

本文出自 “雨轩印象” 博客，请务必保留此出处http://zilla.blog.51cto.com/3095640/838517