reflow & repaint
DESCRIPTION
the reflow and the repaint of the browserTRANSCRIPT
浏览器的线程
1 ofContact MeQQ: 185766516 E-mail: [email protected]
浏览器内核允许多线程异步执行，这些线程相互进行通信、相互配合以实现同步。常驻线程有以下 3 个：
GUI 渲染线程 :
该线程主要负责渲染页面中的 HTML 元素，当界面需要重绘或由于某种操作引发回流时，该线程就会执行。
JavaScript 引擎线程 :
JavaScript 线程是基于事件驱动单线程执行的。这意味着同一时间只有一句脚本在执行，而所有的异步事件都
被强制排队等待执行。
事件触发线程 :
当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JS 引擎的处理。
11
线程之间的关系
2 of 11Contact MeQQ: 185766516 E-mail: [email protected]
GUI 线程与 JavaScript 引擎线程是互斥的。也就是说，在 JavaScript 引擎运行脚本期间， GUI 线程一直处
于挂起状态。
所以，在脚本中执行对界面进行更新操作，如添加结点，删除结点或改变结点的外观等更新并不会立即体现出
来。 GUI 的更新会被保存在一个队列中，待 JavaScript 引擎空闲时立即执行。
JavaScript 引擎线程一直在等待加入事件队列中的事件，一有事件加入，立即执行。
Interval Interval Timer Mouse Click Callback
JavaScript Callback
JavaScript 引擎线程
GUI 渲染线程（冻结）事件触发线程（捕获各种事件）
正在运行
浏览器的渲染过程
3 ofContact MeQQ: 185766516 E-mail: [email protected]
1. 解析 HTML 代码并生成一个 DOM 树。
2. 解析 CSS 样式，顺序为：浏览器默认样式 -> 自定义样式 -> 页面内的样式
3. 生成一个渲染树（不包括不可见的节点）。
4. 当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。
HTML 代码
CSS 样式
DOM 树
样式结构
渲染树 Paint ！
11
例子：
4 ofContact MeQQ: 185766516 E-mail: [email protected]
请先看一个简单的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>A simple page</title>
<link rel="stylesheet" href="css/main.css" type="text/css"
media="screen" />
</head>
<body>
<img src="img/d2_180x250.jpg" alt="D 平方 " />
<div id="mod1">Mod1</div>
<div id="mod2">Mod2</div>
<script src="js/util.js" type="text/javascript" ></script>
<script type="text/javascript">
var el = id('mod1');
hide(el);
</script>
</body>
</html>
11
例子：
5 ofContact MeQQ: 185766516 E-mail: [email protected]
向服务器发出 HTML 文件的请求
发现一个 <link> 标签引用外部 CSS 文件
发出 CSS 文件的请求CSS 文件到手，开始渲染页
面
发现一个 <img> 标签引用了一张图片
向服务器发出图片文件请求
不等图片下载完，继续渲染后面的代码
图片影响了后面元素的排布，回过头来重新渲染这部
分代码
11
浏览器的 Reflow 和 Repaint
6 ofContact MeQQ: 185766516 E-mail: [email protected]
页面打开缓慢的原因是多方面的：服务器响应、网络质量、 JS 阻塞等等。
其中一个跟浏览器有关的原因，那就是浏览器需要花时间、花精力去渲染。当它发现某个部分发生了变化影响了
布局，需要倒回去重新渲染，我们就称这个回退的过程叫 Refl ow 。
只要某些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起这些元素内部、周围
甚至整个页面的重新渲染。
Repaint 比较好理解，其实就是浏览器根据重新计算的各个属性值对页面的部分元素进行重新绘制。
如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器
Repaint 。 Repaint 的速度明显快于 Refl ow （在 IE 下需要换一下说法， Refl ow 要比 Repaint 更缓慢 -
0- ）。
11
引起 Reflow 和 Repaint 的因素
7 ofContact MeQQ: 185766516 E-mail: [email protected]
• Resize 浏览器窗口、滚动页面
• 字体的改变（大小，颜色，行高等）
• 添加 / 删除一个样式表
• 应用新的样式或者修改任何影响元素外观的属性
• 伪类（例如： hover ）
• DOM 元素的添加、修改（内容）、删除
• 读取元素的某些属性（ off setLeft 、 off setTop 、 off setHeight 、 off setWidth 、
scrollTop/Left/Width/Height 、 clientTop/Left/Width/Height 、
getComputedStyle() 、 currentStyle(in IE))
11
如何尽量减少 Reflow 和Repaint ？
8 ofContact MeQQ: 185766516 E-mail: [email protected]
• 尽可能限制 reflow 的影响范围。
• 如果通过设置 style 属性改变结点样式，每设置一次都会导致一次 reflow 。所以最好通过设置 class 的方式。
• 实现元素的动画，它的 position 属性应当设为 fixed 或 absolute ，这样不会影响其它元素的布局。
• 在效果和性能上取得平衡。
• 不要用 tables 进行布局。 Table 的子元素只要有一个触发了 reflow ，会导致整个表格的其他元素都发生 reflow ，而
且它产生 reflow 的时间，是其他 block 元素的 reflow 的 3倍。在适合使用 table 的场合，定义 table-layout 的属性
值为 auto 或 fixed ，让其一行一行输出。
• 避免在 CSS 中使用表达式。如果 CSS里有 expression ，每个 expression 都会导致 CSS 重新计算一遍。很多情况
下都会触发 reflow 。
• 页面上尺寸可以确定的元素，例如图片，文本框等等，最好为其定义高度和宽度。
11
如何尽量减少 Reflow 和Repaint ？
9 ofContact MeQQ: 185766516 E-mail: [email protected]
• 避免在 document 上直接进行频繁的 DOM 操作，如果确实需要可以采用 off-document 的方式进行。
(1). 先将元素从 document 中删除，完成修改后再把元素放回原来的位置
(2). 将元素的 display设置为” none” ，完成修改后再把 display修改为原来的值
(3). 如果需要创建多个 DOM 节点，可以使用 DocumentFragment创建完后一次性的加入 document
• 集中修改样式。
(1). 尽可能少的修改元素 style 上的属性
(2). 尽量通过修改 className 来修改样式
• 缓存 Layout 属性值。这样可以避免每次读取属性时造成浏览器的渲染。
11
小结
10 ofContact MeQQ: 185766516 E-mail: [email protected]
本次交流会旨在简单阐述了浏览器的工作原理、渲染过程、回流和重绘产生的原因以及如何减少过多的回流和重绘，并且
通过几个例子较为“深入”地认识了浏览器的回流和重绘。
网页的优化是一个繁琐而又困难的过程，其间存在太多不可预料的因素，而针对浏览器所作的优化只是冰山一角，还有许
许多多方面需要我们深入去探讨和挖掘，希望本文对您有所帮助。
因时间仓促，难免出现纰漏，欢迎大家多提建议。
11
参考文献
11 ofContact MeQQ: 185766516 E-mail: [email protected]
Note on HTML Reflow
链接： http://www.mozilla.org/newlayout/doc/reflow.html
Reflows & Repaints: CSS Performance making your JavaScript slow?
链接：
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascrip
t-slow/
Efficient JavaScript - Dev.Opera
链接： http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow
Understanding Internet Explorer Rendering Behaviour
链接： http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/
11
