I did a test with few iterations to test efficiency of Document.querySelector and Element.querySelector.

Markup:

<form>
  <input type="text" />
</form>

Script:

Querying with Document.querySelector

begin = performance.now();

var 
  i = 0,
  iterations = 999999;

for ( i; i < iterations; i++ ) 
{
 element = document.querySelector('[type="text"]');
}

end = performance.now();

firstResult = end - begin;

Querying with Element.querySelector

begin = performance.now();

var 
  i = 0,
  iterations = 999999,
  form = document.querySelector('form');

for ( i; i < iterations; i++ ) 
{
 element = form.querySelector('[type="text"]');
}

end = performance.now();

secondResult = end - begin;

Log:

console.log( firstResult ); // 703.7450000001118

console.log( secondResult ); // 1088.3349999999627

The log is amazing for me because i think that Element.querySelector query only on nodes that is a descendant of the element and Document.querySelector query on all nodes of current document, right?

Why get this result?

I did a test with few iterations to test efficiency of Document.querySelector and Element.querySelector.

Markup:

<form>
  <input type="text" />
</form>

Script:

Querying with Document.querySelector

begin = performance.now();

var 
  i = 0,
  iterations = 999999;

for ( i; i < iterations; i++ ) 
{
 element = document.querySelector('[type="text"]');
}

end = performance.now();

firstResult = end - begin;

Querying with Element.querySelector

begin = performance.now();

var 
  i = 0,
  iterations = 999999,
  form = document.querySelector('form');

for ( i; i < iterations; i++ ) 
{
 element = form.querySelector('[type="text"]');
}

end = performance.now();

secondResult = end - begin;

Log:

console.log( firstResult ); // 703.7450000001118

console.log( secondResult ); // 1088.3349999999627

The log is amazing for me because i think that Element.querySelector query only on nodes that is a descendant of the element and Document.querySelector query on all nodes of current document, right?

Why get this result?

• javascript
• performance
• selector
• microbenchmark

• If you add a 1000 sibling nodes to the form, you will probably see the performance of the document level search drop. – Jonas Høgh Commented Sep 7, 2015 at 4:10
• 2 The test here, shows that your statement is incorrect – Tushar Commented Sep 7, 2015 at 4:11
• I don't know the answer to your question, or whether yours is a good benchmark, but a difference of 300 microseconds per call hardly seems like something worth worrying about in real life. – user663031 Commented Sep 7, 2015 at 4:13
• 6 yes, but this question is not asking for a Code Review, or asking for a performance tune-up. It's asking why one method is significantly faster than another, which is definitely the purview of SO. – Kaz Commented Sep 7, 2015 at 4:25
• 2 BEcause they're not asking for performance help as such, they're saying "Function A is faster than Function B, why?". Which is all about how those functions actually work. Which is a SO-type question. I can tell you right now, this question would be immediately closed as off-topic on Code Review. We don't do code explanations. – Kaz Commented Sep 7, 2015 at 6:34

2 Answers 2

From my ment above, the selector takes into account the entire document, then filters the items to check if they are descendants of the target. So it's likely that it still needs to scan the entire DOM tree like document.querySelector would need to do.

There is a discussion of the issue (that is still the current behaviour) here. You'll see in the code sample below the span is included as a result, because it can't just query items below foo in isolation.

Fiddle

Code:

document.body.innerHTML = '<div><p id="foo"><span></span></p></div>';
var foo = document.getElementById('foo');
alert( foo.querySelectorAll('div span').length);

It seems obvious to me that the result should be null, as the context is outside the element the search is began from.

Things are simple when you make them simple.... Don't you are fixing the "context", how can you think the "context" is "outside" the "context" you stated... In the example from Evan is really curious to get any result, as there are no "div" in the foo node where the selector is executed... but the answer is "I've found a span descendant of a div... but you'll not find the div there"