Selecting elements with a list of IDs is orders of magnitude slower than selecting them individually

Description

There isn’t a significant benefit to using $(document.getElementById('firstID')) over $('#firstID'), but using $('#firstID,#secondID') is several thousand times slower than $([document.getElementById('firstID'), document.getElementById('firstID')]); This affects all the browsers I’ve tested: Chrome, Firefox, IE11, Edge

Link to test case

https://www.measurethat.net/Benchmarks/Show/129/3/element-by-id-fetching-javascript-vs-selectors See the final test case ‘2 divs with single jquery selector’.

[dmethvin]

It sounds like this page is into a super edgy territory if it has hundreds of thousands of elements.

$('#firstID,#secondID')

This creates a jQuery set that guarantees the elements are in document order. If #secondID comes before #firstID in the document, they will appear in that order in the collection. The sort operation might be expensive.

$([document.getElementById('firstID'), document.getElementById('firstID')]);

This creates a jQuery set out of whatever you give it with very little verification and no sorting. (They might not even be DOM elements.) Cheap, but it provides no guarantees about the set.

Edit: For example, your set there has the same ID twice! Normally that would be de-duped but not when you provide an array like that.

[mgol]

The thing is $('#firstID,#secondID') is not equivalent to $([document.getElementById('firstID'), document.getElementById('firstID')]), it runs via querySelectorAll. The non-trivial part is that you’re passing a single string with a comma; we’d need to tokenize it first which is non-trivial work. This will always be slower.

If you want to have an equivalent of running getElementById twice, you’ll have to write:

$('#firstID').add('#secondID');