Repaint 跟踪浏览器的渲染

 

前端优化,从很久就开始了。随着研究的深入,关注的点就越来越多。最近也有不少的前端开发同学在研究浏览器的Reflow和Repaint . 引用以为Yahoo前端开发工程师的分析

 

repaint(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生,如改变visibility、outline、前景色。
"According to Opera , repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree."
当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。
 
reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow,都会导致它的子结点及祖先结点重新渲染。
 
 
而 Firefox 3.5 给我们提供了一个很好的观察 Repaint 的接口 MozAfterPaint. 通过这个事件,我们可以看到我们网页的渲染情况是如何,这样会给我们分析reflow带来帮助。
 
下面的例子需要 firefox 3.5 beta



[本日志由 puterjam 于 2009-05-04 00:48 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Firefox repaint reflow
相关日志:
评论: 2 | 引用: 0 | 查看次数: -
回复回复臻臻[2009-05-31 10:25 AM | del]
测试一下。
回复回复叶子呀啊[2009-05-05 01:39 PM | del]
很强的技术~~~
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.