Is it slower if the querySelector is specific?-CodePudding

Is it slower if the querySelector is specific?

I often copy and use the selector with the Chrome Developer Tools.

However, in some Atricle, it was said that if the querySelector is specific, it works more slowly.

Is this true?

document.querySelector('A > B > C > D > E')

document.querySelector('A E')

I wonder if this makes a difference in speed.

I wonder how big the difference is if there is a speed difference.

CodePudding user response：

It is generally considered best practice to use the most specific selector possible in your querySelector calls because this will make your code more efficient. Using a specific selector like 'A > B > C > D > E' will typically be faster than using a less specific selector like 'A E' because the browser will have to do less work to find the element or elements you are looking for.

CodePudding user response：

it depends:

On the page itself.
On the number of element on the page.
On the browser implementation.
On the query.
On the machine/browser load.

In general: the less the better, if we are talking about number of comparisons.

With JSBench.me you can try for yourself

<!DOCTYPE html>
<html>
  <body>
    <div >
      <h1>This is the element with class A</h1>
      <div >
        <h2>This is the element with class B</h2>
        <div >
          <h3>This is the element with class C</h3>
          <div >
            <h4>This is the element with class D</h4>
            <div >
              This is the element with class E. This is the element selected by the selector 'A > B > C > D > E'.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      <h1>This is another element with class A</h1>
      <div >
        <h2>This is another element with class B</h2>
        <div >
          <h3>This is another element with class C</h3>
          <div >
            <h4>This is another element with class D</h4>
            <div >
              This is another element with class E.
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

document.querySelector('A > B > C > D > E')

document.querySelector('A E')

Make sure to run the bench a few times so you can see the variability/instability especially if you make the page bigger copying and duplicating more elements.

In general you should not be concern about this low level optimization unless you have reason to believe this is causing problems on your application.

Always create a benchmark test to validate your hypothesis prior to any kind of optimization.

CodePudding user response：

It is generally true that using more specific selectors in querySelector() can make it slower. This is because a more specific selector requires the browser to search through a larger portion of the document tree in order to find the matching element.

For example, in the first querySelector() call in your question, the selector A > B > C > D > E will match only elements that are direct children of E and have D, C, B, and A as their ancestors in that order. This means that the browser will have to search through the entire document tree to find all the elements that match this selector.

In contrast, the second querySelector() call uses the selector A E, which will match any E elements that are descendants of an A element. This selector is less specific, so the browser will only have to search through the descendants of A elements to find matching elements. This will generally be faster than searching through the entire document tree.

In general, it is recommended to use the most specific selector that will still match the element you are looking for.