速度差異使用document.getElementById（id），$（id）和containerElement.find（id）

說我有一個頁面上的容器元素/ div。除此之外還有其他元素，包括頁面佈局/洞察，並且裏面有相當多的內容。

在我的JavaScript中，我需要找到/操作該容器內的幾個元素。如果所有這些元素都設置了id屬性，速度方面，使用document.getElementById()（考慮到一旦找到該元素，就需要將其轉換爲jQuery對象進行操作）才能找到它們，或者使用jQuery來選擇它們所以：$("#id")，或者先選擇容器，將其存儲在一個變量中，然後使用jQuery選擇要處理的元素，如下所示：container.find("#id")？

哪種方法更快？這些搜索的速度取決於什麼？

來源

2013-01-10 Valera

經驗法則：不要過早優化。做任何看起來最簡單，最清楚的事情。可能$（...）是。然後，只有在速度太慢的情況下，嘗試其他選項，看看它是否足夠快。請記住，它不需要儘可能快 - 只要足夠快。 –

當使用'$（'＃id'）'時，jQuery在引擎蓋下使用'getElementById'。 –

由於jQuery()與id選擇器使用document.getElementById裏面，直接使用本地方法顯然更快。當然，開銷是可以忽略的（你不需要通過id選擇數百個元素），並且他們做了不同的事情 - 很可能你想獲得一個包含DOM節點的jQuery包裝器對象。

container.find(idselector)雖然是一個有趣的案例。由於id在整個文檔中都是唯一的，因此您根本不需要這樣的表達式。因此，ID選擇通常通過瀏覽器內的O(1)查找表進行提升，即使對於完整文檔，ID選擇也非常快。我不確定在容器中使用它會發生什麼，但它可能會回落到一個相當慢的DOM樹遍歷。

來源

2013-01-10 23:21:57 Bergi

'container.find（idselector）'的確回退到較慢的DOM樹遍歷：querySelectorAll。除非你使用的瀏覽器不支持'querySelectorAll'。然後它回落到一個非常慢的方法！ –

@Stephen：感謝您的確認，我不想在Sizzle源代碼中查到這個:-)儘管如此，仍然可能會對id選擇器進行內部優化，這會使樹遍歷成爲多餘的 – Bergi

速度差異使用document.getElementById（id），$（id）和containerElement.find（id）

回答

相關問題