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++; } }
<button onClick="test()">Uruchom test</button> <div id="special"></div> <div class="special"></div>