關(guān)于jquery性能最佳實(shí)踐的討論,與求教
更新時(shí)間：2012年03月30日 23:21:04 作者：
很久沒(méi)寫(xiě)東西，年前的項(xiàng)目也接近尾聲，最近在網(wǎng)上看到一篇文章是 阮一峰 的 《jQuery最佳實(shí)踐》 鏈接在文末
原因是我在測(cè)試的時(shí)候：帶入了錯(cuò)誤的變量。具體可以查看圖片上的 $(parentID > childClass) 我直接比較兩個(gè)字符換大小了！
感謝 html5中文網(wǎng) QQ群中的 “不見(jiàn)丘比特”。
其中第三點(diǎn)提到父元素與子元素的關(guān)系中提到了 從父元素選擇子元素的用例：
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
在其所給的測(cè)試用例中 確實(shí)是使用jquery的find方法最快，但是稍作修改卻得到了另外的一個(gè)結(jié)果$('#parent > .child')完勝。
在作者的用例中只是直接緩存了對(duì)象 $('#parent');但是當(dāng)我們把dom的id和class屬性作為常量定義并傳入測(cè)試用例中的時(shí)候就出現(xiàn)我說(shuō)的另外一個(gè)結(jié)果。
作者原生測(cè)試頁(yè)面：http://jsperf.com/bell-selector
結(jié)果截圖：
修改后的測(cè)試頁(yè)面：http://jsperf.com/bell-selector/2
結(jié)果截圖：
同時(shí)給我我從真實(shí)環(huán)境中取出來(lái)的一塊代碼段所做的測(cè)試，同樣也是$('#parent > .child')這樣的寫(xiě)法最快。
測(cè)試頁(yè)面：http://jsperf.com/findchildren
結(jié)果截圖：
從以上結(jié)果截圖中可以看到，我給出的兩個(gè)測(cè)試結(jié)果明顯是使用了大于號(hào)選擇符的那個(gè)性能做好。
請(qǐng)各位看到此文或者了解詳情的能給一個(gè)說(shuō)明。關(guān)于文章中的其它內(nèi)容都是比較好的觀點(diǎn)。
文章：http://www.dbjr.com.cn/article/28056.htm
園子中那位有時(shí)間和條件的可以對(duì)以上各個(gè)操作做一次調(diào)試，給出詳細(xì)的流程說(shuō)明。我要等到手中的項(xiàng)目做完才有時(shí)間來(lái)調(diào)試這個(gè)過(guò)程。
感謝 html5中文網(wǎng) QQ群中的 “不見(jiàn)丘比特”。
其中第三點(diǎn)提到父元素與子元素的關(guān)系中提到了 從父元素選擇子元素的用例：
復(fù)制代碼 代碼如下:
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
在其所給的測(cè)試用例中 確實(shí)是使用jquery的find方法最快，但是稍作修改卻得到了另外的一個(gè)結(jié)果$('#parent > .child')完勝。
在作者的用例中只是直接緩存了對(duì)象 $('#parent');但是當(dāng)我們把dom的id和class屬性作為常量定義并傳入測(cè)試用例中的時(shí)候就出現(xiàn)我說(shuō)的另外一個(gè)結(jié)果。
作者原生測(cè)試頁(yè)面：http://jsperf.com/bell-selector
結(jié)果截圖：
修改后的測(cè)試頁(yè)面：http://jsperf.com/bell-selector/2
結(jié)果截圖：
同時(shí)給我我從真實(shí)環(huán)境中取出來(lái)的一塊代碼段所做的測(cè)試，同樣也是$('#parent > .child')這樣的寫(xiě)法最快。
測(cè)試頁(yè)面：http://jsperf.com/findchildren
結(jié)果截圖：
從以上結(jié)果截圖中可以看到，我給出的兩個(gè)測(cè)試結(jié)果明顯是使用了大于號(hào)選擇符的那個(gè)性能做好。
請(qǐng)各位看到此文或者了解詳情的能給一個(gè)說(shuō)明。關(guān)于文章中的其它內(nèi)容都是比較好的觀點(diǎn)。
文章：http://www.dbjr.com.cn/article/28056.htm
園子中那位有時(shí)間和條件的可以對(duì)以上各個(gè)操作做一次調(diào)試，給出詳細(xì)的流程說(shuō)明。我要等到手中的項(xiàng)目做完才有時(shí)間來(lái)調(diào)試這個(gè)過(guò)程。
相關(guān)文章
這篇文章主要介紹了jQuery中Form相關(guān)知識(shí)匯總,總結(jié)的十分全面，需要的朋友可以參考下2015-01-01
基于jquery的無(wú)限級(jí)聯(lián)下拉框js插件
首先聲明這2個(gè)無(wú)刷新級(jí)聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過(guò)嚴(yán)格的測(cè)試，正確使用不會(huì)出現(xiàn)bug2011-10-10
在編寫(xiě)widget的時(shí)候，一般我們需要綁定一些事件，最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。2010-10-10
本文給大家記錄的是個(gè)人在使用$.extend 的時(shí)候遇到的一個(gè)小問(wèn)題，以及原因分析和解決方案，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
幾行代碼輕松搞定jquery實(shí)現(xiàn)flash8類似的連接效果
幾行代碼輕松搞定jquery實(shí)現(xiàn)flash8類似的連接效果...2007-05-05
基于jquery的劃詞搜索實(shí)現(xiàn)（備忘）
最近，需要做個(gè)劃詞搜索功能。在網(wǎng)上找了好些，最后，參照進(jìn)行修改，實(shí)現(xiàn)了想要的功能。這里，做個(gè)記錄，以備日后所用。2010-09-09
ajax實(shí)現(xiàn)動(dòng)態(tài)下拉框示例
本篇文章主要介紹了ajax實(shí)現(xiàn)動(dòng)態(tài)下拉框示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jQuery對(duì)事件系統(tǒng)的抽象與優(yōu)化也是它的一大特色。本文僅從事件系統(tǒng)入手，簡(jiǎn)要分析一下jQuery為什么提供mouseenter和mouseleave事件，它們與標(biāo)準(zhǔn)的mouseover、mouseout事件有什么區(qū)別2011-11-11
JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫(kù)，包含底層交互、動(dòng)畫(huà)、特效等API，并且封裝了一些Web小部件（Widget）。同時(shí)，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能2012-03-03