test jQuery against native

by spacexplorer

HTML

<button onclick="test()">Click to change background color 10,001 times using jQuery selector</button>
<button onclick="test2()">Click to change background color 10,001 times using object reference</button>
<div id="showMS"></div>
<div id="explanation">
In the first test we use the jQuery "$" selector to select the element and change the background color.<br /><br />
In the second test we create an object with the DIV of interest as a property.  Since our object already has a handle
to the DOM node we don't need to make a selection.<br /><br />
Eliminating the jQuery framework gives a 3x to 10x performance enhancement in this example, depending on the browser used.

</div>

CSS

.hilite {
    color : #CC0000;
  }

.color1 { background-color:rgb(255, 136, 0); }
.color2 { background-color:rgb(136, 255, 0); }
  
  #thing {
    position:absolute;
    left:16px;
    top:50px;
    width:100px;
    height:100px;
    background-color:#FF8800;
  }

  button {
    font-size:14px;
    margin:4px;
  }
  
  #showMS {
    position:absolute;
    left:16px;
    top:280px;
    font-family:Arial;
    font-size:11px;
    font-weight:bold;
    line-height:16px;
    color:#333333;
  } 
  
  #explanation {
    position:absolute;
    width:390px;
    left:130px;
    top:90px;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    border:1px solid #C0C0C0;
    line-height:18px;
    color:#444444;
    padding:8px;
  }

JavaScript

function test2()
    {
      gThing.test();
    }
    
    
    function test()
    {
      var domNode = $("#thing");
      var startTime = new Date();

      for ( var z = 0; z < 10001; z++ )
      {
          domNode.toggleClass("color1 color2");
      }
      
      var endTime = new Date();
      var elapsed = endTime.getTime() - startTime.getTime();
      document.getElementById("showMS").innerHTML = "elapsed time with jQuery selector: <span class='hilite'>" + elapsed + " ms</span><br />";
    }
    
    
    function thing()
    {
      var _i = this;
      
      
      _i.cont = null;
      
   
      _i.test = function()
      {
        var startTime = new Date();
        
        for ( var z = 0; z < 10001; z++ )
        {
          if ( _i.cont.style.backgroundColor == "rgb(255, 136, 0)" )
          {
            _i.cont.style.backgroundColor = "rgb(136, 255, 0)";
          }
          else
          {
    
            _i.cont.style.backgroundColor = "rgb(255, 136, 0)";
          }
        }
        
        var endTime = new Date();
        var elapsed = endTime.getTime() - startTime.getTime();
        document.getElementById("showMS").innerHTML += "elapsed time with object reference: <span class='hilite'>" + elapsed + " ms</span><br />";
      }
      
         
      _i.constructor = function()
      {
        _i.cont = document.createElement("DIV");
        _i.cont.id = "thing";
        _i.cont.style.position = "absolute";
        _i.cont.style.left = "16px";
        _i.cont.style.top = "90px";
        _i.cont.style.width = "100px";
        _i.cont.style.height = "100px";
        _i.cont.style.backgroundColor = "rgb(255,136,0)";
        _i.cont.className = 'color1';  
        document.body.appendChild(_i.cont);
      }
      
      _i.constructor();
    }
       
    
    function startup()
    {
      gThing = new thing();
    }
    
    
    window.onload = startup;