JSFiddle - React, Tailwind, and code Playground

by Keith Chu

HTML

<div id="boof" name="boof"></div>

JavaScript

(function() {
    const BTN_NUM = 10000;
    let myDiv = document.getElementById('boof');

    let idPrefix = "btn-";
    for (let i = 0; i < BTN_NUM; i++) {
        let name = idPrefix + i;
        spawnButton(name, myDiv, "Button");
    }

    let t0, t1, jQueryPerformance, getElementPerformance;

    //jQuery
    t0 = performance.now();
    for (let i = 0; i < BTN_NUM; i++) {
        let id = '#' + idPrefix + i;
        var btn = document.querySelector(id);
    }
    t1 = performance.now();
    jQueryPerformance = t1 - t0;

    //document.getElementById    
    t0 = performance.now();
    for (let i = 0; i < BTN_NUM; i++) {
        let id = '[name="' + idPrefix + i + '"]';
        var btn = document.querySelector(id);
    }
    t1 = performance.now();
    getElementPerformance = t1 - t0;

    //document.querySelector
    t0 = performance.now();
    for (let i = 0; i < BTN_NUM; i++) {
        let id = '[name="' + idPrefix + i + '"]';
        var btn = document.body.querySelector(id);
    }
    t1 = performance.now();
    querySelectorPerformance = t1 - t0;

    console.log("querySelector ID: " + jQueryPerformance + " ms");
    console.log("querySelector attr: " + getElementPerformance + " ms");
    console.log("querySelector.body attr: " + querySelectorPerformance + " ms");


    function spawnButton(id, container, contents) {
        var btn = document.createElement("button");
        btn.id = id;
        btn.textContent = contents;
        container.appendChild(btn);
    }

})();