Image Swap-Efficiency (v3)

Revision 3 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="//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 id="img3">
  <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 i1 = $("#img1 img");
ready
Update src (jquery)
var i2 = document.querySelector("#img2 img");
ready
33
var i3 = document.getElementById("img3").getElementsByTagName("img")[0];
ready

Revisions

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