Benchmark: querySelectorAll vs query

HTML Preparation code:

<html>
<body>
    <ul style="list-style: none outside none;">
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      	<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      	<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      	<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
    </ul>
</body>
</html>

Script Preparation code:

function query(selector, context) {
    context = context || document;
    // Redirect simple selectors to the more performant function
    if (/^(#?[\w-]+|\.[\w-.]+)$/.test(selector)) {
        switch (selector.charAt(0)) {
            case '#':
                // Handle ID-based selectors
                return [context.getElementById(selector.substr(1))];
            case '.':
                // Handle class-based selectors
                // Query by multiple classes by converting the selector 
                // string into single spaced class names
                var classes = selector.substr(1).replace(/\./g, ' ');
                return [].slice.call(context.getElementsByClassName(classes));
            default:
                // Handle tag-based selectors
                return [].slice.call(context.getElementsByTagName(selector));
        }
    }
    // Default to `querySelectorAll`
    return [].slice.call(context.querySelectorAll(selector));
}

Tests:

query
query("li")
querySelectorAll
document.querySelectorAll("li")
getElementByTagName
document.getElementsByTagName("li")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
query
querySelectorAll
getElementByTagName

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 62 on Windows 8.1

View result in a separate tab

Test name	Executions per second
query	38186.6 Ops/sec
querySelectorAll	47768.4 Ops/sec
getElementByTagName	3356147.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

A daunting task!

To answer this question, I'll need to parse the HTML string and extract relevant information for each test case.

Here's my attempt:

**Parsed HTML:**
```html
<ul>
  <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
  <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
  <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
  <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
  <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
  <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
  ...
</ul>
```
**Individual Test Cases:**

1. **Test Name:** "query"
	* **Benchmark Definition:** `document.querySelector("li")`
	* **Result:** The first `li` element is selected.
2. **Test Name:** "querySelectorAll"
	* **Benchmark Definition:** `document.querySelectorAll("li")`
	* **Result:** All `li` elements are selected.
3. **Test Name:** "getElementByTagName"
	* **Benchmark Definition:** `document.getElementsByTagName("li")`
	* **Result:** An array of all `li` elements is returned.

**Latest Benchmark Result:**

1. **Test Name:** "getElementByTagName"
	* **RawUAString:** Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36
	* **Browser:** Chrome 62
	* **DevicePlatform:** Other
	* **OperatingSystem:** Windows 8.1
	* **ExecutionsPerSecond:** 3356147.25
2. **Test Name:** "querySelectorAll"
	* **RawUAString:** Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36
	* **Browser:** Chrome 62
	* **DevicePlatform:** Other
	* **OperatingSystem:** Windows 8.1
	* **ExecutionsPerSecond:** 47768.44921875
3. **Test Name:** "query"
	* **RawUAString:** Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36
	* **Browser:** Chrome 62
	* **DevicePlatform:** Other
	* **OperatingSystem:** Windows 8.1
	* **ExecutionsPerSecond:** 38186.578125

Please let me know if I've correctly parsed the HTML and extracted the required information for each test case!

Related benchmarks:

querySelectorAll vs query (version: 0)

100 Li elements using querySelectorAll and custom query function got from http://ryanmorr.com/abstract-away-the-performance-faults-of-queryselectorall/

Comparing performance of: query vs querySelectorAll vs getElementByTagName

Created: 7 years ago by: Guest

Jump to the latest result

query

querySelectorAll

getElementByTagName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):