Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
get focusable element: querySelectorAll vs loop v2
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=499566" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) Version/8.0.8 Safari/600.8.9
Browser:
Safari 8
Operating system:
Mac OS X 10.10.5
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
for loop
0.0 Ops/sec
querySelectorAll
657568.8 Ops/sec
HTML Preparation code:
<div> <div class="container"> <div id="target" class="container"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <div tabindex="0">Focusable</div> <div class="container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <div class="container"> <div tabindex="0">Focusable</div> <input type="text" /> </div> </div> </div> <div class="container"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <div tabindex="0">Focusable</div> <div class="container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <div class="container"> <div tabindex="0">Focusable</div> <input type="text" /> <input disabled="disabled" type="text" /> </div> </div> <div class="container"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <div tabindex="0">Focusable</div> <div class="container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <div class="container"> <div tabindex="0">Focusable</div> <input type="text" /> </div> </div> <div class="container"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <div tabindex="0">Focusable</div> <div class="container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <div class="container"> <div tabindex="0">Focusable</div> <input type="text" /> </div> </div> </div> </div> </div>
Script Preparation code:
var target = document.getElementById('target'); function getCandidates(target) { var candidates = []; var children = target.children; for (var element of children) { if (element.tabIndex >= 0 && (element.disabled === undefined || element.disabled === false) && element.inert === false) { if (element.tagName === 'A' && element.getAttribute('href') === null) { continue; } candidates.push(element); } if (element.childElementCount) { candidates = candidates.concat(getCandidates(element)); } } return candidates; }
Tests:
for loop
getCandidates(target);
querySelectorAll
const candidates = Array.from(target.querySelectorAll( 'a[href], button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), details, [tabindex]:not([tabindex="-1"])' )); candidates.filter((candidate) => candidate.inert === false);