Benchmark: Test selector performance

HTML Preparation code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        div {
        	border: 1px solid black;
        	margin: 5px;
        	padding: 5px;
        }
        
        .nested-div {
        	border: 1px dashed blue;
        	margin: 3px;
        	padding: 3px;
        }
        
        .random-div {
        	border: 1px solid red;
        	margin: 5px;
        	padding: 5px;
        }
        
        table {
        	border-collapse: collapse;
        }
        
        th,
        td {
        	border: 1px solid black;
        	padding: 5px;
        }
    </style>
</head>

<body>
    <div id="id1" class="class1 class2">
        <div class="nested-div">Nested 1-1</div>
        <div class="nested-div">Nested 1-2</div>
        Test 1
    </div>
    <div id="id2" class="class2 class3">Test 2</div>
    <div id="id3" class="class1 class3">
        <div class="nested-div">
            <div class="random-div">
                <h1>Heading 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ipsum in purus tristique hendrerit vel et justo.
                </p>
                <p>Ut commodo blandit risus, a iaculis ipsum gravida vel.</p>
            </div>
            Nested 3-1
        </div>
        <div class="nested-div">Nested 3-2</div>
        Test 3
    </div>
    <div id="id4" class="class2 class4">Test 4</div>
    <div id="id5" class="class1 class4">Test 5</div>
    <div id="id6" class="class3 class4">
        <div class="nested-div">Nested 6-1</div>
        <div class="nested-div">Nested 6-2</div>
        Test 6
    </div>
    <div id="id7" class="class1 class2 class3 class4">
        <div class="nested-div">Nested 7-1</div>
        <div class="nested-div">Nested 7-2</div>
        Test 7
    </div>
    <div id="id8" class="class2">Test 8</div>
    <div id="id9" class="class3 class4">Test 9</div>
    <div id="id10" class="class1 class4">Test 10</div>
    <div id="id11" class="class2 class3 class4">
        <div class="nested-div">Nested 11-1</div>
        <div class="nested-div">Nested 11-2</div>
        Test 11
    </div>
    <div id="id12" class="class1 class2 class3">
        <div class="nested-div">Nested 12-1</div>
        <div class="nested-div">Nested 12-2</div>
        Test 12
    </div>
    <div id="id13" class="class1">Test 13</div>
    <div id="id14" class="class2">Test 14</div>
    <div id="id15" class="class3">
        <div class="random-div">
            <h1>Heading 2</h1>
            <p>Quisque euismod ligula ut orci facilisis, et auctor mi rhoncus.</p>
            <p>Suspendisse id dapibus est, nec facilisis nulla.</p>
        </div>
        Test 15
    </div>
    <div id="id16" class="class4">Test 16</div>
    <div id="id17" class="class1 class2 class4">Test 17</div>
    <div id="id18" class="class1 class3 class4">Test 18</div>
    <div id="id19" class="class1 class2 class3">Test 19</div>
    <div id="id20" class="class2 class3 class4">Test 20</div>

    <div class="random-div">
        <h1>Heading 3</h1>
        <p>Nunc sollicitudin nisi id elit pellentesque volutpat.</p>
        <p>Morbi efficitur tincidunt nulla nec sollicitudin.</p>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Class</th>
                <th>Content</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>id1</td>
                <td class="class1 class2">Test 1</td>
                <td>Some content here</td>
            </tr>
            <tr>
                <td>id2</td>
                <td class="class2 class3">Test 2</td>
                <td>More content here</td>
            </tr>
            <tr>
                <td>id3</td>
                <td class="class1 class3">Test 3</td>
                <td>Additional content</td>
            </tr>
            <tr>
                <td>id4</td>
                <td class="class2 class4">Test 4</td>
                <td>Even more content</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

