jQuery選擇的工作原理和優化

2021-08-24 19:44:32 字數 1467 閱讀 9121

至於有那些選擇器,在幫助手冊中都有,自己去看,這篇主要是分析他的工作原理,而優化我們寫的選擇器,尤其在頁面內容很多的情況下,更應該需要優化。下邊就言歸正傳。

當我們使用選擇器的時候$(selector,content),就會執行init(selectot,content),我們看看inti中是怎樣執行的:

if ( typeof selector == "string" )

// 是: $("#id")

else

selector = ;

}//非id的形式.在context中或者是全文查詢

} else

}這裡就說明只有選擇器寫成$(『#id』)的時候最快,相當於執行了一次 getelementbyid,後邊的程式就不用再執行了。當然往往我們需要的選擇器並不是這麼簡單,比如我們需要id下的css為classname,有這樣的寫法$(『#id.classname』)和$(『#id』).find(『.classname』);這兩種寫法的執行結果都是一樣的,比如

,返回的肯定都是,但是執行的效率是完全不一樣的。

在分析一下上邊的**,如果不是$(『#id』)這樣的簡單選擇器的話,都會執行find函式,那我們再看看find到底是做用的:

find: function( selector ) );

//下邊的**可以忽略,只是做一些處理

//這裡應用了js的正則物件的靜態方法test

//indexof("..")需要了解一下xpath的語法,就是判斷selector中包含父節點的寫法

//本意就是過濾陣列的重複元素

return this.pushstack( /[^+>] [^+>]/.test( selector ) || selector.indexof("..") > -1 ?

jquery.unique( elems ) :

elems );

}如果這樣寫$(『#id .classname』),就會執行到擴充套件的find(『#id .classname』,document),因為當前的this是document的jquery陣列,那我們在看看擴充套件的find他的實現,**比較多,就不列出來,總之就是從第二個引數傳遞進行的dom第乙個子節點開始找,遇見#比對id,遇見.比對classname,還有:<+-等處理。那我們要優化,是不是就要想辦法讓第二個引數context的範圍最小,那樣遍歷是不是就很少了?

如果我們這樣寫$(『#id』).find(『.classname』),那程式只這樣執行的,第一次init的時候執行一步getelementbyid,就return了,接著執行 find(『.classname』,divdocument),divdocument就是我們第一次選擇的是div標籤,如果document下有很多dom物件的時候,這次只遍歷divdocument是不是少了很多次,而且在第一次選擇id的速度也要比遍歷快的多。

現在大家應該是明白了吧。就是說第一層選擇最好是id,而是簡單選擇器,目的就是定義範圍,提高速度,這次就說這些,選擇寫法的優化,其他的優化,下次再說。

jQuery選擇的工作原理和優化

至於有那些選擇器,在幫助手冊中都有,自己去看,這篇主要是分析他的工作原理,而優化我們寫的選擇器,尤其在頁面內容很多的情況下,更應該需要優化。下邊就言歸正傳。當我們使用選擇器的時候 selector,content 就會執行init selectot,content 我們看看inti中是怎樣執行的 i...

jQuery選擇的工作原理和優化

至於有那些選擇器,在幫助手冊中都有,自己去看,這篇主要是分析他的工作原理,而優化我們寫的選擇器,尤其在頁面內容很多的情況下,更應該需要優化。下邊就言歸正傳。當我們使用選擇器的時候 selector,content 就會執行init selectot,content 我們看看inti中是怎樣執行的 i...

JQuery 工作原理

jquery最重要的作用就是查詢dom節點,比瀏覽器原生的查詢方式更加優雅,比如html中的一張 兩種查詢方式比較 原生介面 var image document.getelementbyid img jquery 方法 var jqimgae img 在jquery原始碼中,jquery 的實現方...