append DOM vs append string

JavaScript performance comparison

Revision 3 of this test case created by Raul

Preparation code

<div id="content" style="display:none">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://underscorejs.org/underscore.js">
</script>
<script>
  function HTMLObject(e) {
    this.tag = e || "div";
    this.id = "";
    this.className = [];
    this.content = []
  }
  var prototype = HTMLObject.prototype;
  prototype.set = function(e, t) {
    if ($.type(t) === "string") {
      t = $.trim(t);
      if (e === "tag" && t.length === 0) return this
    }
    $.type(this[e]) === $.type(t) && (this[e] = t);
    return this
  };
  prototype.get = function(e) {
    return this[e]
  };
  prototype.addClass = function(e) {
    var t = this,
        n = e;
    n = $.trim(n).split(" ");
    $.each(n, function(e, n) {
      n = $.trim(n);
      t.className.indexOf(n) === -1 && t.className.push(n)
    });
    return this
  };
  prototype.removeClass = function(e) {
    var t = this,
        n = $.trim(e).split(" ");
    $.each(n, function(e, n) {
      t.className = _.without(t.className, $.trim(n))
    });
    return this
  };
  prototype.toggleClass = function(e, t) {
    if ($.type(t) === "boolean") t ? this.addClass(e) : this.removeClass(e);
    else {
      var n = this,
          r = $.trim(e).split(" ");
      $.each(r, function(e, t) {
        n.className.indexOf(t) === -1 ? n.addClass(t) : n.removeClass(t)
      })
    }
    return this
  };
  prototype.append = function() {
    var e = this;
    $.each(arguments, function(t, n) {
      var r = !1;
      $.type(n) === "string" ? r = !0 : n instanceof HTMLObject && (r = !0);
      r && e.content.push(n)
    });
    return this
  };
  prototype.prepend = function() {
    var e = this;
    $.each(arguments, function(t, n) {
      var r = !1;
      $.type(n) === "string" ? r = !0 : n instanceof HTMLObject && (r = !0);
      r && e.content.unshift(n)
    });
    return this
  };
  prototype.appendTo = function(e) {
    $.type(e) === "object" && $.type(e.append) === "function" && e.append(this)
  };
  prototype.empty = function() {
    this.content.length = 0;
    return this
  };
  prototype.toString = function() {
    var e = this.renderOpenTag(),
        t = this.renderCloseTag(),
        n = this.renderContent();
    return [e, n, t].join("")
  };
  prototype.renderOpenTag = function() {
    var e = ["<", this.tag, ">"];
    this.id.length > 0 && e.splice(e.length - 1, 0, ' id="' + this.id + '"');
    this.className.length > 0 && e.splice(e.length - 1, 0, ' class="' + this.className.join(" ") + '"');
    return e.join("")
  };
  prototype.renderContent = function() {
    var e = this,
        t = [];
    this.content.length > 0 && $.each(this.content, function(e, n) {
      var r = $.type(n);
      r === "string" ? t.push(n) : n instanceof HTMLObject && t.push(n.toString())
    });
    return t.join("")
  };
  prototype.renderCloseTag = function() {
    return ["</", this.tag, ">"].join("")
  };
</script>
<script>
  var newElement, $newElement, $content;
  newElement = function(element) {
    return document.createElement(element);
  }
  $newElement = function(element) {
    return $(document.createElement(element));
  }
  $(function() {
    $content = $('content');
  });
</script>
      
<script>
Benchmark.prototype.teardown = function() {
  $content.empty();

};
</script>

Preparation code output

<div id="content" style="display:none"> </div> <script src="http://underscorejs.org/underscore.js"> </script> <script> function HTMLObject(e) { this.tag = e || "div"; this.id = ""; this.className = []; this.content = [] } var prototype = HTMLObject.prototype; prototype.set = function(e, t) { if ($.type(t) === "string") { t = $.trim(t); if (e === "tag" && t.length === 0) return this } $.type(this[e]) === $.type(t) && (this[e] = t); return this }; prototype.get = function(e) { return this[e] }; prototype.addClass = function(e) { var t = this, n = e; n = $.trim(n).split(" "); $.each(n, function(e, n) { n = $.trim(n); t.className.indexOf(n) === -1 && t.className.push(n) }); return this }; prototype.removeClass = function(e) { var t = this, n = $.trim(e).split(" "); $.each(n, function(e, n) { t.className = _.without(t.className, $.trim(n)) }); return this }; prototype.toggleClass = function(e, t) { if ($.type(t) === "boolean") t ? this.addClass(e) : this.removeClass(e); else { var n = this, r = $.trim(e).split(" "); $.each(r, function(e, t) { n.className.indexOf(t) === -1 ? n.addClass(t) : n.removeClass(t) }) } return this }; prototype.append = function() { var e = this; $.each(arguments, function(t, n) { var r = !1; $.type(n) === "string" ? r = !0 : n instanceof HTMLObject && (r = !0); r && e.content.push(n) }); return this }; prototype.prepend = function() { var e = this; $.each(arguments, function(t, n) { var r = !1; $.type(n) === "string" ? r = !0 : n instanceof HTMLObject && (r = !0); r && e.content.unshift(n) }); return this }; prototype.appendTo = function(e) { $.type(e) === "object" && $.type(e.append) === "function" && e.append(this) }; prototype.empty = function() { this.content.length = 0; return this }; prototype.toString = function() { var e = this.renderOpenTag(), t = this.renderCloseTag(), n = this.renderContent(); return [e, n, t].join("") }; prototype.renderOpenTag = function() { var e = ["<", this.tag, ">"]; this.id.length > 0 && e.splice(e.length - 1, 0, ' id="' + this.id + '"'); this.className.length > 0 && e.splice(e.length - 1, 0, ' class="' + this.className.join(" ") + '"'); return e.join("") }; prototype.renderContent = function() { var e = this, t = []; this.content.length > 0 && $.each(this.content, function(e, n) { var r = $.type(n); r === "string" ? t.push(n) : n instanceof HTMLObject && t.push(n.toString()) }); return t.join("") }; prototype.renderCloseTag = function() { return ["</", this.tag, ">"].join("") }; </script> <script> var newElement, $newElement, $content; newElement = function(element) { return document.createElement(element); } $newElement = function(element) { return $(document.createElement(element)); } $(function() { $content = $('content'); }); </script>

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
append(DOM)
var $div = $newElement('div'),
    $strong = $newElement('strong'),
    string = 'test';

$strong.append(string);
$div.append($strong);
$content.append($div);
pending…
append(html string generator)
var $div = new HTMLObject('div'),
    $strong = new HTMLObject('strong'),
    string = 'test';

$strong.append(string);
$div.append($strong);
$content.append($div.toString());
pending…
append(String)
var string = 'test';

$content.append(['<div>', '<strong>', string, '</strong>', '</div>'].join(''));
pending…
append(plain String)
var string = 'test';

$content.append("<div><strong>" + string + "</strong></div>");
pending…
var fragment = document.createDocumentFragment(),
    string = "test";
fragment.innerHTML = "<div><strong>" + string + "</strong></div>";
$content.append(fragment);
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