成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery的show/hide性能測試

canger / 2066人閱讀

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

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

用作測試的是一個(gè)含有100個(gè)div的HTML頁面，div帶有class和一些內(nèi)容。為了排除掉尋找這些div所花費(fèi)的時(shí)間，所以把選擇器$("div")緩存起來了。用作測試的jQuery版本是1.4.2，所以測試結(jié)果也只是針對這個(gè)版本，在其他版本可能就不是這些結(jié)果了。
測試的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的元素都顯示出來了。要隱藏它們，你只需要……

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79808.html

相關(guān)文章

  • 回味jQuery系列（2）-動(dòng)畫效果

    摘要：參數(shù)代表回調(diào)函數(shù)。參數(shù)為變化樣式的對象必傳，速度可選，回調(diào)函數(shù)可選。這是，肯定會想到采用回調(diào)函數(shù)來解決。確實(shí)可以解決問題，但是當(dāng)列隊(duì)動(dòng)畫變多時(shí)，回調(diào)函數(shù)的可讀性大大降低確實(shí)一個(gè)非常煩人的問題。提供了一個(gè)類似于回調(diào)函數(shù)的方法。 jQuery-動(dòng)畫效果淺析 動(dòng)畫可以給網(wǎng)站的用戶體驗(yàn)加分，讓網(wǎng)頁更加活潑。不過，什么東西都需要適量，簡易快捷的動(dòng)畫會給網(wǎng)站加分不少。比如購物網(wǎng)站的個(gè)人中心按鈕ho...

    IamDLY 評論0 收藏0

  • jQuery (二)

    摘要：文件命名需要使用的庫該庫已經(jīng)兩年未更新了，不過依舊在回復(fù)中，對于庫的檢查，已經(jīng)完全測試通過一個(gè)栗子，日期選擇將為中的元素統(tǒng)統(tǒng)替換為日期選擇組件 使用jQuery處理事件 事件處理 一個(gè)栗子，單擊p時(shí)背景變成灰色 由于es6的箭頭函數(shù)不支持this的綁定，所以無法使用箭頭函數(shù)，只能使用匿名函數(shù) html hello world js // 單擊...

    asoren 評論0 收藏0

  • 寫一個(gè)更好的 Javascript DOM 庫

    摘要：我們快速地看一下擴(kuò)展原生的動(dòng)畫內(nèi)置的微模板國際化的支持?jǐn)U展有一個(gè)叫做事件的概念。內(nèi)置的微模板字符串冗長而繁瑣。比如這段與對應(yīng)的微模板比較在中，任何接受的方法同樣接受表達(dá)式。 目前，jQuery是事實(shí)上的操作文檔對象模型（DOM）的庫。它可以與流行的客戶端MV*框架結(jié)合使用，并且擁有大量的插件與大型的社區(qū)。開發(fā)者對于Javascript的興趣與日俱增的同時(shí)，很多人開始好奇，原生的API是...

    Cc_2011 評論0 收藏0

  • 解釋一下為什么我很少jQuery

    摘要：為什么有一個(gè)東西，叫，它是一個(gè)快速輕量級跨平臺的框架。同時(shí)，它也是這個(gè)世界上最輕量級的框架沒有之一它有多快如下我們在里引入比上面更快的方法是什么沒有代碼是的，就是沒有代碼，因?yàn)閷?shí)在太強(qiáng)了，以至于所有的瀏覽器在年前內(nèi)置了它。 這里聲明一下，這不是反jQuery的文章，jQuery作為一個(gè)js庫給大家的項(xiàng)目開發(fā)帶來很多便利，但有時(shí)候仔細(xì)想想，我們真的需要jQuery嗎？一年前的lpisme...

    happyhuangjinjin 評論0 收藏0

  • 對jQuery的簡單整理

    jQuery 是一個(gè)類庫，提供強(qiáng)大的選擇器，不用考慮兼容性問題，進(jìn)行DOM操作，動(dòng)畫功能，以及Ajax jQuery 1點(diǎn)幾版本 兼容IE6~8 而2-3的版本不兼容 原生對象與jQuery對象的轉(zhuǎn)化 原生——>jq：oDiv——>$(oDiv) jq——>原生: $div1——>$div.get(0) 文檔就緒函數(shù)一般jq都寫在文檔就緒函數(shù)里 $(document).ready(fu...

    I_Am 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<