高效的DOM選擇技巧 - 按屬性選擇慢？

我正在使用腳本使所有輸入在尚未支持該功能的瀏覽器中具有佔位符。高效的DOM選擇技巧 - 按屬性選擇慢？

在該腳本，我使用

$('input[placeholder]').each(function() {

選擇所有元素作用於。

我在想，如果這也許會是因爲它不是一個很具體的減緩選擇像

$('#input').each(function() {

我知道選擇的方式更快（但我不想單獨指定所有id's）。

你會建議增加班所有佔位符輸入屬性約像這樣：

$('.iHaveaPlaceholder').each(function() {

做出選擇更快的（我認爲選擇類是比速度屬性附加傷害）。但是，這會濫用CSS類的目的，只意味着風格，它會填滿dom。

您有任何建議或技巧來改善這些任務嗎？

來源

2011-02-22 Hans

爽哦，didn't知道。看起來像按班選擇的確更快。 – Hans 2011-02-22 22:37:05

那麼，你可以給你的表格一個id，然後使用$("#theForm input[placeholder]")這將減少選擇器有多少元素需要考慮。

來源

2011-02-22 22:18:47 araqnid

是的，但我有很多形式，不想指定每一個。 – Hans 2011-02-22 22:20:19

我想在這種情況下這不是一場勝利。選擇「輸入」的某個限定符應至少使用'document.getElementsByTagName'或類似的東西。所以如果你認爲檢查類更快，也許$（「input.iHaveaPlaceholder」）。 – araqnid 2011-02-22 22:23:34

我會好奇$（「form input [placeholder]」）與$（「input [placeholder]」）。我們都知道輸入應該是形式化的，但我想其他地方的一個獨立輸入也會匹配，證明引擎正在查看整個DOM。縮小到表單元素應該會提升性能。 – Capsule 2011-02-22 22:27:17

這並不慢（你測試過或只是猜測？）。 但如果它是使用類。

來源

2011-02-22 22:22:07 galambalazs

有趣矛盾的答案;-) – Capsule 2011-02-22 22:28:32

不是嗎？ :)不，我的意思是我敢打賭，他沒有任何性能問題，他只是擔心沒有很好的理由。但班級速度更快，這是事實。 – galambalazs 2011-02-22 22:42:25

不在IE6中！ ;）（我說過多少次......） – gnarf 2011-02-23 01:03:30

除非你有一個巨大的DOM，我不認爲性能差異應該真的發揮作用。就像你說的那樣，爲了「優化」的目的設置了很多類，它們會與文檔的邏輯結構混淆。

按類進行選擇，但不提供上下文，仍然會導致整個DOM被遍歷。按照我的想法選擇元素也是一樣。在這裏使用佔位符類絕對不是答案。你想要做的是找到具有特定屬性的所有輸入元素 - 並且爲此使用了正確的選擇器。

來源

2011-02-22 22:22:13

我繼續和比較選擇input[placeholder]，.hasPlaceholder和input與.filter()做了JSPerf。

既然我們有一些需要思考的數字，讓我們來談談爲什麼你想知道。

什麼時候你在做這個搜索'input[placeholder]'？希望只有一次。如果你在現代瀏覽器中使用這兩種選擇器，他們會很快（數量是每秒操作數......）。但是，如果您知道只在不支持佔位符的瀏覽器上運行此選擇器，則在列出的三種方法中，.hasPlacehoder實際上是IE 6中速度最慢的，自定義篩選器獲勝。你想嘗試在瀏覽器中測試這個代碼實際上會影響的性能。

隨意添加你自己的選擇器，或者更好地接近你的確切的HTML到那個頁面，並請求一些瀏覽器測試！

編輯：我加input.hasPlaceholder到了比賽上一個新的香水，衛生

來源

2011-02-23 00:46:48 gnarf

+1不僅我不知道JSPerf是否存在，結果令人驚訝！（使用過濾器的速度是使用'input [placeholder]'的速度的兩倍） – Justin 2011-02-23 01:08:09

@Kragen - '$（'input'）'優化爲['getElementsByTagName']（https://developer.mozilla.org/ en/DOM/element.getElementsByTagName），然後通過過濾器函數快速運行。在不支持['querySelectorAll']（https://developer.mozilla.org/En/DOM/Document.querySelectorAll）的瀏覽器中，它可能是最快的.. – gnarf 2011-02-23 01:13:25

哇實際分析？誰會搶劫它？偉大的測試和真正令人驚訝的結果！我真的希望元素選擇器比類選擇器更快。莫名其妙。 – 2011-02-25 09:46:32

高效的DOM選擇技巧 - 按屬性選擇慢？

回答

相關問題