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 (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

querySelectorAll on attribute

1.3M/s

traditional for loop

127K/s

functional filtering

110K/s

for of loop

76K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll on attribute	1,313,053 Ops/sec
traditional for loop	126,840 Ops/sec
functional filtering	109,509 Ops/sec
for of loop	75,521 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)}; }