Testing innerHTML vs documentFragment

Benchmark created by ciprian on

Setup

const length = 1000;
  let container = document.createElement('div');
  document.body.appendChild(container);

Teardown



            container.remove();

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML assignment vs push
const html = [];
let k = 0;
for (let i = 0; i < length; ++i) {
  html[k++] = '<div class="cls';
  html[k++] = i;
html[k++] = '" id="id';
html[k++] = i;
html[k++] = '">text'
html[k++] = i;
html[k++] = '</div>';
}
container.innerHTML = html.join('');
ready
The Fragment Route
const fragment = document.createDocumentFragment();
for (let i = 0; i < length; ++i) {
  const el = document.createElement('div');
  el.appendChild(document.createTextNode(`text${i}`));
  el.classList.add(`cls${i}`);
  el.setAttribute('id', `id${i}`);
  fragment.appendChild(el);
}
container.appendChild(fragment);
ready
The innerHTML Route
const html = [];
for (let i = 0; i < length; ++i) {
  html.push('<div class="cls', i, '" id="id', i, '">');
  html.push('text', i, '</div>');
}
container.innerHTML = html.join('');
ready

Revisions

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

  • Revision 1: published by ciprian on