jQuery的show/hide性能测试

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

用作测试的是一个含有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')
改变   

然后在Javascript里：

1   $('#special_hide').attr('disabled, 'true');

搞定！所有带有"special_hide"这个class的元素都显示出来了。要隐藏它们，你只需要……

1   $('#special_hide').attr('disabled', 'false');

现在它们全部都隐藏了。总的Javascript耗时在所有浏览器上都是0-1ms。你的Javascript只是用来改变一个属性。当然，浏览器还是需要花费时间去重新渲染页面的，但是实际上你已经避免了Javascript的处理时间。如果你调用了.toggle()，.hide()或者.css()这几个方法，那么这个方法就会失效。因为那几个方法会通过内联方式设置css样式，这些样式有更高的优先级。要重新使这个方法生效，只需调用.css('display', '')把内联的样式移除掉。这个方法同样需要花费你更多的精力，因为那需要去定义class，同时把这些class赋给页面上需要进行显示/隐藏的元素，但是如果你所要处理的元素数量是极其庞大的话，那么这也许是值得的。
简要回顾一下，下面是改变元素显示状态的方法，按照最快到最慢的次序排列：

禁用/启用样式表
.css('display', ''), .css('display', 'none')
.addClass(), .removeClass()
.show(), .hide()
.toggle()

需要注意的是，在大多数的情况下，这些方法都足够的快了。当你要操作很大的jQuery集合时，那么.show() 和.hide()方法在IE下就会变得很慢了，这是你可能要用addClass() 或者 .removeClass()方法。禁用/启用样式表的方法只有在很极端的情况下才有必要用到