vanilla
document.getElementById("id1").style.backgroundColor = "#FF5733"; document.getElementById("id7").style.backgroundColor = "#33FF57"; document.getElementById("id9").style.backgroundColor = "#5733FF"; Array.from(document.getElementsByClassName("class1")).forEach((elem) => { elem.style.backgroundColor = "#3F7A3D"; }); Array.from(document.getElementsByClassName("class2")).forEach((elem) => { elem.style.backgroundColor = "#7A3D3F"; }); document.getElementsByClassName("class3")[0].style.backgroundColor = "red"; document.getElementsByClassName("class3")[3].style.backgroundColor = "red"; document.getElementsByClassName("class3")[5].style.backgroundColor = "red"; document.getElementsByClassName("class3")[7].style.backgroundColor = "red"; document.getElementsByClassName("class4")[1].style.backgroundColor = "blue"; document.getElementsByClassName("class4")[6].style.backgroundColor = "blue"; document.getElementsByClassName("class4")[8].style.backgroundColor = "blue"; document.getElementsByClassName("class4")[2].style.backgroundColor = "blue"; Array.from(document.getElementsByTagName("div")).forEach((elem) => { elem.style.backgroundColor = "#3D7A6F"; }); Array.from(document.querySelectorAll("#id1 > .nested-div")).forEach((elem) => { elem.style.backgroundColor = "#3D6F7A"; }); Array.from(document.querySelectorAll(".class1.class2")).forEach((elem) => { elem.style.backgroundColor = "#7A6F3D"; }); Array.from(document.querySelectorAll("div + div")).forEach((elem) => { elem.style.backgroundColor = "#6F3D7A"; }); Array.from(document.querySelectorAll("div ~ div")).forEach((elem) => { elem.style.backgroundColor = "#3D7A3F"; }); Array.from(document.querySelectorAll('div[class^="class"]')).forEach((elem) => { elem.style.backgroundColor = "yellow"; }); Array.from(document.querySelectorAll('div[class$="class4"]')).forEach((elem) => { elem.style.backgroundColor = "fuchsia"; }); document.querySelector("div:nth-child(2)").style.backgroundColor = "#3D3F7A"; document.querySelector("div:nth-last-child(2)").style.backgroundColor = "#3D7A4F"; document.querySelector("div:first-child").style.backgroundColor = "#4F3D7A"; document.querySelector("div:last-child").style.backgroundColor = "#7A4F3D"; Array.from(document.querySelectorAll("div:only-child")).forEach((elem) => { elem.style.backgroundColor = "#3D7A5F"; }); Array.from(document.getElementsByTagName("table")).forEach((elem) => { elem.style.backgroundColor = "#5F3D7A"; }); Array.from(document.getElementsByTagName("p")).forEach((elem) => { elem.style.backgroundColor = "#7A5F3D"; }); Array.from(document.getElementsByTagName("h1")).forEach((elem) => { elem.style.backgroundColor = "#3D7A7F"; }); Array.from(document.querySelectorAll("tr")).forEach((elem) => { elem.style.backgroundColor = "#7F3D7A"; }); Array.from(document.querySelectorAll("td")).forEach((elem) => { elem.style.backgroundColor = "#7A7F3D"; }); Array.from(document.querySelectorAll("th")).forEach((elem) => { elem.style.backgroundColor = "#3D7A6F"; }); document.querySelector("th").style.backgroundColor = "cyan"; document.querySelector("tr").style.backgroundColor = "cyan"; document.querySelector("td").style.backgroundColor = "cyan"; document.querySelectorAll("td")[2].style.backgroundColor = "cyan"; document.querySelectorAll("td")[4].style.backgroundColor = "cyan"; document.querySelectorAll("td")[6].style.backgroundColor = "cyan";
own
function tag(selector, index) { let result; const parts = selector.split(" "); if (parts.length === 1) { const firstPart = parts[0]; const name = firstPart.slice(1); if (firstPart.startsWith("#") && /^[a-zA-Z0-9_-]+$/.test(name)) { result = document.getElementById(name); } else if (firstPart.startsWith(".") && /^[a-zA-Z0-9_-]+$/.test(name)) { result = document.getElementsByClassName(name); } else { result = document.querySelectorAll(firstPart); } } else { result = document.querySelectorAll(selector); } if (index !== undefined) { let item; if (index < 0) { item = result.length + index; } else { item = index; } return result[item]; } return result; } tag("#id1").style.backgroundColor = "#FF5733"; tag("#id7").style.backgroundColor = "#33FF57"; tag("#id9").style.backgroundColor = "#5733FF"; Array.from(tag(".class1")).forEach((elem) => { elem.style.backgroundColor = "#3F7A3D"; }); Array.from(tag(".class2")).forEach((elem) => { elem.style.backgroundColor = "#7A3D3F"; }); tag(".class3", 0).style.backgroundColor = "red"; tag(".class3", 3).style.backgroundColor = "red"; tag(".class3", 5).style.backgroundColor = "red"; tag(".class3", 7).style.backgroundColor = "red"; tag(".class4", 1).style.backgroundColor = "blue"; tag(".class4", 6).style.backgroundColor = "blue"; tag(".class4", 8).style.backgroundColor = "blue"; tag(".class4", 2).style.backgroundColor = "blue"; Array.from(tag("div")).forEach((elem) => { elem.style.backgroundColor = "#3D7A6F"; }); Array.from(tag("#id1 > .nested-div")).forEach((elem) => { elem.style.backgroundColor = "#3D6F7A"; }); Array.from(tag(".class1.class2")).forEach((elem) => { elem.style.backgroundColor = "#7A6F3D"; }); Array.from(tag("div + div")).forEach((elem) => { elem.style.backgroundColor = "#6F3D7A"; }); Array.from(tag("div ~ div")).forEach((elem) => { elem.style.backgroundColor = "#3D7A3F"; }); Array.from(tag('div[class^="class"]')).forEach((elem) => { elem.style.backgroundColor = "yellow"; }); Array.from(tag('div[class$="class4"]')).forEach((elem) => { elem.style.backgroundColor = "fuchsia"; }); tag("div:nth-child(2)", 0).style.backgroundColor = "black"; tag("div:nth-last-child(2)", 0).style.backgroundColor = "#3D7A4F"; tag("div:first-child", 0).style.backgroundColor = "#4F3D7A"; tag("div:last-child", 0).style.backgroundColor = "#7A4F3D"; Array.from(tag("div:only-child")).forEach((elem) => { elem.style.backgroundColor = "#3D7A5F"; }); Array.from(tag("table")).forEach((elem) => { elem.style.backgroundColor = "#5F3D7A"; }); Array.from(tag("p")).forEach((elem) => { elem.style.backgroundColor = "#7A5F3D"; }); Array.from(tag("h1")).forEach((elem) => { elem.style.backgroundColor = "#3D7A7F"; }); Array.from(tag("tr")).forEach((elem) => { elem.style.backgroundColor = "#7F3D7A"; }); Array.from(tag("td")).forEach((elem) => { elem.style.backgroundColor = "#7A7F3D"; }); Array.from(tag("th")).forEach((elem) => { elem.style.backgroundColor = "#3D7A6F"; }); tag("th", 0).style.backgroundColor = "cyan"; tag("tr", 0).style.backgroundColor = "cyan"; tag("td", 0).style.backgroundColor = "cyan"; tag("td", 2).style.backgroundColor = "cyan"; tag("td", 4).style.backgroundColor = "cyan"; tag("td", 5).style.backgroundColor = "cyan";
jquery
$("#id1").css("background-color", "#FF5733"); $("#id7").css("background-color", "#33FF57"); $("#id9").css("background-color", "#5733FF"); $(".class1").css("background-color", "#3F7A3D"); $(".class2").css("background-color", "#7A3D3F"); $(".class3").eq(0).css("background-color", "red"); $(".class3").eq(3).css("background-color", "red"); $(".class3").eq(5).css("background-color", "red"); $(".class3").eq(7).css("background-color", "red"); $(".class4").eq(1).css("background-color", "blue"); $(".class4").eq(6).css("background-color", "blue"); $(".class4").eq(8).css("background-color", "blue"); $(".class4").eq(2).css("background-color", "blue"); $("div").css("background-color", "#3D7A6F"); $("#id1 > .nested-div").css("background-color", "#3D6F7A"); $(".class1.class2").css("background-color", "#7A6F3D"); $("div + div").css("background-color", "#6F3D7A"); $("div ~ div").css("background-color", "#3D7A3F"); $('div[class^="class"]').css("background-color", "yellow"); $('div[class$="class4"]').css("background-color", "fuchsia"); $("div:nth-child(2)").first().css("background-color", "#3D3F7A"); $("div:nth-last-child(2)").first().css("background-color", "#3D7A4F"); $("div:first-child").first().css("background-color", "#4F3D7A"); $("div:last-child").first().css("background-color", "#7A4F3D"); $("div:only-child").css("background-color", "#3D7A5F"); $("table").css("background-color", "#5F3D7A"); $("p").css("background-color", "#7A5F3D"); $("h1").css("background-color", "#3D7A7F"); $("tr").css("background-color", "#7F3D7A"); $("td").css("background-color", "#7A7F3D"); $("th").css("background-color", "#3D7A6F"); $("th:first").css("background-color", "cyan"); $("tr:first").css("background-color", "cyan"); $("td:first").css("background-color", "cyan"); $("td").eq(2).css("background-color", "cyan"); $("td").eq(4).css("background-color", "cyan"); $("td").eq(6).css("background-color", "cyan");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
vanilla
own
jquery

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; rv:109.0) Gecko/20100101 Firefox/118.0

