DOM Manipulation Vs. Attribute Manipulation (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="container"></div>
<script>
  var $img1 = $('<img/>').attr('src', 'http://www.websharedesign.com/images/icon-testing.gif'),
      $img2 = $('<img/>').attr('src', 'http://www.hepcscotland.co.uk/images/testing.gif');
  $img1.appendTo('#container');
  
  var dimg = $img1.get();
  var cont = $('#container');
</script>

Setup

var s = true;

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Manipulation
if(s){
    cont.find('img').replaceWith($img1);
} else{
    cont.find('img').replaceWith($img2);
}
s=!s;
ready
Attribute manipulation
if(s){
    $img1.attr('src', 'http://www.websharedesign.com/images/icon-testing.gif');
} else{
    $img1.attr('src', 'http://www.hepcscotland.co.uk/images/testing.gif');
}
s=!s;
ready
Direct Attribute Manipulation
if(s){
    dimg.src = 'http://www.websharedesign.com/images/icon-testing.gif';
} else{
    dimg.src = 'http://www.hepcscotland.co.uk/images/testing.gif';
}
s=!s;
ready
jQuery Direct Attribute Manipulation
if(s){
    $img1.get().src = 'http://www.websharedesign.com/images/icon-testing.gif';
} else{
    $img1.get().src = 'http://www.hepcscotland.co.uk/images/testing.gif';
}
s=!s;
ready

Revisions

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