跟踪浏览器重绘结果的脚本

之前在firefox 3.5上做了一个监控浏览器repaint跟踪的尝试。现在把之前的实验做成一个工具(GreaseMonkey 脚本),可以让大家跟踪页面的重绘情况。同时也能找到reflow的存在可能。

(监控 Google 搜索框的repaint情况)

 

查看更多...

Tags: Firefox GreaseMonkey repaint

分类:Javascript | 固定链接 | 评论: 4 | 引用: 0 | 查看次数: 1675

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,都会导致它的子结点及祖先结点重新渲染。
 

查看更多...

Tags: Firefox repaint reflow

分类:Javascript | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 2174