西红柿爱番茄

归家了，博客都没怎么更新，感觉有些不适应了。这几天忙里偷闲，研究了下firebug扩展的开发原理，倒弄了两三天，firebug的架构也确实比较复杂，而且发现Firefox下的扩展在开发中编写js代码并没有想象中的容易，平时认为合理的js代码，在Firefox的插件里跑起来，却总是会出现诸多错误，很纠结。仔细查看了firebug的源码中的xul文件，觉得firebug的架构和方法调用方式，也确实值得借鉴，语意化十足：利用xul文件来规划布局，js实现功能，css实现样式布局，properties格式的文件来储存文字信息……

《Repaint 跟踪浏览器的渲染》从这篇文章中了解到，原来Firefox还有一个独有的事件：MozAfterPaint供我们来测试页面Repaint的数据，这个事件的具体使用方式和参数设置可以查看前面给出链接中Mozilla的官方叙述。PJhome网站中给出的例子是需要通过使用Greasemonkey来自定义一个脚本，我感觉这有诸多不便：不便于操作；开始和结束等方面的不变……为此，我将这个功能集成到firebug下，基本上web开发人员都会安装firebug，所以倒是便利了许多。下面就来说说Repaint Test的具体使用方式：

1. 首先用Firefox3.5以上的版本（因为MozAfterPaint事件是在3.5版本之后才受支持的）下载Repaint Test文件：Repaint Test，直接点击链接就可以安装了。
2. 打开firebug主界面，其中就有一个叫“Repaint Test”的面板，点击它，就出现了它的操作按钮组：
   
   Repaint Test面板下面有“Self start record”、“Start”、“Stop and Show”、“Clear”按钮，同时面板右边还有下拉菜单，提供了“Configuration”、“Zoom（文字大小）”、“Help”等功能。顾名思义，Configuration是用于配置扩展内部的一些属性。
   
3. “Self start record”按钮用于在页面加载后，在设置的时间内自动开始记录Repaint区域数据；“Start”按钮用于手动设置记录Repaint的开始；“Stop and Show”用于停止记录Repaint区域数据并显示Repaint区域（红色高亮显示），这里有定时器来显示每一个记录的Repaint数据。“Clear”按钮用于清空输出内容。
4. 在这里需要明白的是：“Self start record”和“Stop and Show”按钮内部都设定了定时器，不过间隔时间可以自定义，在Configuration弹出框里可以设置。但是最后的展示输出Repaint区域数据都需要点击“Stop and Show”来完成。
   
   
5. 还有，输出的每一项Repaint的区域数据，都可以点击，再现Repaint区域的高亮效果。

在PJhome中，还介绍了IE9提供了更多开放的接口供前端开发人员进行性能测试：《IE9允许前端开发获取到页面性能数据》，Very perfect！！但是IE系列总会有很多让人抹汗的地方，IE9的这套接口能否满足以后页面性能测试的需要，还有待测试和考验。

最后，欢迎大家对这个Repaint Test扩展进行测试和提出更好的建议，尽力去完善它的功能和使它在使用上更加的简便……