DOM Manipulation Vs. Attribute Manipulation

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<img src="" />
<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');
</script>

Setup

var counter = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Manipulation
if(counter == 0){
    $('img').replaceWith($img1);
    counter = 1;
} else{
    $('img').replaceWith($img2);
    counter = 0;
}
ready
Attribute manipulation
if(counter == 0){
    $('img').attr('src', 'http://www.websharedesign.com/images/icon-testing.gif');
    counter = 1;
} else{
    $('img').attr('src', 'http://www.hepcscotland.co.uk/images/testing.gif');
    counter = 0;
}
ready

Revisions

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