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

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)}; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll on attribute
functional filtering
for of loop
traditional for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark definition json represents four different ways to filter links by their `href` attribute in JavaScript. The test cases are:

1. `querySelectorAll`: Using the CSS attribute selector to select elements with a specific attribute.
2. Functional filtering: Using the `filter()` method to iterate over an array of elements and apply a condition.
3. For-of loop: Iterating over an array of elements using a for-of loop and applying a condition.
4. Traditional for loop: Iterating over an array of elements using a traditional for loop and applying a condition.

**Comparison**

The comparison is between the performance of each approach in filtering links by their `href` attribute.

**Options Compared**

1. `querySelectorAll`: This method uses CSS selectors to select elements based on their attributes.
2. Functional filtering: This approach uses the `filter()` method to iterate over an array of elements and apply a condition.
3. For-of loop: This approach uses a for-of loop to iterate over an array of elements and apply a condition.
4. Traditional for loop: This approach uses a traditional for loop to iterate over an array of elements and apply a condition.

**Pros and Cons**

1. `querySelectorAll`:
	* Pros:
		+ Faster, as it allows the browser's CSS engine to optimize the selection process.
		+ More concise code.
	* Cons:
		+ May not work for non-standard attribute values or complex selectors.
2. Functional filtering:
	* Pros:
		+ More flexible and adaptable to changing data structures.
		+ Can be more readable in some cases.
	* Cons:
		+ May be slower due to the overhead of function calls and iterations.
3. For-of loop:
	* Pros:
		+ Faster, as it avoids function call overhead.
		+ More efficient for large datasets.
	* Cons:
		+ Less concise code.
		+ May not work with complex data structures or dynamic loops.
4. Traditional for loop:
	* Pros:
		+ More familiar and intuitive for some developers.
		+ Can be more readable in some cases.
	* Cons:
		+ Slower due to the overhead of function call and loop management.

**Library and Features**

None of the test cases use any external libraries or special JavaScript features. They only rely on standard JavaScript methods and syntax.

**Other Considerations**

When choosing an approach, consider the trade-offs between speed, code conciseness, and maintainability. If performance is critical, `querySelectorAll` or for-of loops might be a good choice. However, if flexibility and readability are more important, functional filtering or traditional for loops might be preferred.

The benchmark results show that `querySelectorAll` is generally the fastest approach, followed closely by for-of loops. Functional filtering and traditional for loops are slower due to the overhead of function calls and iterations.

Filtering links by their href attribute via CSS attribute selector vs. various methos of attribute testing in JS (version: 0)

Comparing performance of: `querySelectorAll on attribute vs functional filtering vs for of loop vs traditional for loop`

Created: 2 years ago by: Guest

Go to the latest result

querySelectorAll on attribute

functional filtering

for of loop

traditional for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Filtering links by their href attribute via CSS attribute selector vs. various methos of attribute testing in JS (version: 0)

Comparing performance of: querySelectorAll on attribute vs functional filtering vs for of loop vs traditional for loop

Created: 2 years ago by: Guest

Go to the latest result

querySelectorAll on attribute

functional filtering

for of loop

traditional for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `querySelectorAll on attribute vs functional filtering vs for of loop vs traditional for loop`