All geek questions in one place

JQuery selectors - in order of speed

I found an article about this a year ago, but I can’t find it now, and all the other articles that I find are not completely complete.

I want to create the final list of the fastest ways to select elements in jQuery

As far as I understand, if I had the following

<body> <div id="container"> <ul class="count"> <li>One</li> <li>Two</li> <li class="selected">Three</li> </ul> </div> </body>

In order of speed (fastest slower) Selection by ID:

 $('#container')

Select by item:

 $('div')

Select by class using

 $('ul.count')

Select by part the identifier of the element using the element (in this case ends)

 $("div[id$='tainer']")

Choose by class

 $('.count')

Select by part of the identifier of the element (in this case ends)

 $("[id$='tainer']")

Is this in the correct order of speed and did I miss any?

thanks

+6
source share
2 answers

selector performance depends on several things. The browser is the main factor: sizzle / querySelectorAll / jsengine and the version of jquery that use them. Basically, jquery improves performance in each version and does a good job of choosing the best available method depending on the browser.

Any updates in the browser, js engine or jquery themselves can raise a new method of "best performer". Moreover, depending on the size and depth of the data, the method may suddenly become faster than another. And this is not to say about the request itself. example $ ('# id.class') may not use the same "engine" as $ ('# id'). find ('. class').

Overall, this is not a problem, jquery is pretty optimized. When I come across performance issues, it's not at all due to selectors (but for .append (), large, non-delegated events or plugins, and in general: my simple old bad coding).

If you really need performance on dom, you need to compare performance with "document.getElementbyId" (when you have an identifier to use it) and native 'document.querySelectorAll', which is apparently the fastest method of the month.

+2
source

you should look at this: in the middle of the document)

it can be calculated to a value

http://css-tricks.com/855-specifics-on-css-specificity/

0
source

Source: https://habr.com/ru/post/900682/

More articles:


All Articles