MeasureThat.net

Run results for: createContextualFragment vs appendChild

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Chrome 114
Mac OS X 10.15.7
Desktop
one year ago
Test name Executions per second
createContextualFragment 3670.6 Ops/sec
appendChild 94958.3 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="target"></div>
Script Preparation code:
​x
 
const makeClassed = (tag) => (className, textContent) => {
  const el = document.createElement(tag);
  el.classList.add(className);
  if (textContent !== undefined) {
    el.textContent = textContent;
  }
  return el;
};
​
const makeSpan = makeClassed("span");
var makeDiv = makeClassed("div");
​
var target = document.getElementById("target")
var group = {
  number: 42
}
Tests:

  • createContextualFragment

     
    const fragment = document.createRange().createContextualFragment(`
        <div class="group-before">Группа ${group.number}</div>
        <div class="group-toggle">-</div>
        <div class="rows-container"></div>
    `);
    const toggle = fragment.querySelector('.group-toggle');
    const rows = fragment.querySelector('.rows-container');
    target.appendChild(fragment);
    ​

  • appendChild

     
    const groupBefore = makeDiv('group-before', `Группа ${group.number}`);
    const groupToggle = makeDiv('group-toggle', '-');
    const rows = makeDiv('rows-container');
    target.appendChild(groupBefore);
    target.appendChild(groupToggle);
    target.appendChild(rows);
    ​