jquery simple vs. jquery plugin

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="js-foobar">

Preparation code output

<div id="js-foobar"> <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 - simple
$('#js-foobar span').css('color', 'green');
jQuery - plugin
 *  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;

                // 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).

        tagColor: function() {
          $(this.element).find(this.settings.tag).css('color', this.settings.color);

                // 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 );


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

Compare results of other browsers


lall lall lall lall lall lall