jQuery各种show/hide方式的性能测试

这篇文章是jQuery各种show/hide方式的性能测试。作者之所以测试这个源于Robert Duffy在San Francisco举行的jQuery大会上的一句话：“.hide()和.show()的执行速度会比直接改变css慢”。但由于未能找Robert Duffy问明原因，所以作者就自己去做了这个测试。下面的翻译并不是全文翻译，只节选了一些重点。

用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器$('div')缓存起来了。用作测试的jQuery版本是1.4.2，所以测试结果也只是针对这个版本，在其他版本可能就不是这些结果了。

测试的jQuery方法分别是：

• .toggle()
• .show() 和 .hide()
• .css({'display':'none'}) 和 .css({'display':'block'})
• .addClass('hide') 和 .removeClass('hide')
• 改变<style>元素的一个属性

.show() 和 .hide()

在所有浏览器中，这两个方法在隐藏DOM元素上相对来说比较慢。主要原因在于.hide()方法必须先保存元素的"display"属性，这样.show()才能把元素恢复到原来的状态。这里用到了.data()这个jQuery方法，把信息保存在DOM元素上。为了达到这个目的，.hide()在每个元素上循环了两次，一次用来保存当前的"display"值，一次用来更新样式"display" 为"none"。根据源代码上的注释，这样做是为了防止浏览器在每个循环上进行重新渲染（reflow）。.hide()方法还会检查你是否传递了使用动画效果的参数，就算传入一个"0"也会让性能大打折扣。在第一次调用.hide()的时候性能最慢，在之后再调用则会变快。

Browser	hide/show
FireFox 3.6	29ms / 10ms
Safari 4.05	6ms / 1ms
Opera 10.10	9ms / 1ms
Chrome 5.0.3	5ms / 1ms
IE 6.0	31ms / 16ms
IE 7.0	15ms / 16ms

.toggle()

这个方法是最慢的。它会检查选择器返回的每一个元素当前是否可见，如果可见的话就调用.hid