WebCore中的渲染机制(一):基础知识
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
下列方法通常用来遍历渲染树:
RenderObject* firstChild() const;
RenderObject* lastChild() const;
RenderObject* previousSibling() const;
RenderObject* nextSibling() const;
RenderObject* firstChild() const;
RenderObject* lastChild() const;
RenderObject* previousSibling() const;
RenderObject* nextSibling() const;
这里的示例展示了如何遍历渲染对象的子节点,这是渲染代码中最常见的遍历方式:
for (RenderObject* child = firstChild(); child; child = child->nextSibling()) {
...
}
for (RenderObject* child = firstChild(); child; child = child->nextSibling()) {
...
}
创建渲染树
渲染对象(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得到的计算值会有很大不同(特别是表格,可以覆盖单元格的填充,单元格之间也可以有展开的边框)
int marginTop() const;
int marginBottom() const;
int marginLeft() const;
int marginRight() const;
int paddingTop() const;
int paddingBottom() const;
int paddingLeft() const;
int paddingRight() const;
int borderTop() const;
int borderBottom() const;
int borderLeft() const;
int borderRight() const;
int marginTop() const;
int marginBottom() const;
int marginLeft() const;
int marginRight() const;
int paddingTop() const;
int paddingBottom() const;
int paddingLeft() const;
int paddingRight() const;
int borderTop() const;
int borderBottom() const;
int borderLeft() const;
int borderRight() const;
width()和height()方法获得包括边界在内的盒子宽度和高度。
int width() const;
int height() const;
int width() const;
int height() const;
客户盒子(client box)是盒子(box)除边框和滚动条之外但包括填充在内的区域。
int clientLeft() const { return borderLeft(); }
int clientTop() const { return borderTop(); }
int clientWidth() const;
int clientHeight() const;
int clientLeft() const { return borderLeft(); }
int clientTop() const { return borderTop(); }
int clientWidth() const;
int clientHeight() const;
内容盒子(content box)用来表示CSS盒子除边框和填充之外的区域。
IntRect contentBox() const;
int contentWidth() const { return clientWidth() - paddingLeft() - paddingRight(); }
int contentHeight() const { return clientHeight() - paddingTop() - paddingBottom(); }
IntRect contentBox() const;
int contentWidth() const { return clientWidth() - paddingLeft() - paddingRight(); }
int contentHeight() const { return clientHeight() - paddingTop() - paddingBottom(); }
当盒子有垂直或这水平滚动条时,它们放在填充和边框之间,滚动条的宽度和高度包括在client宽度和client高度中。滚动条不是内容盒子(content box)的组成部分。可滚动区域的尺寸和当前滚动的位置都可以从RenderObject获得。我将在关于滚动的另一章节详细阐述。
int scrollLeft() const;
int scrollTop() const;
int scrollWidth() const;
int scrollHeight() const;
int scrollLeft() const;
int scrollTop() const;
int scrollWidth() const;
int scrollHeight() const;
盒子(box)还有x和y位置,这些位置都是相对于祖先节点的,它们负责决定盒子(box)放在何处。但存在一些例外,这也是渲染树让人难以理解的领域之一。
int xPos() const;
int yPos() const;
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/keensword007/archive/2010/08/30/5849899.aspx
WebCore中的渲染机制(一):基础知识相关推荐
- html事件机制,浅析JavaScript中的事件机制_基础知识
事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任 ...
- WebCore中的渲染机制(二):块和内嵌(Blocks and Inlines)
http://webkit.org/blog/115/webcore-rendering-ii-blocks-and-inlines/
- python编程中常用的12种基础知识总结
python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
- python编程基础知识点总结_【转载】Python编程中常用的12种基础知识总结
Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
- Python 编程中常用的12种基础知识总结
Python 编程中常用的12 种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出 ...
- 计算机操作员 国家题库,计算机操作员中最新国家题库基础知识部分.doc
计算机操作员中最新国家题库基础知识部分 第1章 信息技术原理概述PAGE PAGE 22国家职业资格培训教程配套辅导练习第一章 信息技术原理概述计算机的概念.分类及应用1.信息革命的概念 迄今为止,人 ...
- 微型计算机中 奔三 指,计算机基础知识180题.docx
文档介绍: 计算机基础知识180题 1.在微型计算机中,微处理器芯片上集成的是控制器和运算器. 2.下列叙述中,正确的一条是温度是影响计算机正常工作的重要因素.文档收集自网络,仅用于个人学****3. ...
- python中prompt的意思_Python 基础知识入门
一.学习python数据分析前的准备工作:下载Anaconda anaconda是一个包管理器和环境管理器,其内置的jupyter notebook 功能非常强大,可以在jupyter noteboo ...
- 计算机基础知识中真值是什么,计算机基础知识(一)
计算机基础知识(一) (2009-11-05 10:23:34) 标签: 教师招聘 考试材料 计算机 基础知识 教育 一 选择题 1. 在下面关于计算机系统硬件的说法中,不正确的是_______. A ...
最新文章
- 【Android 逆向】应用安装目录 ( Android 应用的默认安装目录 | 查找 Android 应用的安装目录 | 查询当前正在运行的应用包名 | 根据包名查询应用安装路径 )
- SpringBoot基础系列-SpringCache使用
- 如何通过github提升自己
- linux网络协议栈之数据包处理过程,Linux网络协议栈之数据包处理过程
- 「C++: Eigen」学习笔记
- 201571030322/201571030319《小学生四则运算软件需求说明结对项目报告》
- 從三種方式看SQL的使用程度
- GetDisplayName 获取枚举的显示值
- 【CodeForces - 527C】Glass Carving(线段树或者SBT或者set)
- C#中几种数据库的大数据批量插入
- Python 第三方模块之 NumPy - 科学计算
- Web前端开发工程师必读de设计博客
- List vs IEnumerable vs IQueryable vs ICollection vs IDictionary
- vb用数组方式快速导出MSFlexGrid表格数据到Excel表格中
- 洛谷——P1008 [NOIP1998 普及组] 三连击
- Linux运维工程师工作内容总结
- 阿里AI天池大赛-贷款违约预测-基于CatBoost十折交叉验证
- 西门子PLC的常见的通讯方式
- VMware虚拟机安装Kali破解WiFi密码
- Http协议的身份认证
热门文章
- ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图
- sysbench压力测试工具简介和使用(一)
- git 版本控制系统初学
- 计算广告 读书笔记 计算广告的核心问题
- ApplicationContextAware
- JAVA中深拷贝与浅拷贝(在网上找到的) 希望对于理解深拷贝与浅拷贝有帮助...
- SharePoint 2007 URL地址快速一览表
- 面向对象的三大特征,封装、继承、多态的个人理解以及代码分析
- Docker与CI持续集成/CD(转)
- SqlSugar与Fluent NHibernate的性能测试对比