Image Swap-Efficiency

Benchmark created by Jordan Shaw 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="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.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>
​

Test runner

Ready to run.

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

$("#img1").html(img2);
$("#img2").html(img1);
ready
Update src (jquery)
var img1 = $("#img1 img").attr("src"),
    img2 = $("#img2 img").attr("src");

$("#img1 img").attr("src", img2);
$("#img2 img").attr("src", img1);
ready
Swap (no jquery)
var img1 = document.querySelector("#img1 img"),
    img2 = document.querySelector("#img2 img");

var temp = img1.src;
img1.src = img2.src;
img2.src = temp;
ready
swap (jquery move element )
var img1 = $("#img1"),
    img2 = $("#img2");

var imgEl = img1.find("img");
img2.find("img").appendTo(img1);
imgEl.appendTo(img2);
ready
swap (jquery repaint )
var img1 = $("#img1").find("img"),
    img2 = $("#img2").find("img");

$("#img1").html(img2);
$("#img2").html(img1);
ready

Revisions

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