javascript - Faster way to select an element with a given id - Stack Overflow

admin管理员组

文章数量:1316839

I have a question. Let's say we have the following html tag:

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

Τhis div exists on the dom(it is not generated by javascript)

If I want to use this div in javascript many times which is the better way to do it?

• store it in a variable like this:

  var d = $("#foo")

• or call it every time with jquery?: $("#foo").methodName()

Which method does involve less dom traversal?

I have a question. Let's say we have the following html tag:

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

Τhis div exists on the dom(it is not generated by javascript)

If I want to use this div in javascript many times which is the better way to do it?

• store it in a variable like this:

  var d = $("#foo")

• or call it every time with jquery?: $("#foo").methodName()

Which method does involve less dom traversal?

• javascript
• jquery
• html
• dom
• dom-traversal

Share Improve this question Follow edited May 15, 2019 at 10:19 Manos Kounelakis asked Mar 10, 2017 at 21:10 Manos KounelakisManos Kounelakis 3,18155 gold badges3737 silver badges6565 bronze badges 5

• I think caching should be faster. – Sergio Tulentsev Commented Mar 10, 2017 at 21:12
• Why don't you run some tests and see? – j08691 Commented Mar 10, 2017 at 21:14
• I don't know how – Manos Kounelakis Commented Mar 10, 2017 at 21:15
• 1 Please explain when downvoting – Manos Kounelakis Commented Mar 10, 2017 at 21:15
• You're basically asking; "what's faster, calling a function once, or calling a function multiple times?" Also, as with all questions about performance, the answer is generally "depends". For instance, does that div exist in the DOM all the time, or is it dynamically added? – Heretic Monkey Commented Mar 10, 2017 at 21:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

The fastest way is:

document.getElementById("foo");

Setting this to a variable for reuse will prevent the need to find it over and over again, so yes that is the way to go.

if you want to make a jQuery object out of it:

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

It depends really on how you want to use your jquery DOM handle. Consider a scenario where i want to work with a structure as such

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

the fastest way i know to access #t2 would be

var d = $('#t2');

then d can be used later as you wish. But consider a case where you need to use the <section> and a div in your script, the fastest way to do that would be

var secD = $('section').eq(0); 
//assuming it es 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

Creating a reference to the element will always be at least as fast as selecting it (be it with jQuery selector $() or document.getElement...).

That said, I would go for var d = if you are going to use it several times in a function or a limited scope.

Not only you will have the reference saved, but also it will be shorter and more readable.

Benchmarks:

http://jsbench.github.io/#3621d3b9b571cc3640fa988b42c5c873 (you might have to run it twice; first time it'll inject JQuery from CDN)

Saving element reference is by far the fastest solution.

A x10 requested element gets the following results (the more ops/sec the better):

[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

That's about x10 times faster with either JavaScript getElementById or JQuery selector

Considering this element in the DOM

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

Using the jQuery() or $() function will check the DOM and return a collection of matched elements either found in the DOM and create an object with it.

If you use this object more than once, it would be wiser to store it and just reuse it. But now, as j08691 said, you could run some tests and see what's more effective. As these operations are super fast, you should try to do it with a loop for 10000 times and console.log the time (difference between time at start and time at end — new Date())

I think that the jQuery function is super optimised and fast so you won't be able too feel a difference under a very high number of repetitions. There are way more things to optimise in web such as images and animations.

In a nutshell, it is microscopic, but a reference should be faster than a method that creates an object.

Something you should keep in mind during the tests would be the size of the DOM. See if you only have one div in the body or a thousand would influence the results..

I this the best way in jquery is like

<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);

本文标签： javascriptFaster way to select an element with a given idStack Overflow