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的版本似乎要快得多。