jquery，performance-wise更快getElementById或jQuery選擇器是什麼？

Question

明智的性能document.getElementById('elementId')或$('#elementId')有什麼更好？ 我該如何計算自己的速度？

Answer 1

如果你關心性能，原生的getElementById是非常非常快，但jQuery的爲您提供了很多的東西，非常方便訪問。所以，你可能想用類似的東西：

$(document.getElementById("some_id")).jQueryCall(); 

這會給你一個更好的性能，同時，允許你使用jQuery。

Answer 2

getElementById更快，因爲它使用本機代碼。 jQuery選擇器也將使用getElementById，但它首先需要對文本進行大量測試和比較。

Answer 3

當然getElementById更快，但使用jQuery你可以做很多事情。

要測試這一點，您可以嘗試循環10k次，並比較前後的時間戳。

Answer 4

原生getElementById更快。 Jquery選擇器引擎只是包裝這個任何#x選擇器。

使用螢火蟲控制檯，您可以通過以下方式配置jquery。 不確定它適用於getElementById等本機API調用。

console.profile(); 
$('#eleId'); 
console.profileEnd(); 

Answer 5

使用http://jsperf.com/如果你想測試jquery和dom之間的任何類型的性能 但jQuery的速度通常比任何事情都慢，因爲它基於dom。

Answer 6

我剛剛偶然發現了這篇文章，同時想知道同樣的問題......所以決定敲一個快速測試腳本......運行它，自己試一下，吹響我的心！

var now = Date.now(); 
var diff = 0; 
console.log(now); 

for(var i=0; i < 1000000; i++) 
{ 
    if($(document.getElementById("test")).css('opacity') == '0.2') 
     $(document.getElementById("test")).css('opacity', '1'); 
    else 
     $(document.getElementById("test")).css('opacity', '0.2'); 
} 

diff = Date.now() - now; 
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now2 = Date.now(); 
var diff2 = 0; 
console.log(now2); 

for(i=0; i < 1000000; i++) 
{ 
    if($("#test").css('opacity') == '0.2') 
     $("#test").css('opacity', '1'); 
    else 
     $("#test").css('opacity', '0.2'); 
} 

diff2 = Date.now() - now2; 

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now3 = Date.now(); 
var diff3 = 0; 
var elem = $("#test"); 
console.log(now3); 

for(i=0; i < 1000000; i++) 
{ 
    if(elem.css('opacity') == '0.2') 
     $(elem).css('opacity', '1'); 
    else 
     $(elem).css('opacity', '0.2'); 
} 

diff3 = Date.now() - now3; 

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds'); 

運行此腳本後，我得到了以下結果：

運行1

隨着$(document.getElementById("test")).somejQueryCall()：552毫秒

隨着$("#test").somejQueryCall()：881毫秒

隨着$(elem).somejQueryCall() ：1317毫秒

運行2

$(document.getElementById("test")).somejQueryCall()隨着：520毫秒

隨着$("#test").somejQueryCall()：855毫秒

隨着$(elem).somejQueryCall()：1289毫秒

運行3

隨着$(document.getElementById("test")).somejQueryCall()：565毫秒

隨着$("#test").somejQueryCall()：936毫秒

隨着$(elem).somejQueryCall()：1445毫秒

我不能相信的區別！只需分享一下！

和平！

Answer 7

嘿。研究這個問題，我發現這個優秀的帖子。還有一篇關於這方面的文章，最新進入了JQuery的學習網站，並提供了特定提示以優化速度！

值得注意的是，使用最新的DOM規範，您可能無需擔心通常的性能問題。只有當你創造（或發現）一個瓶頸。

Optimise Selectors

Answer 8

因爲這是在本頁面鏈接的其他性能測試似乎被打破，也包括一些沒有在這個問題（即定製的jQuery方法）詢問，於是我決定使一個新的性能基準來回答，其中包括在jQuery的準確當量（返回的DOM元素）的問題，而不是一個自定義的方法：

https://jsperf.com/jquery-get-0-vs-get-element-by-id

當我在我的瀏覽器中運行它，它表明一個直截了當的jQuery

$('#foo').get(0) 

比同等操作慢於標準的JavaScript 92％

document.getElementById('foo') 

我也嘗試了什麼是當前被標記爲在這裏接受的答案，據稱「非常非常快」，但它仍然是89 ％，比標準的JavaScript相當於慢：

$(document.getElementById("foo")).get(0); 

隨意運行它自己，看看你在你的瀏覽器中得到，與performance benchmark我犯。沒有jQuery的版本似乎要快得多。