MeasureThat.net

Run results for: Different ways (template, vanilla js, innerHTML) to create DOM nodes

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
Chrome 97
Mac OS X 10.15.7
Desktop
3 years ago
Test name Executions per second
complex template 154220.8 Ops/sec
complex javascript 82695.2 Ops/sec
complex innerhtml 80530.9 Ops/sec
Script Preparation code:
AخA
 
var simpleTemplate = document.createElement("template");
simpleTemplate.innerHTML = `<span class="simple"></span>`;
  
var complexTemplate = document.createElement("template");
  complexTemplate.innerHTML = 
  `<span class="complex">
      <span class="simple-1"></span>
      <span class="simple-2">
          <span class="simple-2-1"></span>
      </span>
      <span class="simple-3">
          <span class="simple-3-1"></span>
      </span>
      <span class="simple-4"></span>
  </span>`;
Tests:

  • complex template

     
    let el = document.createElement("div");
    let content = complexTemplate.content.cloneNode(true);
    el.appendChild(content);

  • complex javascript

    ​x
     
    let el = document.createElement("span");
    el.classList.add("complex");
    ​
    let span1 = document.createElement("span");
    span1.classList.add("simple-1");
    ​
    let span2 = document.createElement("span");
    span2.classList.add("simple-2");
    let span21 = document.createElement("span");
    span21.classList.add("simple-2-1");
    span2.appendChild(span21);
    ​
    let span3 = document.createElement("span");
    span3.classList.add("simple-3");
    let span31 = document.createElement("span");
    span31.classList.add("simple-31");
    span3.appendChild(span31);
    ​
    let span4 = document.createElement("span");
    span4.classList.add("simple-4");
    ​
    el.append(span1, span2, span3, span4);

  • complex innerhtml

     
    let el = document.createElement("div");
    el.innerHTML = `<span class="complex">
          <span class="simple-1"></span>
          <span class="simple-2">
              <span class="simple-2-1"></span>
          </span>
          <span class="simple-3">
              <span class="simple-3-1"></span>
          </span>
          <span class="simple-4"></span>
      </span>`;