關(guān)于jquery性能最佳實踐的討論,與求教
更新時間:2012年03月30日 23:21:04 作者:
很久沒寫東西,年前的項目也接近尾聲,最近在網(wǎng)上看到一篇文章是 阮一峰 的 《jQuery最佳實踐》 鏈接在文末
原因是我在測試的時候:帶入了錯誤的變量。具體可以查看圖片上的 $(parentID > childClass) 我直接比較兩個字符換大小了!
感謝 html5中文網(wǎng) QQ群中的 “不見丘比特”。
其中第三點提到父元素與子元素的關(guān)系中提到了 從父元素選擇子元素的用例:
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
在其所給的測試用例中 確實是使用jquery的find方法最快,但是稍作修改卻得到了另外的一個結(jié)果$('#parent > .child')完勝。
在作者的用例中只是直接緩存了對象 $('#parent');但是當(dāng)我們把dom的id和class屬性作為常量定義并傳入測試用例中的時候就出現(xiàn)我說的另外一個結(jié)果。
作者原生測試頁面:http://jsperf.com/bell-selector
結(jié)果截圖:

修改后的測試頁面:http://jsperf.com/bell-selector/2
結(jié)果截圖:

同時給我我從真實環(huán)境中取出來的一塊代碼段所做的測試,同樣也是$('#parent > .child')這樣的寫法最快。
測試頁面:http://jsperf.com/findchildren
結(jié)果截圖:

從以上結(jié)果截圖中可以看到,我給出的兩個測試結(jié)果明顯是使用了大于號選擇符的那個性能做好。
請各位看到此文或者了解詳情的能給一個說明。關(guān)于文章中的其它內(nèi)容都是比較好的觀點。
文章:http://www.dbjr.com.cn/article/28056.htm
園子中那位有時間和條件的可以對以上各個操作做一次調(diào)試,給出詳細的流程說明。我要等到手中的項目做完才有時間來調(diào)試這個過程。
感謝 html5中文網(wǎng) QQ群中的 “不見丘比特”。
其中第三點提到父元素與子元素的關(guān)系中提到了 從父元素選擇子元素的用例:
復(fù)制代碼 代碼如下:
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
在其所給的測試用例中 確實是使用jquery的find方法最快,但是稍作修改卻得到了另外的一個結(jié)果$('#parent > .child')完勝。
在作者的用例中只是直接緩存了對象 $('#parent');但是當(dāng)我們把dom的id和class屬性作為常量定義并傳入測試用例中的時候就出現(xiàn)我說的另外一個結(jié)果。
作者原生測試頁面:http://jsperf.com/bell-selector
結(jié)果截圖:

修改后的測試頁面:http://jsperf.com/bell-selector/2
結(jié)果截圖:

同時給我我從真實環(huán)境中取出來的一塊代碼段所做的測試,同樣也是$('#parent > .child')這樣的寫法最快。
測試頁面:http://jsperf.com/findchildren
結(jié)果截圖:

從以上結(jié)果截圖中可以看到,我給出的兩個測試結(jié)果明顯是使用了大于號選擇符的那個性能做好。
請各位看到此文或者了解詳情的能給一個說明。關(guān)于文章中的其它內(nèi)容都是比較好的觀點。
文章:http://www.dbjr.com.cn/article/28056.htm
園子中那位有時間和條件的可以對以上各個操作做一次調(diào)試,給出詳細的流程說明。我要等到手中的項目做完才有時間來調(diào)試這個過程。
相關(guān)文章
幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果
幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果...2007-05-05JQuery UI的拖拽功能實現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫,包含底層交互、動畫、特效等API,并且封裝了一些Web小部件(Widget)。同時,JQuery UI繼承了jquery的插件支持,有大量的第三方插件可以豐富JQuery UI的功能2012-03-03