WebCore中的Dom和Render

转载 2011年01月12日 13:06:00

转自:WebCore中的渲染机制(一):基础知识

原文链接:http://webkit.org/blog/114/webcore-rendering-i-the-basics/

DOM树

web页面 解析 后形成节点树,称作文档对象模型(简称DOM),树上所有节点的基类是Node。

Node.h

节点分为几类,与渲染代码相关的节点类型有:

  • Document - 树的根节点总是Document,WebCore中有三个文档类: Document, HTMLDocument和SVGDocument。Document用于除了SVG文档之外的所有XML文档。HTMLDocument继承自 Document,仅适用于HTML文档。SVGDocument也是继承自Document,适用于SVG文档。
  • Document.h
    HTMLDocument.h
  • Element - HTML和XML源代码中出现的所有标记都是元素(elements)。从渲染的角度看,元素就是一个节点,它具有标记名并可以转化(cast)成一个能查询渲染所需数据的子类。
  • Element.h
  • Text - 元素之间出现的原始文本(raw text)就是文本节点。Text节点存储原始文本(raw text),渲染树能够查询节点,获得字符串数据。
  • Text.h

渲染树

渲染的核心是渲染树。渲染树非常类似于DOM,树中的每个对象都对应着文档、元素或文本节点。渲染树也可以包含没有对应DOM节点的对象。

所有渲染树节点的基类是RenderObject。

RenderObject.h

DOM节点对应的RenderObject可以使用Node类的Renderer方法获得:

RenderObject* renderer() const

下列方法通常用来遍历渲染树:

这里的示例展示了如何遍历渲染对象的子节点,这是渲染代码中最常见的遍历方式:

创建渲染树

渲染对象(renderer)通过DOM创建,这一过程称为附着(attachment)。当文档解析,DOM节点添加时,DOM节点的attach方法被调用来创建渲染对象(renderer)。

void attach()

attach方法获得DOM节点的样式信息,如果元素的display CSS属性为none或者节点是具有display:none集合的元素的后代,将不创建任何渲染对象(renderer)。节点的子类和CSS display属性值一起决定为该节点创建什么样的渲染对象(renderer)。

附着(attach)是一个自顶向下的递归操作,父亲节点总是在子孙节点之前创建他们对应的渲染对象(renderer)。

销毁渲染树

当DOM节点从文档移除时,或者在文档关闭时(比如标签页/窗口关闭时),渲染对象(renderer)被销毁。DOM节点的detach方法被调用来断开并销毁渲染对象(renderer)。

void detach()

分离(detachment)是一个自底向上的递归操作。子孙节点总是在父亲节点之前销毁对应的渲染对象(renderer)。

存取样式信息

附着(attachment)过程中,DOM查询CSS获得元素的样式信息,结果存放在RenderStyle对象中。

RenderStyle.h

webkit所支持的每个单独CSS属性都可以通过该对象查询到。RenderStyle是一个引用计数对象。如果DOM创建了一个渲染对象(renderer),它通过渲染对象(renderer)的setStyle方法关联样式信息到渲染对象(renderer)。

void setStyle(RenderStyle*)

渲染对象(renderer)将在Style上增加一个引用,并一直维持着直到得到新的样式或者被销毁。

RenderStyle可以使用style()方法从渲染对象(renderer)获得。

RenderStyle* style() const

CSS盒子模型(The CSS Box Model)

RenderObject的基本子类之一就是RenderBox,该类表示遵从CSS盒子模型的对象,它们包括具有边框、填充(padding)、 边距、宽度和高度的任何对象。现在有些对象并没有符合CSS盒子模型(比如SVG对象)但仍然从RenderBox派生,这实际上是一个错误,将在以后进 行渲染树重构时修复。

CSS 2.1规格的示意图 说明了CSS盒子的各部分,下列方法可用来获得边框/边距/填充的宽度。除非是查看原始的样式信息,否则RenderStyle不应该使用,因为最终RenderObject得到的计算值会有很大不同(特别是表格,可以覆盖单元格的填充,单元格之间也可以有展开的边框)

width()和height()方法获得包括边界在内的盒子宽度和高度。


客户盒子(client box)是盒子(box)除边框和滚动条之外但包括填充在内的区域。


内容盒子(content box)用来表示CSS盒子除边框和填充之外的区域。


当盒子有垂直或这水平滚动条时,它们放在填充和边框之间,滚动条的宽度和高度包括在client宽度和client高度中。滚动条不是内容盒子 (content box)的组成部分。可滚动区域的尺寸和当前滚动的位置都可以从RenderObject获得。我将在关于滚动的另一章节详细阐述。


盒子(box)还有x和y位置,这些位置都是相对于祖先节点的,它们负责决定盒子(box)放在何处。但存在一些例外,这也是渲染树让人难以理解的领域之一。


 

相关文章推荐

如何在android上打印dom树,render树,display_tree

在做chromium的时候,我们在debug的时候经常使用dumprendertree去打印网页对应的dom树等内容。    但是在刚接触android的时候,一直非常烦恼怎么用android自带的b...

浏览器安全 -原理 时序 Render DOM树构建

浏览器原理,时序图,DOM树、Render树构建

webkit中 html的解析及dom树和render树的生成

1.webkit中每个html页面对应于一颗dom树 和render树,dom用于描述html页面的的信息,而render树则用于布局,具体负责dom树如何显示在屏幕上,从MVC的角度来说,可以将re...

webkit中 html的解析及dom树和render树的生成 .

1.webkit中每个html页面对应于一颗dom树 和render树,dom用于描述html页面的的信息,而render树则用于布局,具体负责dom树如何显示在屏幕上,从MVC的角度来说,可以将re...

webkit中 html的解析及dom树和render树的生成

1.webkit中每个html页面对应于一颗dom树 和render树,dom用于描述html页面的的信息,而render树则用于布局,具体负责dom树如何显示在屏幕上,从MVC的角度来说,可以将re...

浅谈WebKit之WebCore篇

转自:http://ourpgh.blogspot.com/2008/09/webkitwebcore.html 最近自从Google推出Chrome浏览器之后,浏览器受到人们更加广泛的关注,网上时...

WebKit源码解析之WebCore::Length

转载,请注明出处!      这是一个struct结构体,用来表示长度类型。在分析这个类之前,有必要叙述一下长度的相关概念。      一般来说,长度的样式就是”digit unitType”。C...

WebCore Rendering 2 - 块和内联

在上一篇文章中,我们讲到了CSS盒模型的基本结构。在本文中,我们将继续讨论RenderBox类(继承于RenderObject类),以及关于块(block)和内联(inline)的概念。      ...

WebCore Rendering II -- Blocks and Inlines

原文链接:http://www.webkit.org/blog/115/webcore-rendering-ii-blocks-and-inlines/ 译文:  Posted by Dave H...

WebCore Rendering 4 - 绝对/固定定位和相对定位

CSS里的position属性可以用来对一个对象相对于某个容器块(containing block)进行相对定位。该属性有4个值:'static'(静态), 'absolute'(绝对), 'fixe...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)