浏览器工作原理(八):绘制(Painting)
来源:互联网 发布:mac版finale怎么激活 编辑:程序博客网 时间:2024/05/23 01:06
绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件,这在UI的章节有更多的介绍。
全局和增量
和布局一样,绘制也可以是全局的——绘制完整的树——或增量的。在增量的绘制过程中,一些渲染对象以不影响整棵树的方式改变,改变的渲染对象使其在屏幕上的矩形区域失效,这将导致操作系统将其看作dirty区域,并产生一个paint事件,操作系统很巧妙的处理这个过程,并将多个区域合并为一个。Chrome中,这个过程更复杂些,因为渲染对象在不同的进程中,而不是在主进程中。Chrome在一定程度上模拟操作系统的行为,表现为监听事件并派发消息给渲染根,在树中查找到相关的渲染对象,重绘这个对象(往往还包括它的children)。
绘制顺序
css2定义了绘制过程的顺序——http://www.w3.org/TR/CSS21/zindex.html。这个就是元素压入堆栈的顺序,这个顺序影响着绘制,堆栈从后向前进行绘制。
一个块渲染对象的堆栈顺序是:
1. 背景色
2. 背景图
3. border
4. children
5. outline
Firefox显示列表
Firefox读取渲染树并为绘制的矩形创建一个显示列表,该列表以正确的绘制顺序包含这个矩形相关的渲染对象。
用这样的方法,可以使重绘时只需查找一次树,而不需要多次查找——绘制所有的背景、所有的图片、所有的border等等。
Firefox优化了这个过程,它不添加会被隐藏的元素,比如元素完全在其他不透明元素下面。
WebKit矩形存储
重绘前,WebKit将旧的矩形保存为位图,然后只绘制新旧矩形的差集。
0 0
- 浏览器工作原理(八):绘制(Painting)
- 浏览器的工作原理 (前端必读)
- 浏览器的工作原理(一)
- 浏览器内部工作原理(转)
- 浏览器工作原理(初步接触)
- 浏览器渲染原理|绘制|展现|解析|如何工作
- 浏览器是如何工作的?(工作原理)
- 浏览器是如何工作的?(工作原理)
- 浏览器是如何工作的?(工作原理)
- 浏览器是如何工作的?(工作原理)
- 浏览器是如何工作的?(工作原理)
- 浏览器是如何工作的?(工作原理)
- SOAPUI测试WSDL项目(八)---MockServices工作原理
- 浏览器工作原理(一):浏览器的整体工作流程介绍
- 浏览器工作原理(五):CSS解析(CSS parsing)
- 浏览器工作原理(七):布局(Layout)
- 浏览器工作原理(二):渲染引擎的详细介绍
- 浏览器工作原理(四):HTML解析器 HTML Parser
- 10191
- Codeforces Round #376 (Div. 2)
- 10192
- COBOL dynamic SQL access Oracle
- 《go语言编程》学习笔记三
- 浏览器工作原理(八):绘制(Painting)
- 会计学、金融学基础
- ml 3 字节的 UTF-8 序列的字节 3 无效
- 大学
- 屏蔽某字
- Classifying traffic scenes using the GIST image descriptor
- 10193
- Codeforce 731 F. Video Cards
- LeetCode150—Evaluate Reverse Polish Notation