Javascript - 通過排序DOM集合獲得的好處

我正在開發我的個人項目，即創建JavaScript選擇器引擎。引擎會使用CSS2 - CSS3語法來選擇元素節點。我將我的引擎的選擇結果與其他選擇器引擎的結果（主要是Sizzle）進行比較。我還將其與本機選擇器方法（稱爲querySelectorAll（QSA））進行了比較。我注意到一個區別。Javascript - 通過排序DOM集合獲得的好處

該文件的HTML結構是如此簡單：

<code></code>

我使用的選擇器是：

'跨度，代碼'

當我使用Sizzle或QSA進行選擇，我得到的結果是這樣的：

[<code>...</code>, ]

當我用我的選擇器引擎，結果是這樣的：

[, <code>...</code>]

這似乎是，這種嘶嘶聲和QSA根據元素的文件上的位置排序的集合。我的選擇器引擎不這樣做。我發現，使用compareDocumentPosition和Array排序方法可以實現排序。顯然這會影響性能，雖然我還沒有測試過。（來源：http://ejohn.org/blog/comparing-document-position/）。

我想知道如果排序節點提供了一些好處，比「無序」的節點。例如，將元素排序後，向集合的節點添加css樣式效率更高（在循環中）。還有其他的情況，使用排序後的集合可能會更好嗎？

實施例（elementNodes包含的選擇結果）：

爲（VAR I = 0，IL = elementNodes.length;我< IL;我++）{
elementNodes[i].style.height = '100px'; 

elementNodes[i].style.width = '100px'; 

elementNodes[i].style.background = 'red'; 
}

來源

2012-05-21 undefined

任何源代碼？ :-) –

我相信排序節點的唯一優點是可預測性，這是不可嗅探的... – lonesomeday

@FlorianMargaine什麼是源代碼？對元素集合進行排序的方法可以從我給出的鏈接中找到（這是John Resig的真棒博客中的一篇文章），我太羞愧了，無法從我的選擇器引擎中顯示代碼：D我不太擅長編寫漂亮的代碼。 – undefined

首先，我喜歡你在這裏做什麼，特別是你正在對其他開源引擎進行比較。

實際上這兩個例子都是「排序」的，只是不同而已。

除非你找到一個令人信服的理由（我想不出一個）來排序你的嘶嘶聲，然後不這樣做。只要你明白你自己的引擎的順序，你明確的做了，其他人也可以理解它，那麼這是最重要的。

來源

2012-05-21 16:29:24 DaveAlger

Javascript - 通過排序DOM集合獲得的好處

回答

相關問題