Browser/OS: Firefox 118 on Windows

View result in a separate tab

Test name	Executions per second
vanilla	2035.2 Ops/sec
own	1779.2 Ops/sec
jquery	1198.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll do my best to extract relevant information from the provided JSON data.

**Benchmark Results:**

The test results show three browsers executing JavaScript tests:

1. **Firefox 118**: This browser is running vanilla JavaScript (no jQuery), with an execution rate of 2035.21484375 executions per second.
2. **Firefox 118**: Another instance of Firefox 118 is running a custom "own" JavaScript test, with an execution rate of 1779.1666259765625 executions per second.
3. **Firefox 118**: A third instance of Firefox 118 is executing a jQuery-based JavaScript test, with an execution rate of 1198.89697265625 executions per second.

**jQuery Test:**

The jQuery test consists of various CSS selector operations:

1. `$( ".class4" ).eq(1).css("background-color", "blue");`
2. `$( ".class4" ).eq(6).css("background-color", "blue");`
3. `$( ".class4" ).eq(8).css("background-color", "blue");`
4. `$( ".class4" ).eq(2).css("background-color", "blue");`

These operations are executed at a rate of approximately 1198.89697265625 executions per second.

**Additional Observations:**

The JSON data also includes metadata about the test, such as the browser's RawUAString (Mozilla/5.0), its version (Firefox/118.0), and its operating system (Windows).

Please let me know if you'd like me to extract any other information from this data!

Related benchmarks:

Test selector performance (version: 0)

Own selector performance vs vanilla and jquery

Comparing performance of: vanilla vs own vs jquery

Created: one year ago by: Guest

Jump to the latest result

vanilla

own

jquery

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