Benchmark: 2023 js qs - MeasureThat.net

HTML Preparation code:

<div class="content"><ul><li><a class="first" id="first">Tralala1</a></li><li><a>Tralala2</a></li><li><a>Tralala3</a></li></ul></div>

Tests:

querySelector 1
document.querySelector(".content ul li a")
querySelector 2
document.querySelector(".content > ul > li > a")
querySelector 3
document.querySelector(".content a")
querySelector 4
document.querySelector("ul li a#first")
querySelector 5
document.querySelector("ul li a.first")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector 1
querySelector 2
querySelector 3
querySelector 4
querySelector 5

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.0.0

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
querySelector 1	1252500.2 Ops/sec
querySelector 2	1232375.9 Ops/sec
querySelector 3	2109907.0 Ops/sec
querySelector 4	1452927.8 Ops/sec
querySelector 5	2150279.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark definition is an HTML snippet that represents the test case. In this case, there are five test cases:

1. `document.querySelector(".content ul li a")`: Tests the retrieval of an anchor element (`<a>`) within a list item (`<li>`) inside a container with class `.content`.
2. `document.querySelector(".content > ul > li > a")`: Similar to the first one, but uses a more explicit descendant combinator (`>`) instead of the space character.
3. `document.querySelector(".content a")`: Tests retrieving an anchor element within the same container as the previous two test cases.
4. `document.querySelector("ul li a#first")`: Tests retrieving an anchor element with a specific ID (`#first`) within a list item.
5. `document.querySelector("ul li a.first")`: Similar to the fourth one, but uses attribute syntax for the class selector (`[class="first"]`).

**Options compared**

In this benchmark, two main approaches are being tested:

1. **Space character vs. descendant combinator**: The first and second test cases use the space character as a separator between selectors, while the third test case uses a more explicit descendant combinator (`>`) instead.
2. **ID-based vs. class-based selector**: The fourth and fifth test cases use different methods to select an element with a specific class or ID.

**Pros and Cons of each approach**

1. **Space character vs. descendant combinator**:
	* Space character: Easier to read and write, more human-readable.
	* Descendant combinator (`>`): Faster and more efficient for the browser, as it allows the browser to skip unnecessary elements in the DOM tree.
2. **ID-based vs. class-based selector**:
	* ID-based selector (`#first`): Faster and more efficient for the browser, as IDs are unique within a document.
	* Class-based selector (`[class="first"]`): More flexible and easier to maintain, but may be slower due to the need to iterate over all elements with the specified class.

**Other considerations**

1. **Library usage**: None of the test cases use any external libraries or frameworks.
2. **Special JavaScript features or syntax**: The benchmark does not explicitly mention any special JavaScript features or syntax (e.g., async/await, Promises). However, it is possible that some browsers may optimize certain selectors using these features.

**Alternatives**

Other alternatives to measure the performance of CSS selector operations could include:

* Using different types of selectors, such as attribute selectors (`[attr="value"]`) or pseudo-classes (e.g., `:hover`).
* Adding more complex structures to the DOM tree, such as nested elements or event handlers.
* Incorporating JavaScript code into the test cases, such as iterating over a list of elements or using loops.

Related benchmarks:

2023 js qs (version: 0)

Comparing performance of: querySelector 1 vs querySelector 2 vs querySelector 3 vs querySelector 4 vs querySelector 5

Created: one year ago by: Guest

Jump to the latest result

querySelector 1

querySelector 2

querySelector 3

querySelector 4

querySelector 5

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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