（為什么）使用類似jQuery的選擇器並執行其中一個方法而不是查找命名函數是否更快？

Question

我想知道在你自己的原生JS代碼中定義一些'速記'函數比使用jQuery（或任何其他返回對象的庫）更快。 例如，假設我想要為元素添加一個類。

在jQuery中我會這樣做：

$('#sammpleDiv').addClass('someClass');

在原生JS中，我可以這樣做：

// for simplicity's sake, the toElem parameter can only be an id
function addClass(toElem, classToAdd) {
  document.getElementById(toElem).className += ' ' + classToAdd;
};
addClass('sampleDiv','someClass');

編輯：這些是正確的jsPerfs 與簡單替換和classList回答這個問題

什么更快？ 根據我制作的jsPerf ，本機JS實現速度慢了100％。

那么為什么使用$並返回jQuery.fn.init對象的新實例更快，執行一堆查找和過濾測試以及許多其他操作（jQuery實際上做了什么），然后執行其中一個方法而不是查找命名函數？

Answer 1

我在你的jsperf中看到了兩個錯誤，如評論中所述：

• jQuery經過了大量優化。 .addClass只會在尚未添加時添加它。

• 你沒有檢查它。 你只是使用+=附加它，它創建了大量的字符串實例，因為它運行了10,00次左右，甚至崩潰了我的瀏覽器;)

Dr.Molle的修改后的jsperf表明，通過修復上述內容，它是最快的。

啊! Niet the Dark Absol 在這里提供了更快的速度。 它很快，因為它使用本機classList並且不會手動檢查類的可用性。

Answer 2

做測試用例時，你需要確定

• 兩個代碼完全相同;
• 沒有錯誤（我的瀏覽器在運行測試時崩潰了）。

現在，我已經復制了jQuery用於添加類的完全相同的代碼，事實上，vanilla JS更快，100％：

JSPerf

之所以簡單，函數調用少，條件少。 使用jQuery時，使用函數調用來選擇id ： $('#id')並在該函數內部，你有一些條件來檢查它是否需要創建一個DOM元素或使用查詢選擇器......你可以看到相關代碼在這里 。

之后，jQuery .addClass()也有條件，因為可以使用函數作為參數。 在那些條件下，他們使用更多的函數調用，減慢了進程。 同樣，您可以在此處查看代碼。

現在，JavaScript已經發展，它現在有一個內置函數來添加刪除類。 Niet the Dark Absol用它制作了一個JSPerf 。 這是添加類的最快方法，但為什么jQuery不使用它？ 僅僅因為瀏覽器的兼容性