Benchmark: Query performance on 100000 elements page

Script Preparation code:

var attributeName = "data-resource";
const elements = 100000;


// script without attribute
document.body.appendChild(document.createElement("script"))


// script1 with attribute
const script1 = document.createElement("script");
script1.setAttribute(attributeName, 1);
document.body.appendChild(script1);


for (let i = 0; i < elements; i++) {  	    	 
    document.body.appendChild(document.createElement("div"));
}


// script2 with attribute
const script2 = document.createElement("script");
script2.setAttribute(attributeName, 2);
document.body.appendChild(script2);

Tests:

Query by tag
Array.from(document.body.querySelectorAll("script")) .filter(el => el.hasAttribute(`${attributeName}`));
Query by attribute
document.body.querySelectorAll(`[${attributeName}]`);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Query by tag
Query by attribute

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark is designed to measure the performance of two different approaches for querying elements in an HTML document:

1. **Query by tag**: `Array.from(document.body.querySelectorAll("script")).filter(el => el.hasAttribute(`${attributeName}`));`
2. **Query by attribute**: `document.body.querySelectorAll(`[${attributeName}]`);`

The benchmark uses a JavaScript microbenchmarking framework to test the performance of these two approaches on a page with 100,000 elements.

**Options Compared**

Two options are compared:

1. **Native DOM Query**: The native DOM query method (`document.body.querySelectorAll("script")`) is used as a baseline for comparison.
2. **Filter-based Query**: The `Array.from` method is used to filter the results of the native DOM query, which introduces additional overhead.

**Pros and Cons**

**Native DOM Query:**

Pros:

* Fastest execution time
* Simple and efficient

Cons:

* May not work as expected if the attribute is not present on all elements
* May throw errors if the attribute is not a valid attribute name

**Filter-based Query:**

Pros:

* Works regardless of whether the attribute is present on all elements
* Can handle cases where the attribute has multiple values

Cons:

* Slower execution time due to the additional filtering step
* More complex and verbose code

**Other Considerations**

* The `attributeName` variable is used to specify the name of the attribute being queried. This allows for easy testing with different attributes.
* The benchmark uses a simple HTML page with 100,000 elements to simulate a real-world scenario.

**Library Used**

There is no library explicitly mentioned in the benchmark definition. However, the `Array.from` method is used, which is a part of the ECMAScript standard and does not require any external libraries.

**Special JS Feature or Syntax**

The `filter` method is used to filter the results of the native DOM query. This feature is part of the ECMAScript 5 specification and is widely supported in modern browsers.

Now that we've analyzed the benchmark definition, let's take a look at some alternative approaches for querying elements:

* **Sizzle**: A fast and efficient CSS selector engine that can be used to query elements.
* **QuerySelectorAll**: A native DOM method that allows querying elements using CSS selectors.
* **jQuery**: A popular JavaScript library that provides an extension of the DOM API, including methods for querying elements.

These alternatives offer different trade-offs in terms of performance, complexity, and features. The choice of which one to use depends on the specific requirements of the project.

Related benchmarks:

Query performance on 100000 elements page (version: 0)

Comparing performance of: Query by tag vs Query by attribute

Created: 2 years ago by: Guest

Jump to the latest result

Query by tag

Query by attribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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