getElementById

Benchmark created on

Preparation HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benchmark Test</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { display: flex; flex-wrap: wrap; }
        .box { width: 50px; height: 50px; background-color: lightgray; margin: 2px; }
        .foo { background-color: lightblue; }
    </style>
</head>
<body>

<div class="container">
    <div class="box"></div>
    <div class="box">
        <div class="box">
            <div class="box">
                <div class="box">
                    <div class="box">
                        <div class="box">
                            <div class="box">
                                <div class="box">
                                    <div class="box">
                                        <div id="foo" class="foo box" data-foo="true">Target</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Setup

    const container = document.querySelector('.container');
    for (let i = 0; i < 89; i++) {
        const div = document.createElement('div');
        div.className = 'box';
        container.appendChild(div);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
document.getElementById
document.getElementById("foo")
ready
document.getElementsByClassName
document.getElementsByClassName("foo")
ready

Revisions

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