« 上一篇下一篇 »

CSS选择性能之回流时间

 对于Web2.0应用来说,更应考验当用户网页交互时,浏览器应用样式和布局元素所花费的时间。这又叫做回流时间。
使用JavaScript修改DOM元素样式的某些属性时会触发回流。对于这个叫elem的DOM元素,下面的每行代码在大多数浏览器中都会触发回流:

elem.className=”newclass”;

elem.style.cssText=”color:red”;

elem.style.padding=”8px”;

elem.style.display=””;

这不仅仅是一个子集,能触发回流的列表太长了。Web2.0应用的动态性令其很容易就触发回流。回流并不需要涉及页面上的所有元素,浏览器已为此进行了优化,仅仅只对那些受回流影响的元素重新布局。在前面的例子中,如果elem是文档的body或其他一些有很多后代的元素,那么回流的开销一定会相当高。

回流需要重新应用CSS规则,这意味着浏览器必须再次匹配所有的CSS选择符测试示例都有一个测试回流的按钮。点击后,正如前面代码最后一行所示,body的display属性会被切换,执行回流所消耗的时间会显示在按钮旁边。

因此对于杜绝低效CSS选择符的影响,不仅仅要考虑页面加载时间,也要考虑用户和Web2.0应用交互时如何使用样式进行表现,这一点非常重要。如果JavaScript对样式属性有操作,且页面开始变慢,那么低效的CSS选择符就很可能是罪魁祸首。

在现实中测量CSS选择符

为了通过优化CSS 选择符可能得打的性能提升,我们可以测量回流时间。使用LindseySimon的回流计时器可以很容易地对现有网页进行测试。它是一个能再所有网页进行测试。它是一个能在所有主流浏览器中运行的书签工具。运行时,它切换了body的display属性并显示平均回流时间。

« 上一篇下一篇 »