Image Swap-Efficiency (v4)

Revision 4 of this benchmark created on

Description

Based on my StackOverflow question: What is the most efficient way to update images in the DOM?

http://stackoverflow.com/questions/13795003/what-is-the-most-efficient-way-to-update-images-in-the-dom/13795092

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>

<div id="img1">
  <img src="http://farm8.staticflickr.com/7244/7339763896_6b3a7487fe_s.jpg" />
</div>
<div id="img2">
  <img src="http://farm9.staticflickr.com/8016/7339765048_d83ffbb15d_s.jpg" />
</div>
​

Setup

var $c1 = $("#img1"),
        $c2 = $("#img2"),
        $img1 = $c1.find('img'),
        $img2 = $c2.find('img'),
        c1 = document.querySelector("#img1"),
        c2 = document.querySelector("#img2"),
        i1 = document.querySelector("#img1 img"),
        i2 = document.querySelector("#img2 img");

Test runner

Ready to run.

Testing in
TestOps/sec
Replace element (jquery)
var img1 = $c1.html(),
    img2 = $c2.html();

$c1.html(img2);
$c2.html(img1);
ready
Update src (jquery)
var img1 = $img1.prop("src"),
    img2 = $img2.prop("src");

$img1.prop("src", img2);
$img2.prop("src", img1);
ready
Swap (no jquery)
var temp = i1.src;
i1.src = i2.src;
i2.src = temp;
ready
swap (jquery move element )
$img2.appendTo($c1);
$img1.appendTo($c2);
ready
swap (jquery repaint )
$c1.html($img2);
$c2.html($img1);
ready

Revisions

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