getElementById vs. nested querySelector (v117)

Revision 117 of this benchmark created by DarkPark on

Description

Compare the speed of getElementById and nested querySelector

Preparation HTML

<div id="block1">
        <div id="block2">
                <div id="block3">
                        <div id="block4">
                                <div id="block5">
                                        <div id="block6">
                                                <div id="block7">
                                                        <div id="block8">
                                                                <div id="block9">
                                                                        <div id="block10">
                                                                                content
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>

Setup

var block9 = document.getElementById('block9');

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById level 1
var block = document.getElementById('block1');
ready
getElementById level 10
var block = document.getElementById('block10');
ready
querySelector simple
var block = document.querySelector('#block10');
ready
querySelector nested
var block = block9.querySelector('div');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.