JSFiddle - React, Tailwind, and code Playground

by Łukasz Bącik

HTML

<button onClick="test()">Uruchom test</button>
<div id="special"></div>
<div class="special"></div>

JavaScript

function test() {
    var D1 = new Date();
    fn1()
    var D2 = new Date();

    var option1Time = D2-D1;

    var D1 = new Date();
    fn2()
    var D2 = new Date();

    var option2Time = D2-D1;


    var D1 = new Date();
    fn3()
    var D2 = new Date();

    var option3Time = D2-D1;

    document.getElementById("special").innerHTML = "<p>querySelector(): "+option1Time+"ms<br>getElementById(): "+option2Time+"ms<br>getElementsByClassName(): "+option3Time+"ms";
    return false;
}

function fn1(){
    var i=0;
    while(i!=1000000){
        document.querySelector("#special");
        i++;
    }
}
function fn2(){
    var i=0;
    while(i!=1000000){
        document.getElementById("special");
        i++;
    }
}
function fn3(){
    var i=0;
    while(i!=1000000){
        document.getElementsByClassName("special")[0];
        i++;
    }
}