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: 9 months ago

Test name	Executions per second
querySelectorAll on attribute	436341.2 Ops/sec
functional filtering	164207.2 Ops/sec
for of loop	154735.9 Ops/sec
traditional for loop	237543.0 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)}; }

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

querySelectorAll on attribute

functional filtering

for of loop

traditional for loop