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

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

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.

Related benchmarks:

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

Jump 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):