jQuery Performance - 2015

JavaScript performance comparison

Test case created by Lars

Preparation code

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

<div id="myElement" class="myElement">
  <span>lall</span>
  <span>lall</span>
  <span>lall</span>
  <span>lall</span>
  <span>lall</span>
  <span>lall</span>
</div>
    

Preparation code output

<div id="myElement" class="myElement"> <span>lall</span> <span>lall</span> <span>lall</span> <span>lall</span> <span>lall</span> <span>lall</span> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery - no cache + no chaining (.class + tag)
$('.myElement span').css('color', 'green');
$('.myElement span').css('font-size', '1em');
pending…
jQuery - no cache + chaining (.class + tag)
$('.myElement span').css('color', 'green').css('font-size', '1em');
pending…
jQuery - each (.class + tag)
$myElement = $('.myElement span');
$myElement.each(function() {
  $myElement.find(this).css('color', 'green').css('font-size', '1em');
});
pending…
jQuery - each + cache + chaining (#id + tag)
$myElement = $('#myElement span');
$myElement.each(function() {
  $myElement.find(this).css('color', 'green').css('font-size', '1em');
});
pending…
jQuery - each + cache + chaining (#id)
$myElement = $('#myElement');
$myElement.each(function() {
  $myElement.find('span').css('color', 'green').css('font-size', '1em');
});
pending…
jQuery - each + cache + no chaining (#id)
$myElement = $('#myElement');
$myElement.each(function() {
  $myElementSpan = $myElement.find('span');
  $myElementSpan.css('color', 'green');
  $myElementSpan.css('font-size', '1em');
});
pending…
jQuery - each + no cache + chaining (.class + tag)
$myElement = $('.myElement span');
$myElement.each(function() {
  $myElement.find(this).css('color', 'green').css('font-size', '1em');
});
pending…
jQuery - each + cache + chaining (.class)
$myElement = $('.myElement');
$myElement.each(function() {
  $myElement.find('span').css('color', 'green').css('font-size', '1em');
});
pending…
jQuery - each + no cache + chaining (#id + tag)
$('#myElement span').each(function() {
  $(this).css('color', 'green').css('font-size', '1em');
});
pending…
jQuery - cache + chaining (.class)
$myElement = $('.myElement');
$myElement.find('span').css('color', 'green').css('font-size', '1em');
pending…
jQuery - cache + chaining (#id)
$myElement = $('#myElement');
$myElement.find('span').css('color', 'green').css('font-size', '1em');
pending…
jQuery - cache + chaining (#id + .class)
$myElement = $('#myElement.myElement');
$myElement.find('span').css('color', 'green').css('font-size', '1em');
pending…
jQuery - no cache + no chaining (#id + tag)
$('#myElement span').css('color', 'green');
$('#myElement span').css('font-size', '1em');
pending…
jQuery - no cache + chaining (#id + tag)
$('#myElement span').css('color', 'green').css('font-size', '1em');
pending…
JavaScript - for-loop + cache + no chaining (.class) [querySelector and querySelectorAll]
myElement = document.querySelector('.myElement');
myElement = myElement.querySelectorAll('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
  myElement[i].style.fontSize = '1em';
}
pending…
JavaScript - for-loop + cache + no chaining (#id) [querySelector and querySelectorAll]
myElement = document.querySelector('#myElement');
myElement = myElement.querySelectorAll('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
  myElement[i].style.fontSize = '1em';
}
pending…
jQuery - plugin + no cache + chaining (#id)
/*
 *  jquery-boilerplate - v3.4.0
 *  A jump-start for jQuery plugins development.
 *  http://jqueryboilerplate.com
 *
 *  Made by Zeno Rocha
 *  Under MIT License
 */

// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {


        "use strict";

                // undefined is used here as the undefined global variable in ECMAScript 3 is
                // mutable (ie. it can be changed by someone else). undefined isn't really being
                // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
                // can no longer be modified.

                // window and document are passed through as local variable rather than global
                // as this (slightly) quickens the resolution process and can be more efficiently
                // minified (especially when both are regularly referenced in your plugin).

                // Create the defaults once
                var pluginName = "foobar";
                var defaults = {
        tag: "span",
        color: "green"
                };

                // The actual plugin constructor
                function Plugin ( element, options ) {
                                this.element = element;
                                // jQuery has an extend method which merges the contents of two or
                                // more objects, storing the result in the first object. The first object
                                // is generally empty as we don't want to alter the default options for
                                // future instances of the plugin
                                this.settings = $.extend( {}, defaults, options );
                                this._defaults = defaults;
                                this._name = pluginName;
                                this.init();
                }

                // Avoid Plugin.prototype conflicts
                $.extend(Plugin.prototype, {
                                init: function () {
                                                // Place initialization logic here
                                                // You already have access to the DOM element and
                                                // the options via the instance, e.g. this.element
                                                // and this.settings
                                                // you can add more functions like the one below and
                                                // call them like so: this.yourOtherFunction(this.element, this.settings).

            this.tagColor();
                                },
        tagColor: function() {
          $(this.element).find(this.settings.tag).css('color', this.settings.color).css('font-size', '1em');;
        }
                });

                // A really lightweight plugin wrapper around the constructor,
                // preventing against multiple instantiations
                $.fn[ pluginName ] = function ( options ) {
                                return this.each(function() {
                                                if ( !$.data( this, "plugin_" + pluginName ) ) {
                                                                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
                                                }
                                });
                };

})( jQuery, window, document );

$("#myElement").foobar();
pending…
jQuery - for-loop + cache + chaining (#id tag)
$myElement = $('#myElement span');
for (var i = 0, len = $myElement.length; i < len; i++) {
  $myElement[i].style.color = 'green';
  $myElement[i].style.fontSize = '1em';
}
pending…
jQuery - for-loop + cache + chaining (.class tag)
$myElement = $('.myElement span');
for (var i = 0, len = $myElement.length; i < len; i++) {
  $myElement[i].style.color = 'green';
  $myElement[i].style.fontSize = '1em';
}
pending…
jQuery - for-loop + cache + chaining (#id tag) v2
$myElement = $('#myElement span');
for (var i = 0, len = $myElement.length; i < len; i++) {
  $($myElement[i]).css('color', 'green').css('font-size', '1em');
}
pending…
JavaScript - for-loop + cache + no chaining (#id) [getElementById and getElementsByTagName]
myElement = document.getElementById('myElement');
myElement = myElement.getElementsByTagName('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
  myElement[i].style.fontSize = '1em';
}
pending…
JavaScript - for-loop + cache + no chaining (#id) [getElementById and querySelectorAll]
myElement = document.getElementById('myElement');
myElement = myElement.querySelectorAll('span');
for (var i = 0, len = myElement.length; i < len; i++) {
  myElement[i].style.color = 'green';
  myElement[i].style.fontSize = '1em';
}
pending…
jQuery - cache + object literal (#id)
$('#myElement').find('span').css({
   color: "green",
   fontSize: '1em'
});
pending…
jQuery - cache + object literal (#id) v2
$myElement = $('#myElement');
$myElement.find('span').css({
   color: "green",
   fontSize: '1em'
});
pending…
jQuery - for-loop + cache + chaining (#id)
$myElement = $('#myElement').find('span');
for (var i = 0, len = $myElement.length; i < len; i++) {
  $myElement[i].style.color = 'green';
  $myElement[i].style.fontSize = '1em';
}
pending…

Compare results of other browsers

Revisions

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

0 Comments

lall lall lall lall lall lall