關(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中Form相關(guān)知識匯總,總結(jié)的十分全面，需要的朋友可以參考下2015-01-01
首先聲明這2個無刷新級聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴(yán)格的測試，正確使用不會出現(xiàn)bug2011-10-10
在編寫widget的時候，一般我們需要綁定一些事件，最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。2010-10-10
本文給大家記錄的是個人在使用$.extend 的時候遇到的一個小問題，以及原因分析和解決方案，十分的實用，有需要的小伙伴可以參考下。2015-06-06
幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果
幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果...2007-05-05
最近，需要做個劃詞搜索功能。在網(wǎng)上找了好些，最后，參照進行修改，實現(xiàn)了想要的功能。這里，做個記錄，以備日后所用。2010-09-09
本篇文章主要介紹了ajax實現(xiàn)動態(tài)下拉框示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
下面小編就為大家?guī)硪黄猨Query將表單序列化成一個Object對象的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jQuery對事件系統(tǒng)的抽象與優(yōu)化也是它的一大特色。本文僅從事件系統(tǒng)入手，簡要分析一下jQuery為什么提供mouseenter和mouseleave事件，它們與標(biāo)準(zhǔn)的mouseover、mouseout事件有什么區(qū)別2011-11-11
JQuery UI的拖拽功能實現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫，包含底層交互、動畫、特效等API，并且封裝了一些Web小部件（Widget）。同時，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能2012-03-03