querySelector Test (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
        <title>Тест производительности javascript</title>
        <meta charset="utf-8">
</head>
<body>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>

        <div id="a1">
                <input type="radio">
                <input type="radio">
                <input type="radio">
                <input type="radio">
                <input type="radio">
        </div>

        <div id="a2">
                <input type="checkbox">
                <input type="checkbox">
                <input type="checkbox">
                <input type="checkbox">
                <input type="checkbox">
        </div>

        <div id="a3">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
        </div>
</body>
</html>

Test runner

Ready to run.

Testing in
TestOps/sec
document.getElementById('id')
var el = document.getElementById("a1")
ready
document.querySelector('#id')
var el = document.querySelector("#a1")
ready
document.getElementsByTagName('tag')
var el = document.getElementsByTagName("input")
ready
document.querySelectorAll('tag')
var el = document.querySelectorAll("input")
ready
document.getElementsByClassName('class')
var el = document.getElementsByClassName("block")
ready
document.querySelectorAll('.class')
var el = document.querySelectorAll(".block")
ready
Complex example
var radio_checkbox = []
for(var j=0, inputs = document.getElementsByTagName("input"), len = inputs.length;j<len;j++){
        var type = inputs[j].type
        if(type=="radio" || type=="checkbox"){
        radio_checkbox.push(inputs[j])
        }
}
ready
Complex example using querySelector
var el = document.querySelectorAll("input[type='radio'],input[type='checkbox']")
ready
jQuery example
var el = $("input[type='radio'],input[type='checkbox']")
ready

Revisions

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