createDocumentFragment vs innerHTML

Rendering at the end vs rendering in every loop

by Génesis García Morilla

HTML

<h2><span id="num"></span> elements</h2>
<p>createDocumentFragment rendering at the end: <span id="a"></span> ms</p>
<p>innerHTML rendering at the end: <span id="b"></span> ms</p>
<p>createDocumentFragment rendering in every loop: <span id="c"></span> ms</p>
<p>innerHTML rendering in every loop: <span id="d"></span> ms</p>
<br>
<ul></ul>

CSS

* {
    color: #2b2b2b;
    font-family: "Roboto Condensed";
}

body {
  margin: 40px;
}

th {
    text-align: left;
    color: #4679bd;
}

span {
    color: #D76060;
}

JavaScript

var num = 100; // Please don't use more than 5000 if don't want to crash your browser
var text = "Any text you want"; // this will not have any influence in our test
var i, start_date;
var $ul = document.getElementsByTagName("ul")[0];

document.getElementById("num").textContent = num;

// createDocumentFragment rendering at the end
var li, div, p;
var fragment = document.createDocumentFragment();

start_date = performance.now();
for (i = 0; i < num; i++) {
  li = document.createElement("li");
  li.setAttribute("class", "element");
  li.setAttribute("id", "element" + i);

  div = document.createElement("div");
  div.setAttribute("class", "icon");
 
	li.appendChild(div);

  p = document.createElement("p");
  p.setAttribute("class", "serialcode");
  p.textContent = text;
  div.appendChild(p);

  fragment.appendChild(li);
}

$ul.appendChild(fragment);
document.getElementById("a").textContent = performance.now() - start_date;
$ul.innerHTML = "";

// inncerHTML rendering at the end
var html = "";
start_date = performance.now();

for (i = 0; i < num; i++) {
    html +=
    '<li class="element" id="element' + i + '">' +
    '<div class="icon">' +
    '<p class="serialcode">' + text + '</p>' +
    '</div></li>';
}

$ul.innerHTML = html;
document.getElementById("b").textContent = performance.now() - start_date;
$ul.innerHTML = "";

// createDocumentFragment rendering in every loop
fragment = document.createDocumentFragment();

start_date = performance.now();
for (i = 0; i < num; i++) {
  li = document.createElement("li");
  li.setAttribute("class", "element");
  li.setAttribute("id", "element" + i);

  div = document.createElement("div");
  div.setAttribute("class", "icon");
 
	li.appendChild(div);

  p = document.createElement("p");
  p.setAttribute("class", "serialcode");
  p.textContent = text;
  div.appendChild(p);

  fragment.appendChild(li);
  $ul.appendChild(fragment);
}

document.getElementById("c").textContent = performance.now() - start_date;
$ul.innerHTML =...