WebKit渲染基础之Render树的建立
来源:互联网 发布:高仿椰子 知乎 编辑:程序博客网 时间:2024/06/08 10:31
WebKit是一个渲染引擎,而不是一个浏览器,它专注于网页内容展示,其中渲染是其中核心的部分之一。这里着重于对渲染部分的基础进行一定程度的了解和认识,主要理解基于DOM树来介绍Render树和RenderLayer树的构建由来和方式。
那么什么是DOM?简单来说,DOM是对HTML或者XML等文档的一种结构化表示方法,通过这种方式,用户可以通过提供标准的接口来访问HTML页面中的任何元素的相关属性,并可对DOM进行相应的添加、删除和更新操作等。更多相关信息可查阅W3C的文档。
基于DOM树的一些可视(visual)的节点,WebKit来根据需要来创建相应的RenderObject节点,这些节点也构成了一颗树,称之为Render树。基于Render树,WebKit也会根据需要来为它们中的某些节点创建新的RenderLayer节点,从而形成一棵RenderLayer树。
Render树和RenderLayer树是WebKit支持渲染所提供的基础但是却非常重要的设施。这是因为WebKit的布局计算依赖它们,浏览器的渲染和GPU硬件加速也都依赖于它们。幸运地是,得益于它们接口定义的灵活性,不同的浏览器可以很方便地来实现自己的渲染和加速机制。
为了直观了解这三种树,下图给出了这三种树及其它们之间的对应关系,后面会详细介绍里面的细节。
Render树的建立
Render树是基于DOM树建立起来的一颗新的树, 是布局和渲染等机制的基础设施。 Render树节点和DOM树节点不是一一对应关系,那么哪些情况下需要建立新的Render节点呢?
- DOM树的document节点;
- DOM树中的可视化节点,例如HTML,BODY,DIV等,非可视化节点不会建立Render树节点,例如HEAD,META,SCRIPT等;
- 某些情况下需要建立匿名的Render节点,该节点不对应于DOM树中的任何节点;
RenderObject对象在DOM树创建的同时也会被创建,当然,如果DOM中有动态加入元素时,也可能会相应地创建RenderObject对象。下图示例的是RenderObject对象被创建的函数调用过程。
Render树建立之后,布局运算会计算出相关的属性,这其中有位置,大小,是否浮动等。有了这些信息之后,渲染引擎才只知道在何处以及如何画这些元素。
RenderObject类及其子类
RenderObject是Render树的节点基础类,提供了一组公共的接口。它有很多的子类,这些子类可能对应一些DOM树中的节点,例如RenderText,有些则是容器类,例如RenderBlock。下图给出了一些常用的类的继承关系图,这其中RenderBlock是一个非常重要的类。
匿名RenderBlock对象
CSS中有块级元素和内嵌(inline)元素之分。内嵌元素表现的是行布局形式,就是说这些元素以行进行显示。以 div 元素为例,如果设置属性 style 为 display:inline 时,则那是内嵌元素,那么它可能与前面的元素在同一行;如果该元素没有设置这个属性时,则是块级元素,那么在新的行里显示。
RenderBlock用来是用来表示块级元素, 为了处理上的方便,某些情况下需要建立匿名的RenderBlock对象,因为RenderBlock的子女必须都是内嵌的元素或者都是非内嵌的元素。所以,当它包含两种元素的时候,那么它会为相邻的内嵌元素创建一个块级RenderBlock节点,然后设置该节点为自己的子女并且设置这些内嵌元素为它的子女。
源引:http://www.nowamagic.net/academy/detail/48110557
- WebKit渲染基础之Render树的建立
- WebKit渲染基础之Render树的建立
- 理解WebKit和Chromium: WebKit渲染基础 Render树和RenderLayer树
- WebKit渲染基础之RenderLayer树
- WebKit之Chromium的Render进程分析
- 渲染树render tree
- 理解WebKit和Chromium: WebKit渲染基础
- 理解WebKit和Chromium: WebKit渲染基础
- 理解WebKit和Chromium: WebKit渲染基础 .
- 理解WebKit和Chromium: WebKit渲染基础
- 理解WebKit和Chromium: WebKit渲染基础
- vuejs的render渲染函数
- Webkit生成一个render节点的过程
- Chrome页面渲染的GPU加速技术 - 基础:WebKit软件渲染模式
- Ext组件渲染render的全过程详述
- Ext组件渲染render的全过程
- Ext组件渲染render的全过程
- Django的render(模板渲染)机制
- Ubuntu 查看内存信息
- 黑马程序员——java基础 io 转换流的应用(InputStreamReader,OutputStreamWriter)
- 大写读入,小写输出
- 程序员:其实我个人也只是偶尔写些东西
- UVA - 10635 Prince and Princess
- WebKit渲染基础之Render树的建立
- Activity的复习以及在Onstart里设置网络连接
- 2015年Ubuntu最新Redmine的安装和配置
- Fibonacci数列
- TCP标志中的URG和PSH位
- hdu 5037 Frog(贪心)
- Object - C运行时应用(一)—— 拦截系统自带的方法交换实现
- openCL错误码
- 各种排序算法的稳定性和时间复杂度小结