select 具有给定 id 的元素的更快方法

Question

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

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

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

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

将其存储在这样的变量中：

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

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

Answer 1

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

也就是说，如果您要在一个函数中或在有限的范围内多次使用它，我会选择 var d =。

您不仅会保存引用，而且会更短、更易读。

基准：

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

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

一个x10请求的元素得到如下结果（ops/sec越多越好）：

[无变量] document.getElementById: 3,206,218 ops/sec
[var] document.getElementById: 34,382,745 ops/sec

[无变量] $(): 148,649 ops/sec
[var] $(): 1,390,771 ops/sec

使用 JavaScript getElementById 或 JQuery 选择器

大约快 10 倍

Answer 2

最快的方法是：

document.getElementById("foo");

将其设置为变量以供重用将避免一遍又一遍地查找它的需要，所以是的，这就是方法。

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

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

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 和 return 在 DOM 中找到的匹配元素集合并创建一个反对它。

如果您多次使用该对象，最好将其存储起来并重新使用。但是现在，正如 j08691 所说，您可以运行进行一些测试，看看什么更有效。由于这些操作非常快，您应该尝试使用 10000 次循环和 console.log 时间（开始时间和结束时间之间的差异 - new Date()）

我认为 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);

select 具有给定 id 的元素的更快方法

Faster way to select an element with a given id

html

javascript

jquery

dom

dom-traversal

基准：