Benchmark: Selectors or children

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<table class="custom-table-widget-designer" id="customTable">
        <tbody><tr>
                    <td class="delete-row-wrapper left-corner"></td>
                    <td class="delete-column-wrapper delete-column">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                    <td class="delete-column-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                    <td class="delete-column-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                            <td class="td-add add-column-cell" rowspan="6">Add Column</td>
        </tr>
        <tr>
                    <td class="delete-row-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                <td class="delete-column">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-1-1" data-column="1" data-row="1" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-2-1" data-column="2" data-row="1" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-3-1" data-column="3" data-row="1" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                    </tr>
        <tr>
                    <td class="delete-row-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                <td class="delete-column">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-1-2" data-column="1" data-row="2" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-2-2" data-column="2" data-row="2" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-3-2" data-column="3" data-row="2" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                    </tr>
        <tr>
                    <td class="delete-row-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                <td class="delete-column">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-1-3" data-column="1" data-row="3" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-2-3" data-column="2" data-row="3" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-3-3" data-column="3" data-row="3" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                    </tr>
        <tr>
                    <td class="delete-row-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                <td class="delete-column">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-1-4" data-column="1" data-row="4" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-2-4" data-column="2" data-row="4" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-3-4" data-column="3" data-row="4" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                    </tr>
        <tr>
                    <td class="delete-row-wrapper">
                        <span class="k-i-trash k-icon"></span>
                    </td>
                <td class="delete-column">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-1-5" data-column="1" data-row="5" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-2-5" data-column="2" data-row="5" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                <td class="">
                    <span class="k-i-trash k-icon hide"></span>

                    <button id="cell-editing-button-3-5" data-column="3" data-row="5" class="btn btn-default btn-editable cell-edit-button">Double click or drag &amp; drop</button>
                </td>
                    </tr>
    <tr>
        <td class="add-row-cell td-add" colspan="4">Add Row</td>
    </tr>
</tbody></table>

Tests:

Selectors
var test = $('#myTable tr');
Children
var test1 = $('#myTable').children("tbody").children("tr");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Selectors
Children

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Chrome 73 on Windows 7

View result in a separate tab

Test name	Executions per second
Selectors	88072.1 Ops/sec
Children	201270.8 Ops/sec

Selectors or children (version: 0)

Comparing performance of: Selectors vs Children

Created: 5 years ago by: Guest

Jump to the latest result

Selectors

Children

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A