Run results for: Filtering links by their href attribute via CSS attribute selector vs. various methos of attribute testing in JS

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0

Browser: Firefox 121

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

querySelectorAll on attribute

436K/s

traditional for loop

238K/s

functional filtering

164K/s

for of loop

155K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll on attribute	436,341 Ops/sec
traditional for loop	237,543 Ops/sec
functional filtering	164,207 Ops/sec
for of loop	154,736 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)}; }