attr function vs each 5

Benchmark created by dustin on

Preparation HTML

<img src="//d138ozz5asdy96.cloudfront.net/images/home/logo-181x36-76bf6ce2.svg" alt="" data-src="//d138ozz5asdy96.cloudfront.net/images/home/logo-181x36-9f27c90c.png">
    
<img src="//d138ozz5asdy96.cloudfront.net/images/logos/130x24-4ce8682b.svg" alt="" data-src="//d138ozz5asdy96.cloudfront.net/images/logos/130x24-d4e83794.png">

<img src="//d138ozz5asdy96.cloudfront.net/images/home/logo-181x36-76bf6ce2.svg" alt="" data-src="//d138ozz5asdy96.cloudfront.net/images/home/logo-181x36-9f27c90c.png">
    
<img src="//d138ozz5asdy96.cloudfront.net/images/logos/130x24-4ce8682b.svg" alt="" data-src="//d138ozz5asdy96.cloudfront.net/images/logos/130x24-d4e83794.png">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
attr function
$('img[data-src]').attr('src', function() {
  return $(this).data('src')
});
ready
each
$('img[data-src]').each(function() {
  var $this = $(this);
  $this.attr('src', $this.data('src'));
});
ready
each no cache
$('img[data-src]').each(function() {
  $(this).attr('src', $(this).data('src'));
});
ready
attr function $ selector
$('img[src$=".svg"]').attr('src', function() {
  return $(this).data('src')
});
ready
attr function * selector
$('img[src*=".svg"]').attr('src', function() {
  return $(this).data('src')
});
ready

Revisions

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