Appending HTML element with attributes

JavaScript performance comparison

Revision 12 of this test case created by

Preparation code

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

<div id="screenshots"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var link = "something.html";
  var title = "Some Title";
  var el = "someImg.png";
  
  var data = { 
   'link': "something.html",
   'title': "Some Title",
   'el': "someImg.png"
  };
  
  var template = '<a href="{{ link }}" title="{{ title }}"><img src="{{ el }}" alt="" width="200px" height="200px"></a>';
  
  var isObject = function(o) {
    return typeof o === "object";
  };
  var isFunction = function(o) {
    return typeof o === "function";
  };
  var isString = function(o) {
    return typeof o === "string";
  };
  
  function mknode(tag, attrs, content) {
    var node = document.createElement(tag);
    var args = arguments,
      content;
    if (args.length > 1) {
      if (isObject(args[1])) {
        for (var i in args[1]) {
          if (!isFunction(args[1][i]))
            node.setAttribute(i, args[1][i])
        }
      } else
      if (isString(args[1]))
        content = args[1];
      if (isString(args[2]))
        content = args[2];
    }
    if (content)
      node.innerHTML = content;
  
    return node;
  }
  
  var timLiteCached = function() {function i(b,e){return b.replace(m,function(g,c){for(var j=c.split("."),k=j.length,h=e,f=0;f<k;f++){h=h[j[f]];if(f===k-1)return h}})}var m=RegExp("{{\\s*([a-z0-9_][\\.a-z0-9_]*)\\s*}}","gi"),d={},l=window.JSON;return l?function(b,e){var g=l.stringify(e),c=d[b]&&d[b][g];if(c)return c;d[b]||(d[b]={});return c=d[b][g]=i(b,e)}:i}();

};

Benchmark.prototype.teardown = function() {
  var len = $('#screenshots').children().length;
  if (len > 50) {
    $("#screenshots").empty();
  }

};
</script>

Preparation code output

<div id="screenshots"></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
Original Code
$('#screenshots').append('<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200px" height="200px"></a>');
pending…
jq DOM scripting
$("#screenshots").append(
  $("<a>").attr({ 'href': link, 'title': title }).append(
    $("<img>").attr({ 'src': el, 'alt': '','width': '200', 'height': '200'})));
pending…
getElementById append
$(document.getElementById("screenshots")).append('<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
insertAdjacentHTML native
document.getElementById("screenshots").insertAdjacentHTML("beforeend", '<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
mknode()
$("#screenshots").append(
  mknode('a', {
    'href': link,
    'title': title
  }, '<img src="' + el + '" alt="" width="200" height="200">'));
pending…
jq DOM scripting2
$("#screenshots").append(
  $("<a>", { 'href': link, 'title': title }).append(
    $("<img>", { 'src': el, 'alt': '','width': '200', 'height': '200'})));
pending…
insertAdjacentHTML 2
$("#screenshots")[0].insertAdjacentHTML("beforeend", '<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
insertAdjacentHTML
$("#screenshots").get(0).insertAdjacentHTML("beforeend", '<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200" height="200"></a>');
pending…
tim Template
$("#screenshots").append(timLiteCached(template, data));
pending…
mknode 2
$("#screenshots").append(
 mknode('a', { 'href': link, 'title': title }).appendChild(
  mknode('img', { 'src': el, 'alt': '', 'width': '200', 'height': '200'})
 )
);
pending…
Create Element1
var n = document.createElement("a");
n.href = link; n.title = title;
n.innerHTML = '<img src="' + el + '" alt="" width="200" height="200">';
$("#screenshots").append(n);
pending…
Create Element2
var n = document.createElement("a");
n.href = link; n.title = title;
n.innerHTML = '<img src="' + el + '" alt="" width="200" height="200">';
document.getElementById("screenshots").appendChild(n);
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