jQuery的show/hide性能測(cè)試

canger 發(fā)布于2019-08-19 18:38 / 2061人閱讀

摘要：原文地址這篇文章是各種方式的性能測(cè)試。但由于未能找問(wèn)明原因，所以作者就自己去做了這個(gè)測(cè)試。主要原因在于方法必須先保存元素的屬性，這樣才能把元素恢復(fù)到原來(lái)的狀態(tài)。根據(jù)源代碼上的注釋，這樣做是為了防止瀏覽器在每個(gè)循環(huán)上進(jìn)行重新渲染。

原文地址：http://www.php100.com/html/webkaifa/javascript/2012/0927/11164.html
這篇文章是jQuery各種show/hide方式的性能測(cè)試。作者之所以測(cè)試這個(gè)源于Robert Duffy在SanFrancisco舉行的jQuery大會(huì)上的一句話：“.hide()和.show()的執(zhí)行速度會(huì)比直接改變css慢”。但由于未能找RobertDuffy問(wèn)明原因，所以作者就自己去做了這個(gè)測(cè)試。下面的翻譯并不是全文翻譯，只節(jié)選了一些重點(diǎn)。

用作測(cè)試的是一個(gè)含有100個(gè)div的HTML頁(yè)面，div帶有class和一些內(nèi)容。為了排除掉尋找這些div所花費(fèi)的時(shí)間，所以把選擇器$("div")緩存起來(lái)了。用作測(cè)試的jQuery版本是1.4.2，所以測(cè)試結(jié)果也只是針對(duì)這個(gè)版本，在其他版本可能就不是這些結(jié)果了。
測(cè)試的jQuery方法分別是：

.toggle()
.show() 和 .hide()
.css({"display":"none"}) 和 .css({"display":"block"})
.addClass("hide") 和 .removeClass("hide")

改變

Special hide DIV

然后在javascript里：

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

搞定！所有帶有"special_hide"這個(gè)class的元素都顯示出來(lái)了。要隱藏它們，你只需要……

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

現(xiàn)在它們?nèi)慷茧[藏了。總的javascript耗時(shí)在所有瀏覽器上都是0-1ms。你的javascript只是用來(lái)改變一個(gè)屬性。當(dāng)然，瀏覽器還是需要花費(fèi)時(shí)間去重新渲染頁(yè)面的，但是實(shí)際上你已經(jīng)避免了javascript的處理時(shí)間。如果你調(diào)用了.toggle()，.hide()或者.css()這幾個(gè)方法，那么這個(gè)方法就會(huì)失效。因?yàn)槟菐讉€(gè)方法會(huì)通過(guò)內(nèi)聯(lián)方式設(shè)置css樣式，這些樣式有更高的優(yōu)先級(jí)。要重新使這個(gè)方法生效，只需調(diào)用.css("display", "")把內(nèi)聯(lián)的樣式移除掉。這個(gè)方法同樣需要花費(fèi)你更多的精力，因?yàn)槟切枰ザxclass，同時(shí)把這些class賦給頁(yè)面上需要進(jìn)行顯示/隱藏的元素，但是如果你所要處理的元素?cái)?shù)量是極其龐大的話，那么這也許是值得的。
簡(jiǎn)要回顧一下，下面是改變?cè)仫@示狀態(tài)的方法，按照最快到最慢的次序排列：

禁用/啟用樣式表
.css("display", ""), .css("display", "none")
.addClass(), .removeClass()
.show(), .hide()
.toggle()

需要注意的是，在大多數(shù)的情況下，這些方法都足夠的快了。當(dāng)你要操作很大的jQuery集合時(shí)，那么.show() 和.hide()方法在IE下就會(huì)變得很慢了，這是你可能要用addClass() 或者 .removeClass()方法。禁用/啟用樣式表的方法只有在很極端的情況下才有必要用到