Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Filtering links by their href attribute via CSS attribute selector vs. various methos of attribute testing in JS
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=505153" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15
Browser:
Safari 17
Operating system:
Mac OS X 10.15.7
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
querySelectorAll on attribute
1313052.9 Ops/sec
functional filtering
109509.4 Ops/sec
for of loop
75520.5 Ops/sec
traditional for loop
126840.4 Ops/sec
HTML Preparation code:
<a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://test.com"> Example </a> <a href="https://example.com"> Test </a> <a href="https://test.com"> Example </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://test.com"> Example </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://test.com"> Example </a> <a href="https://test.com"> Example </a> <a href="https://test.com"> Example </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a> <a href="https://example.com"> Test </a>
Tests:
querySelectorAll on attribute
document.querySelectorAll("a[href^='https://test.com']");
functional filtering
[...document.querySelectorAll('a')].filter( link => link.getAttribute('href')?.startsWith('https://test.com') )
for of loop
let links = document.querySelectorAll('a'); let test_links = []; for( link of links ) { if(link.getAttribute('href')?.startsWith('https://test.com')) {test_links.push(link)}; }
traditional for loop
let links = document.querySelectorAll('a'); let test_links = []; for( let i = links.length-1; i !== 0; i-- ) { let link = links[i]; if(link.getAttribute('href')?.startsWith('https://test.com')) {test_links.push(link)}; }