归家了,博客都没怎么更新,感觉有些不适应了。这几天忙里偷闲,研究了下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的具体使用方式: 首先用Firefox3.5以上的版本(因为MozAfterPaint事件是在3.5版本之后才受支持的)下载Repaint Test文件:Repaint Test,直接点击链接就可以安装了。 打开firebug主界面,其中就有一个叫“Repaint Test”的面板,点击它,就出现了它的操作按钮组: Repaint Test面板下面有“Self start record”、“Start”、“Stop and Show”、“Clear”按钮,同时面板右边还有下拉菜单,提供了“Configuration”、“Zoom(文字大小)”、“Help”等功能。顾名思义,Configuration是用于配置扩展内部的一些属性。 “Self start record”按钮用于在页面加载后,在设置的时间内自动开始记录Repaint区域数据;“Start”按钮用于手动设置记录Repaint的开始;“Stop and Show”用于停止记录Repaint区域数据并显示Repaint区域(红色高亮显示),这里有定时器来显示每一个记录的Repaint数据。“Clear”按钮用于清空输出内容。 … 了解更多