Home/ Questions/Q 7984235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:12:14+00:00

I have written this code to benchmark jQuery vs DOM performance. The performance is

  • 0

I have written this code to benchmark jQuery vs DOM performance. The performance is defferent in every browser with the worst performer Firefox X25 slower running jQuery.
Is this expected behavior? I wasn’t expecting to see such an impact with jQuery.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
    var i=0;
    var dtb = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var elem = document.getElementById('d'+index);
    }
    var dte = new Date();
    alert(dte-dtb);

    i=0;
    var dtb2 = new Date();
    var body = document.getElementById('cog');
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var elem = body.childNodes[index];
    }
    var dte2 = new Date();
    alert(dte2-dtb2);

    i=0;
    var dtb3 = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var $elem = $("#d"+index);
    }
    var dte3 = new Date();
    alert(dte3-dtb3);



    /////EDIT//////
    ///// Implemented an Array as suggested by Erik Reppen  ////////


    i = 0;
    var idNames=new Array(30);
    while(i<30){
        idNames[i] = $("#d"+i);
        i++;
    }


    i=0;
    var dtb4 = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var $elem = idNames[index];
    }
    var dte4 = new Date();
    alert(dte4-dtb4);

    /////EDIT//////////////////////////////////////////////



});

</script>
</head>

<body id="cog">
<div id="d0">sdfkjjfgdfd@@@</div><div id="d1">sdffgdfd@@@</div><div id="d2">sddfgfd</div><div id="d3">sdasfd</div><div id="d4">swqedfd</div><div id="d5">sddfdsfd</div><div id="d6">sdfd</div><div id="d7">sdsdffd</div><div id="d8">sdfsdfd</div><div id="d9">sdfkjlkjd</div><div id="d10">sdm ,nfd</div><div id="d11">sdcxvfd</div><div id="d12">sdxzcmfd</div><div id="d13">shgjmdfd</div><div id="d14">sdfvcbd</div><div id="d15">sdf;k;d</div><div id="d16">sdjklfd</div><div id="d17">sd412fd</div><div id="d18">sdfkyhkd</div><div id="d19">sdasdfd</div><div id="d20">sdhdfgsfd</div><div id="d21">sdfdsad</div><div id="d22">sdasdfd</div><div id="d23">sddfgdffd</div><div id="d24">sdklugiffd</div><div id="d25">sddfsafd</div><div id="d26">sdfq21fd</div><div id="d27">42324sdfd</div><div id="d28">sdnhmjkgufksfd</div><div id="d29">sdqwefdLAST</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This:

    $('#someId');

    ultimately boils down to the JQuery function saying

    document.getElementId('someId'); // and then wrap it in a JQuery object and return it

    But first, it has to do a bunch of logic to figure out what your intentions are based on the arg you sent. Something like (and I know there’s much more than this):

    Is it a string? Yes. Are there spaces? No. Does it start with ‘#’, ‘.’, or some valid tagName? It starts with ‘#’. Great, just grab by ID, package and return it.

    Now try doing a test on this:

    $('#someId.active > .someClass:visible')

    Vs. whatever ungodly mess you have to write for the DOM in IE7 and you’ll see the whole point of JQuery.

    Generally speaking, repeating DOM selections over and over again is kind of a silly thing to do regardless of whether you’re using core DOM methods or especially JQuery. It’s like griping about function call overhead when no functions are getting used inside loops. Try comparing some DOM methods and JQ equivalents after caching that initial element grab instead. JQ might still be slower but I doubt 25 times slower in anything.

    var $_someId = $('#someId');
dom_someId = document.getElementById('someId');
//now try looping a JQuery method vs an equivalent set of DOM methods for each

    ===Unrelated but helping with original test===

    Here’s some examples per comments below and back up at your question as far as stuff to do before the loop.

    //caching ID names before loop
var i = 30,
idNames = [];
while(i--){ //confusing but tests as i, then inside i is i-=1
idNames[i] = 'd'+(i+1);
}

    Note: You index the array by 0-30 so kill the +1 after the random index building statement in the loop. In fact I’m not sure why that 1-31 doesn’t blow up your childNodes loop since it never hits the first element and should be trying to access two that aren’t there.Remove the +1 and it’s picking 0-30. The above loop assumed you wanted 1-31 but I just saw that the HTML only goes up to the 30 and starts with 1.

    //caching object/property lookup and DOM Access/HTMLCollection/obj instantiation
var bodyChildren = body.childNodes; //DOM object lookups cost performance

//caching JQ so you can use the exact same loop afterwards
var bodyChildren = $('body').children();

//inside loops
bodyChildren[index];
    • 0