Repaint 跟踪浏览器的渲染 | 影の域

影の域

关注web前端,追逐html5脚步,体会code人生

Repaint 跟踪浏览器的渲染

| 3,890 点击

前端优化,从很久就开始了。随着研究的深入,关注的点就越来越多。最近也有不少的前端开发同学在研究浏览器的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