Question

我有一个问题。假设我们有以下html标记：

<div id='foo'>I am a div</div>

这个div存在于dom上（它不是由javascript生成的）

如果我想在javascript中多次使用这个div，这是更好的方法吗？

将其存储在如下变量中：

var d = $("#foo")
或每次用jquery调用它？： $("#foo").methodName()

哪种方法涉及较少的dom遍历？

Answer 1

最快的方法是：

document.getElementById("foo");

将此设置为变量以便重复使用可以防止需要一遍又一遍地找到它，所以是的，这是可行的方法。

如果你想用它制作一个jQuery对象：

var fooDiv = document.getElementById("demo");
var $fooDiv = $(fooDiv);

Answer 2

创建对元素的引用始终至少与选择它一样快（使用jQuery选择器$()或document.getElement...）。

那就是说，如果要在功能或范围有限的情况下多次使用它，我会选择var d =。

您不仅会保存参考，而且会更短，更易读。

基准：

http://jsbench.github.io/#3621d3b9b571cc3640fa988b42c5c873 （您可能需要运行两次;第一次从CDN注入JQuery）

保存元素参考是迄今为止最快的解决方案。

x10请求的元素获得以下结果（操作/秒越多越好）：

[no var] document.getElementById： 3,206,218 ops / sec
[var] document.getElementById： 34,382,745 ops / sec

[no var] $（）： 148,649 ops / sec
[var] $（）： 1,390,771 ops / sec

使用JavaScript getElementById或JQuery选择器

，速度提高了约10倍

Answer 3

这取决于你想如何使用你的jquery DOM句柄。考虑一个我希望使用结构的场景

<section>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3"></div>
</section>

我知道访问＃t2的最快方式是

var d = $('#t2');

然后可以随后使用d。但是考虑一下你需要在脚本中使用<section>和div的情况，最快的方法就是

var secD = $('section').eq(0); 
//assuming it comes first in the dom, 
//better still put an id on it for easy access.
var t1D = secD.find('#t1');
//this eliminates the need for jquery to do global lookups and reduces the scope of search

Answer 4

考虑DOM中的这个元素

<div id='foo'>I am a div</div>

使用jQuery（）或$（）函数将检查DOM并返回在DOM中找到的匹配元素的集合，并使用它创建一个对象。

如果您不止一次使用此对象，那么存储它并重新使用它会更明智。但现在，正如j08691所说，你可以进行一些测试，看看哪些更有效。由于这些操作非常快，你应该尝试使用循环10000次和console.log时间（开始时间和结束时间之间的差异 - 新日期（））

我认为jQuery功能是超级优化和快速的，所以你不会在很多次重复下感觉到差异。在网络中有更多的东西要优化，比如图像和动画。

简而言之，它是微观的，但引用应该比创建对象的方法更快。

在测试期间您应该记住的一点是DOM的大小。看看你体内只有一个div还是一千个会影响结果..

Answer 5

我这是jquery中最好的方式

<div class="div_class mus test var instru" id="div_id" style="display: block;">this is test div</div>

let div_id = $('#div_id').attr('class');
$('#result').html(div_id);

选择具有给定id的元素的更快捷方式

5 个答案:

基准：