Preparation code

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

<script>
        var my = {

        each : function(itemArray, itemCallback) {
                for (var i = 0; i < itemArray.length; i++) {
                        itemCallback(itemArray[i], i);
                }
        },

        addClass : function(el, klass) {
                if (el.classList) {
                        el.classList.add(klass);
                }
                else {
                        var attr = el.getAttribute("class") || "";
                        el.setAttribute("class", attr + " " + klass);
                }
        },

        removeClass : function(el, klass) {
                if (el.classList) {
                        el.classList.remove(klass);
                }
                else {
                        var attr = el.getAttribute("class") || "";
                        var regex = new RegExp(klass, "g")
                        el.setAttribute("class", attr.replace(regex, ""));
                }
        },

        get : function(elemId) {
                return document.getElementById(elemId);
        },

        find : function(selector) {
                return document.querySelectorAll(selector);
        },

        append :function(el, html) {
                var insertFn = my.removeToInsertLater(el);
                el.innerHTML += html;
                insertFn();
        },

        prepend : function(el, html) {
                var content = el.innerHTML;
                el.innerHTML = html + content;
        },

        removeToInsertLater : function(element) {
                var parentNode = element.parentNode;
                var nextSibling = element.nextSibling;
                parentNode.removeChild(element);
                return function() {
                        if (nextSibling) {
                                parentNode.insertBefore(element, nextSibling);
                        } else {
                                parentNode.appendChild(element);
                        }
                };
        }

};
</script>


<div class="container">
  <div id="foobar">
    stuff
  </div>
</div>
<script>
  Benchmark.prototype.setup = function() {
    window.dataArray = [];
    for (var i = 0; i < 20; i++) {
      window.dataArray.push("value " + i);
    }
    
  };

  Benchmark.prototype.teardown = function() {
    $(".container").html("<div id=\"foobar\">stuff</div>");
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

var elems = my.find(".container");
my.each(elems, function(el) {
        my.addClass(el, "dumdum");
});

var foobar = my.get("foobar");
my.each(dataArray, function(item, index) {
  my.append(foobar, "<span>" + item + "</span>");
  my.addClass(foobar, index);
});

 

$(".container").addClass("dumdum");

var foobar = $("#foobar");
$.each(dataArray, function(index, item) {
  foobar.append("<span>" + item + "</span>");
  foobar.addClass(index);
});

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

Compare results of other browsers

0 comments