浏览器内核分析6 -- 布局和绘制
来源:互联网 发布:阅读文件的软件 编辑:程序博客网 时间:2024/05/11 15:24
DOM树构建完成后,就开始构建RenderObject树了。渲染过程分为布局和绘制两个阶段,最终得到用户可见区域(ViewPort)图像在内存中的表示Bitmap。
1 RenderObject
RenderObject是渲染树中的子节点,也是RenderText,RenderImage等很多渲染树节点的基类,所以比较关键。
主要方法
- 递归遍历等操作,如parent(), firstChild(), nextSibling(), previousSibling()等
- 计算布局和获取布局相关信息,如layout(), style(), enclosingBox()
- 判断RenderObject对象属于哪种类型的子类,如IsASubClass()
- 坐标和绘图相关,如paint(), repaint()等。
子类
每个渲染对象用一个CSS盒模型对应的矩形区域来表示,包含宽高和位置之类的信息。盒模型受display属性影响, 根据它的值生成RenderInline RenderBlock等对象,他们都是RenderObject子类.
对于Text,Image等元素,分别有RenderText RenderImage等对象与之对应,他们也是RenderObject子类
与DOM对应关系
RenderObject树和DOM树的节点基本上是一一对应,但也有例外
- 不可见DOM节点没有RenderObject,如display: none的节点(display: hidden表示的有),head节点等。
- 复杂的DOM节点有多个RenderObject与之对应。如select节点,它对应显示区域,下拉列表和按钮三个RenderObject对象。
下面是一个对应关系的例子
2 布局
Webkit根据框模型来计算每个RenderObject的宽高和位置信息,这一过程称为布局。(对应到Android中的measure和layout两个阶段)。
布局是一个递归过程,从root开始,因此是一个很耗时耗内存的过程。大概分为下面几个步骤
- 主要由RenderObject的layout()函数完成。先判断节点是否需要重新计算。一个渲染对象发生变化了,就会给它的dirty bit做标记。渲染对象或者它的任何一个子节点如果有dirty bit标记,都会重新layout。
- parent对象会决定渲染对象的宽度,如100%则表示和父对象宽度一致。
- 递归遍历每个子节点,依次计算它们的布局。这个过程完成了才能知道父节点的高度。
- 得到宽高后,根据position属性可以计算得到它的位置信息。
3 绘制
绘制顺序
布局阶段完成后,就会开始绘制阶段了。此处的绘制是生成用户可见区域(ViewPort)的界面图像,保存在内存中。真正的图形绘制到界面上则是在你Browser进程中完成。绘制的过程大概分为下面几个步骤
- 绘制元素背景和边框
- 绘制浮动内容
- 绘制前景,也就是content,padding,border等。
增量绘制
第一次绘制时,需要绘制整颗RenderObject树。之后用户交互过程中(如滑动屏幕),则只需要绘制改变的部分即可。
渲染方式
分为两种,CPU软件合成和GPU硬件绘制。CPU软件合成可以利用增量绘制,适合不复杂的2D图形。GPU硬件绘制充分利用了并发优势,速度快,在显存中进行,但每次需要绘制整个图像,适合复杂的3D绘制和H5动画。
- 浏览器内核分析6 -- 布局和绘制
- 浏览器内核分析5 -- CSS解释器和样式布局
- 浏览器内核分析
- 浏览器内核分析对比
- 浏览器的布局绘制与DOM操作
- 浏览器内核分析2 -- Webkit和Chromium源码结构
- 浏览器内核分析3 -- 资源加载和网络栈
- 浏览器内核分析4 -- HTML解释器和DOM模型
- 浏览器内核和种类
- 浏览器内核分析1 -- 概述
- Android应用程序窗口Activity的测量Measure布局Layout和绘制Draw过程分析
- 浏览器内核和js引擎
- 各个浏览器内核和前缀
- 浏览器内核信息汇总和
- 尽量减少重新绘制和重新布局
- iOS UI绘制和布局基础解析
- android布局优化和绘制优化
- 几种常见浏览器的内核分析
- JS阻止父层事件(JS冒泡问题)
- GDOI2017模拟2.16
- HDU 1058 Humble Numbers -
- 学习Linux的小技巧----如何在Linux的CLI下快捷复制上一条指令
- 《SQL语法大全》
- 浏览器内核分析6 -- 布局和绘制
- ZooKeeper二:客户端使用
- Android控件之TextView
- 电脑网页打不开但qq能用的dns解析刷新办法
- Elasticsearch集群管理、优化以及监控
- Bootstrap 表单
- JAVA蓝桥杯(18)取球博弈
- java 语法
- 半年总结--不断的变化