原文地点：http://www.php100.com/html/webkaifa/javascript/2012/0927/11164.html
这篇文章是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')
转变<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()
这个要领是最慢的。它会搜检挑选器返回的每一个元素当前是不是可见，假如可见的话就挪用.hide()要领，不可见则挪用.show()要领。不但如此，它不仅会搜检你是不是传递了一个boolean值进去阻挠.hide()或许.show()的实行，还会搜检看你是不是传入了function来举行切换（toggle）而不是对可见性举行切换。看起来这个要领另有很大的改良空间，比方能够先一次过把隐蔽的元素select出来，然后挪用.show()要领，同时把其他的元素select出来挪用.hide()要领。
Browser hide/show
FireFox 3.6 80ms / 59ms
Safari 4.05 24ms / 30ms
Opera 10.10 67ms / 201ms
Chrome 5.0.3 55ms / 20ms
IE 6.0 296ms / 78ms
IE 7.0 328ms / 47ms
.addClass() 和 .removeClass()
这是两个很漂亮的隐蔽/显现DOM元素要领。在Firefox上它的速率是.show()和.hide()的两倍，而在Safari上则是三倍。不过在IE6，IE7，Chrome和Opera上，两种要领险些没什么差别。值得一提的是，关于100个DOM节点来讲，两种要领在Firefox上相差18ms，在Safari相差4ms，速率的差别只会体如今大批节点挑选的时候。不过增添和移除class须要你消费更多的事变，由于你须要建立一个用于隐蔽的class，然后还要时候关注着这个class的优先级以保证DOM能隐蔽。jQuery增添和移除class是经由过程字符串操纵的，所以我以为跟着元素上class数目的增添，这个要领会变慢，然则我还没对此举行测试过。
Browser hide/show
FireFox 3.6 11ms / 11ms
Safari 4.05 2ms / 2ms
Opera 10.10 6ms / 3ms
Chrome 5.0.3 3ms / 1ms
IE 6.0 47ms / 32ms
IE 7.0 15ms / 16ms
.css({‘display’:’none’}) 和 .css({‘display’:’block’})
这两个要领也很漂亮。相关于.addClass()和.removeClass()，IE6/7和Opera上的速率都得到了提拔，而在其他浏览器上则能坚持水准。当你晓得要转变的元素的当前display款式，或许没有经由过程inline的体式格局去转变元素的display款式时，这两个要领很好用。假如你经由过程inline的体式格局转变了display款式，那末你须要确保在使得元素从新可见时display值要设置准确。假如你只是运用了元素的默许display值或许在css里设置display值，那末你只须要用相似.css({‘display’:”})的要领移除款式，元素就会恢复到它在css上的款式或许默许display值。作为一个类库，jQuery不能假定元素的display不是经由过程inline体式格局设置的，所以它须要被人手的去肯定。不过既然你晓得你不会去inline的设置display，那末你就能够去防止这个形成迟缓的主要因素。
Browser hide/show
FireFox 3.6 14ms / 12ms
Safari 4.05 2ms / 1ms
Opera 10.10 2ms / 2ms
Chrome 5.0.3 2ms / 1ms
IE 6.0 16ms / 16ms
IE 7.0 0ms / 0ms // 少于15ms会变成0ms
制止款式表
地道为了好玩，我想：假如我们不在每一个dom节点上花工夫，而是去捣鼓款式表会如何呢？如许会进步速率吗？着实就一样平常运用来讲，上面的测试用到的要领已充足快了，然则假如页面上有10000个节点须要举行隐蔽和显现呢？只是把它们悉数挑选出来就已够慢了。假如我能够掌握款式表，那末就能够完全防止这些时候消费了。不过我得通知你，这个要领是有很大风险的。
风险在于掌握款式表时的跨浏览器题目。起首，我尝试能不能经由过程jQuery插进去一个带有class的”style”标签，然则却涌现了跨浏览器题目。然后我尝试用javascript去建立stylesheet节点和class，然则着实有太多的API了，要搞清楚须要花不少的时候。末了，摒弃了编程的体式格局，我在head区里写了一个带有class的style标签。经由过程编程的体式格局来建立stylesheet着实是太慢了，然则假如它一旦被建立好，那末给它一个ID和运用它的”disabled”属性就是易如反掌的事变了。
1 2 3 <style id=”special_hide”>.special_hide { display: none; }</style> <!– … –> <div class=”special_hide”>Special hide DIV</div>
然后在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()要领。禁用/启用款式表的要领只要在很极度的情况下才有必要用到
