Element Creation Methods

JavaScript performance comparison

Test case created by Jacob Wright

Preparation code

<div id="target"></div>
      
<script>
Benchmark.prototype.setup = function() {
  // helpers available
  function createElement(name) {
    return document.createElement(name);
  }
  function setAttr(element, name, value) {
    element.setAttribute(name, value);
  }
  function setText(element, text) {
    element.textContent = text;
  }
  function addChild(element, child) {
    element.appendChild(child);
  }
  
  function create(name, attr, text, children) {
    var elem = createElement(name);
    if (attr) attr.forEach(elem.setAttribute.apply.bind(elem.setAttribute, elem));
    if (text) elem.textContent = text;
    if (children) children.forEach(createAndAppend.apply.bind(createAndAppend, elem));
    return elem;
  }
  
  function createAndAppend(name, attr, text, children) {
    var elem = create(name, attr, text, children);
    this.appendChild(elem);
    return elem;
  }
  
  function byHand(target) {
    var el0 = document.createElement("section");
    el0.setAttribute("class", "section");
    var el2 = document.createElement("header");
    el2.setAttribute("class", "header");
    el2.textContent = "Header";
    el0.appendChild(el2);
    var el4 = document.createElement("article");
    el4.setAttribute("class", "article");
    var el6 = document.createElement("p");
    el6.textContent = "Paragraph 1";
    el4.appendChild(el6);
    var el8 = document.createElement("p");
    el8.textContent = "Paragraph 2";
    el4.appendChild(el8);
    var el10 = document.createElement("p");
    el10.textContent = "Paragraph 3";
    el4.appendChild(el10);
    var el12 = document.createElement("p");
    el12.textContent = "Paragraph 4";
    el4.appendChild(el12);
    var el14 = document.createElement("p");
    el14.textContent = "Paragraph 5";
    el4.appendChild(el14);
    var el16 = document.createElement("ul");
    el16.setAttribute("class", "list");
    var el18 = document.createElement("li");
    el18.textContent = "Item 1";
    el16.appendChild(el18);
    var el20 = document.createElement("li");
    el20.textContent = "Item 2";
    el16.appendChild(el20);
    var el22 = document.createElement("li");
    el22.textContent = "Item 3";
    el16.appendChild(el22);
    var el24 = document.createElement("li");
    el24.textContent = "Item 4";
    el16.appendChild(el24);
    var el26 = document.createElement("li");
    el26.textContent = "Item 5";
    el16.appendChild(el26);
    el4.appendChild(el16);
    el0.appendChild(el4);
    var el30 = document.createElement("footer");
    el30.setAttribute("class", "footer");
    el30.textContent = "Footer";
    el0.appendChild(el30);
    target.appendChild(el0);
  }
  
  function withFunctions(target) {
    var el0 = createElement("section");
    setAttr(el0, "class", "section");
    var el2 = createElement("header");
    setAttr(el2, "class", "header");
    setText(el2, "Header");
    addChild(el0, el2);
    var el4 = createElement("article");
    setAttr(el4, "class", "article");
    var el6 = createElement("p");
    setText(el6, "Paragraph 1");
    addChild(el4, el6);
    var el8 = createElement("p");
    setText(el8, "Paragraph 2");
    addChild(el4, el8);
    var el10 = createElement("p");
    setText(el10, "Paragraph 3");
    addChild(el4, el10);
    var el12 = createElement("p");
    setText(el12, "Paragraph 4");
    addChild(el4, el12);
    var el14 = createElement("p");
    setText(el14, "Paragraph 5");
    addChild(el4, el14);
    var el16 = createElement("ul");
    setAttr(el16, "class", "list");
    var el18 = createElement("li");
    setText(el18, "Item 1");
    addChild(el16, el18);
    var el20 = createElement("li");
    setText(el20, "Item 2");
    addChild(el16, el20);
    var el22 = createElement("li");
    setText(el22, "Item 3");
    addChild(el16, el22);
    var el24 = createElement("li");
    setText(el24, "Item 4");
    addChild(el16, el24);
    var el26 = createElement("li");
    setText(el26, "Item 5");
    addChild(el16, el26);
    addChild(el4, el16);
    addChild(el0, el4);
    var el30 = createElement("footer");
    setAttr(el30, "class", "footer");
    setText(el30, "Footer");
    addChild(el0, el30);
    addChild(target, el0);
  }
  
  function withSomeHelpers(target) {
    var el0 = create("section", [["class", "section"]]);
    var el2 = create("header", [["class", "section"]], "Header");
    el0.appendChild(el2);
    var el4 = create("article", [["class", "section"]]);
    var el6 = create("p", null, "Paragraph 1");
    el4.appendChild(el6);
    var el8 = create("p", null, "Paragraph 2");
    el4.appendChild(el8);
    var el10 = create("p", null, "Paragraph 3");
    el4.appendChild(el10);
    var el12 = create("p", null, "Paragraph 4");
    el4.appendChild(el12);
    var el14 = create("p", null, "Paragraph 5");
    el4.appendChild(el14);
    var el16 = create("ul", [["class", "list"]]);
    var el18 = create("li", null, "Item 1");
    el16.appendChild(el18);
    var el20 = create("li", null, "Item 2");
    el16.appendChild(el20);
    var el22 = create("li", null, "Item 3");
    el16.appendChild(el22);
    var el24 = create("li", null, "Item 4");
    el16.appendChild(el24);
    var el26 = create("li", null, "Item 5");
    el16.appendChild(el26);
    el4.appendChild(el16);
    el0.appendChild(el4);
    var el30 = create("footer", [["class", "footer"]], "Footer");
    el0.appendChild(el30);
    target.appendChild(el0);
  }
  
  function withAllHelpers(target) {
    var elem = create('section', [['class', 'section']], null, [
      ['header', [['class', 'header']], 'Header'],
      ['article', [['class', 'article']], null, [
        ['p', null, 'Paragraph 1'],
        ['p', null, 'Paragraph 2'],
        ['p', null, 'Paragraph 3'],
        ['p', null, 'Paragraph 4'],
        ['p', null, 'Paragraph 5'],
        ['ul', [['class', 'list']], null, [
          ['li', null, 'Item 1'],
          ['li', null, 'Item 2'],
          ['li', null, 'Item 3'],
          ['li', null, 'Item 4'],
          ['li', null, 'Item 5']
        ]],
      ]],
      ['footer', [['class', 'footer']], 'Footer'],
    ]);
    target.appendChild(elem);
  }
  
  function withHTML(target) {
    var html = '<section class="section"><header class="header">Header</header><article class="article"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p><p>Paragraph 4</p><p>Paragraph 5</p><ul class="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul></article><footer class="footer">Footer</footer></section>';
    target.innerHTML = html;
  }
  
  var target = document.getElementById('target');

};

Benchmark.prototype.teardown = function() {
  target.innerHTML = '';

};
</script>

Preparation code output

<div id="target"></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
byHand
byHand(target)
pending…
withSomeHelpers
withSomeHelpers(target)
pending…
withAllHelpers
withAllHelpers(target)
pending…
withHTML
withHTML(target)
pending…
withFunctions
withFunctions(target)
pending…

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

0 Comments