Contenu connexe Similaire à reflow & repaint (20) reflow & repaint1. 浏览器的 回流 与 重绘
分享 by 张盛志
Contact Me
QQ: 185766516
E-mail: shengzhizhang@gmail.com
4. 浏览器的渲染过程
1. 解析HTML代码并生成一个 DOM 树。
2. 解析CSS样式,顺序为:浏览器默认样式->自定义样式->页面内的样式
3. 生成一个渲染树(不包括不可见的节点)。
4. 当渲染树生成之后,浏览器就会在屏幕上“画”出所有渲染树中的节点。
HTML代码 DOM树
渲染树 Paint!
CSS样式 样式结构
Contact Me
3 of 11 QQ: 185766516
E-mail: shengzhizhang@gmail.com
5. 例子:
请先看一个简单的页面: <img src="img/d2_180x250.jpg" alt="D平方" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <div id="mod1">Mod1</div>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div id="mod2">Mod2</div>
<html xmlns="http://www.w3.org/1999/xhtml"> <script src="js/util.js" type="text/javascript" ></script>
<head> <script type="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> var el = id('mod1');
<title>A simple page</title> hide(el);
<link rel="stylesheet" href="css/main.css" type="text/css" </script>
media="screen" /> </body>
</head> </html>
<body>
Contact Me
4 of 11 QQ: 185766516
E-mail: shengzhizhang@gmail.com
6. 例子:
向服务器发出HTML文 发现一个<link>标签引 CSS文件到手,开始渲
发出CSS文件的请求
件的请求 用外部CSS文件 染页面
图片影响了后面元素的
不等图片下载完,继续 向服务器发出图片文件 发现一个<img>标签引
排布,回过头来重新渲
渲染后面的代码 请求 用了一张图片
染这部分代码
发现了一段JS代码,赶 某个元素被隐藏,不得
渲染完毕
快运行它! 不重新渲染这部分代码
Contact Me
5 of 11 QQ: 185766516
E-mail: shengzhizhang@gmail.com
8. 引起Reflow 和Repaint 的因素
• Resize浏览器窗口、滚动页面
• 字体的改变(大小,颜色,行高等)
• 添加/删除一个样式表
• 应用新的样式或者修改任何影响元素外观的属性
• 伪类(例如:hover)
• DOM元素的添加、修改(内容)、删除
• 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、
scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in
IE))
Contact Me
7 of 11 QQ: 185766516
E-mail: shengzhizhang@gmail.com
9. 如何尽量减少Reflow 和Repaint?
• 尽可能限制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。
• 页面上尺寸可以确定的元素,例如图片,文本框等等,最好为其定义高度和宽度。
Contact Me
8 of 11 QQ: 185766516
E-mail: shengzhizhang@gmail.com
12. 参考文献
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-javascript-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/
Contact Me
11 of 11 QQ: 185766516
E-mail: shengzhizhang@gmail.com
13. THANK YOU!
Contact Me
QQ: 185766516
E-mail: shengzhizhang@gmail.com