javascript - jquery教學 - jquery selector child



jQuery遍歷首選的選擇器? (2)

對此,我們沒有切入點和乾涉的答案,但是對於您使用的:last選擇器,它是對Selectors API標準的專有擴展。 因此,使用本機.querySelectorAll方法是無效的。

Sizzle所做的基本上是嘗試在.querySelectorAll使用選擇器,如果由於選擇器無效而拋出異常,它將默認為純粹的基於JavaScript的DOM選擇/過濾。

這意味著包括選擇器,如:last會導致你沒有得到與本地代碼DOM選擇的速度提升。

此外,還包括優化,以便當您的選擇器非常簡單,如只是一個ID或元素名稱,將使用本機getElementByIdgetElementsByTagName ,這是非常快的; 通常甚至比querySelectorAll更快。

由於.last()方法只是抓取集合中的最後一個項目,而不是過濾所有項目,這是Sizzle過濾器通常所做的(至少他們曾經這樣做 ,這也會提升。

國際海事組織,遠離專有的東西。 現在.querySelectorAll幾乎無處不在,只有使用符合標準的選擇器才有真正的優勢。 DOM選擇後進行任何進一步的過濾。

$("#vacations").find("li") ,不要擔心中期結果。 這將使用getElementByIdgetElementsByTagName ,並且將會非常快。

如果你真的超級關心速度,減少使用jQuery,並直接使用DOM。

您現在可以在文檔中找到選擇器的註釋,例如:last ,提醒您關於性能的損失:

因為:last是一個jQuery擴展,而不是CSS規範的一部分,使用:last查詢不能利用本機DOM querySelectorAll()方法提供的性能提升。 為了在使用時達到最佳性能:last選擇元素,首先使用純CSS選擇器選擇元素,然後使用.filter(":last")

但是我不同意.filter(":last")是一個很好的替代品。 更好的方法就像.last() ,將直接針對元素,而不是過濾集。 我有一種感覺,他們只是希望人們繼續使用不符合標準的選擇器。 國際海事組織,你最好忘了他們。

https://src-bin.com

使用$("#vacations").find("li").last()$("#vacations li:last")更好嗎?

背景和我的想法:

我正在玩一個很好的交互式嘗試jQuery教程 ,其中一個任務說:

當你瀏覽你的代碼時,你注意到別人正在用:$(“#vacations li:last”)來選擇最後一個假期。 你看看這個,你會想:“遍歷會使這個更快!” 你應該對這些想法採取行動,重構這段代碼,以便使用遍歷來查找#vacations中的最後一個li。

我為什麼這麼想? 對我來說,選擇器的使用看起來比遍歷更高一些。 在我心中,當我指定一個選擇器是由jQuery如何更好地得到我需要的單一結果(無需返回中期結果)。

什麼是使用複合選擇器額外的開銷? 是否因為選擇器邏輯的當前實現只是解析字符串並使用遍歷API? 解析一個緩慢的字符串? 未來的實現是否有可能使用這樣一個事實,即它不需要返回中間結果,而且會比遍歷更快呢?


Answer #1

這是你的設置測試: http : //jsperf.com/andrey-s-jquery-traversal

jQuery的選擇器引擎嘶嘶作響 ,用正則表達式解析字符串,並試圖通過使用getElementByIdgetElementsByTagName來加速非常基本的選擇器。 如果你的選擇器比#fooimg更複雜,它將嘗試使用querySelectorAll ,它只接受有效的CSS選擇器(no :radio:eq:checkbox或其他jQuery特定的偽選擇器)。

選擇器字符串的可讀性速度都較慢,所以沒有理由使用它。

通過將選擇器字符串分解為Sizzle可以快速解析的簡單塊( #idtagname ),您基本上只需將getElementByIdgetElementsByTagName鏈接在一起即可。





performance