jquery，性能明智的getElementById或jQueryselect器是什么？

性能明智的document.getElementById('elementId')还是$('#elementId') ？ 我怎样才能自己计算速度？

Answer 1

如果您关心性能，原生getElementById要快得多，但jQuery可以非常方便地访问很多东西。 所以，你可能想要使用像这样的东西：

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

这会给你一个更好的performance，同时也允许你使用jQuery。

Answer 2

getElementById更快，因为它使用本地代码。 jQueryselect器也将使用getElementById，但它首先需要对文本进行大量的testing和比较。

Answer 3

使用http://jsperf.com/如果你想testingjquery和dom之间的任何types的性能，但jQuery的速度通常是慢的，因为它是基于dom的。;

Answer 4

我只是偶然发现了这个post，同时想知道同样的问题…所以决定敲一个快速的testing脚本…运行它，自己尝试，吹我的脑海！

 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 5

当然getElementById是更快，但与jQuery你可以做很多事情。

为了testing，你可以尝试循环10k次，并比较前后的时间戳。

Answer 6

原生getElementById更快。 jqueryselect器引擎只是包装这个任何#xselect器。

使用萤火虫控制台，您可以通过以下方式来configurationjquery。 不知道它适用于像getElementById这样的native API调用。

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

Answer 7

嘿。 研究这个问题，我发现这个优秀的职位。 还有一个关于这个最新进入JQuery的学习网站的具体提示，以优化速度！

值得注意的是，根据最新的DOM规范，你可能不需要担心一般的性能。 只有当你创造（或发现）一个瓶颈。

优化select器

Answer 8

由于在这个页面中链接的其他性能testing似乎被打破了，并且还包括了这个问题中没有被问到的东西（即自定义jQuery方法），于是我决定制定一个新的性能基准来回答问题，其中包括确切的等效（返回DOM元素）在jQuery，而不是一个自定义的方法：

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

当我在我的Chrome中运行它时，它显示了一个直的jQuery

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

比标准JavaScript中的等效操作慢92％

 document.getElementById('foo') 

我也尝试了目前被认为是被接受的答案，这被认为是“快得多”，但是它仍然比标准的JavaScript等效率慢了89％

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

随意为自己运行它，看看你在浏览器中得到了什么，以及我所做的性能基准 。 没有jQuery的版本似乎要快得多。