關(guān)于jquery性能最佳實(shí)踐的討論,與求教
更新時(shí)間：2012年03月30日 23:21:04 作者：
很久沒寫東西，年前的項(xiàng)目也接近尾聲，最近在網(wǎng)上看到一篇文章是 阮一峰 的 《jQuery最佳實(shí)踐》 鏈接在文末
原因是我在測試的時(shí)候：帶入了錯(cuò)誤的變量。具體可以查看圖片上的 $(parentID > childClass) 我直接比較兩個(gè)字符換大小了！
感謝 html5中文網(wǎng) QQ群中的 “不見丘比特”。
其中第三點(diǎn)提到父元素與子元素的關(guān)系中提到了 從父元素選擇子元素的用例：
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
在其所給的測試用例中 確實(shí)是使用jquery的find方法最快，但是稍作修改卻得到了另外的一個(gè)結(jié)果$('#parent > .child')完勝。
在作者的用例中只是直接緩存了對象 $('#parent');但是當(dāng)我們把dom的id和class屬性作為常量定義并傳入測試用例中的時(shí)候就出現(xiàn)我說的另外一個(gè)結(jié)果。
作者原生測試頁面：http://jsperf.com/bell-selector
結(jié)果截圖：
修改后的測試頁面：http://jsperf.com/bell-selector/2
結(jié)果截圖：
同時(shí)給我我從真實(shí)環(huán)境中取出來的一塊代碼段所做的測試，同樣也是$('#parent > .child')這樣的寫法最快。
測試頁面：http://jsperf.com/findchildren
結(jié)果截圖：
從以上結(jié)果截圖中可以看到，我給出的兩個(gè)測試結(jié)果明顯是使用了大于號選擇符的那個(gè)性能做好。
請各位看到此文或者了解詳情的能給一個(gè)說明。關(guān)于文章中的其它內(nèi)容都是比較好的觀點(diǎn)。
文章：http://www.dhdzp.com/article/28056.htm
園子中那位有時(shí)間和條件的可以對以上各個(gè)操作做一次調(diào)試，給出詳細(xì)的流程說明。我要等到手中的項(xiàng)目做完才有時(shí)間來調(diào)試這個(gè)過程。
感謝 html5中文網(wǎng) QQ群中的 “不見丘比特”。
其中第三點(diǎn)提到父元素與子元素的關(guān)系中提到了 從父元素選擇子元素的用例：
復(fù)制代碼 代碼如下:
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
在其所給的測試用例中 確實(shí)是使用jquery的find方法最快，但是稍作修改卻得到了另外的一個(gè)結(jié)果$('#parent > .child')完勝。
在作者的用例中只是直接緩存了對象 $('#parent');但是當(dāng)我們把dom的id和class屬性作為常量定義并傳入測試用例中的時(shí)候就出現(xiàn)我說的另外一個(gè)結(jié)果。
作者原生測試頁面：http://jsperf.com/bell-selector
結(jié)果截圖：
修改后的測試頁面：http://jsperf.com/bell-selector/2
結(jié)果截圖：
同時(shí)給我我從真實(shí)環(huán)境中取出來的一塊代碼段所做的測試，同樣也是$('#parent > .child')這樣的寫法最快。
測試頁面：http://jsperf.com/findchildren
結(jié)果截圖：
從以上結(jié)果截圖中可以看到，我給出的兩個(gè)測試結(jié)果明顯是使用了大于號選擇符的那個(gè)性能做好。
請各位看到此文或者了解詳情的能給一個(gè)說明。關(guān)于文章中的其它內(nèi)容都是比較好的觀點(diǎn)。
文章：http://www.dhdzp.com/article/28056.htm
園子中那位有時(shí)間和條件的可以對以上各個(gè)操作做一次調(diào)試，給出詳細(xì)的流程說明。我要等到手中的項(xiàng)目做完才有時(shí)間來調(diào)試這個(gè)過程。
相關(guān)文章
Ionic實(shí)現(xiàn)仿通訊錄點(diǎn)擊滑動(dòng)及$ionicscrolldelegate使用分析
這篇文章主要介紹了Ionic實(shí)現(xiàn)仿通訊錄點(diǎn)擊滑動(dòng)及$ionicscrolldelegate使用分析的相關(guān)資料,需要的朋友可以參考下2016-01-01
jQuery 導(dǎo)航自動(dòng)跟隨滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 導(dǎo)航自動(dòng)跟隨滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-05-05
想在頁面加載完成后，有幾個(gè)地方顯示當(dāng)前時(shí)間，所以想通過jquery給多個(gè)span賦值,需要的朋友可以參考下2014-05-05
jQuery表單驗(yàn)證插件formValidator(改進(jìn)版)
隨著jQuery被越來越多的人使用，基于jQuery的表單驗(yàn)證插件，也從無到現(xiàn)在比較流行的已經(jīng)有10個(gè)左右了2012-02-02
jquery提交form表單時(shí)禁止重復(fù)提交的方法
這篇文章主要介紹了jquery提交form表單時(shí)禁止重復(fù)提交的方法,需要的朋友可以參考下2014-02-02
jQuery實(shí)現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作,結(jié)合實(shí)例形式分析了jQuery針對select選中觸發(fā)change事件相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jquery 獲取標(biāo)簽名(tagName)示例代碼
如果是需要取到tagName后再進(jìn)行判斷，那么下面的代碼或許對大家有所幫助，感興趣的朋友不妨嘗試一下哈2013-07-07
隨著WEB2.0及ajax思想在互聯(lián)網(wǎng)上的快速發(fā)展傳播，陸續(xù)出現(xiàn)了一些優(yōu)秀的Js框架，其中比較著名的有Prototype、YUI、jQuery、mootools、Bindows以及國內(nèi)的JSVM框架等2011-01-01
本文主要介紹了對稱加密與非對稱加密的優(yōu)缺點(diǎn)，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
jQuery實(shí)現(xiàn)右下角可縮放大小的層完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)右下角可縮放大小的層,以完整實(shí)例形式分析了jQuery頁面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下2016-06-06