成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

jQuery的show/hide性能測試

canger / 2113人閱讀

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

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

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

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

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

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

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

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

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

相關(guān)文章

  • 回味jQuery系列（2）-動畫效果

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

    IamDLY 評論0 收藏0

  • jQuery (二)

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

    asoren 評論0 收藏0

  • 寫一個更好的 Javascript DOM 庫

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

    Cc_2011 評論0 收藏0

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

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

    happyhuangjinjin 評論0 收藏0

  • 對jQuery的簡單整理

    jQuery 是一個類庫，提供強大的選擇器，不用考慮兼容性問題，進行DOM操作，動畫功能，以及Ajax jQuery 1點幾版本 兼容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條評論

閱讀需要支付1元查看
<