insertAdjacentHTML vs createContextualFragment

Benchmark created by alejo on


Setup

var range = document.createRange();
    range.selectNode(document.body);
    
    var s = '<span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>';

Test runner

Ready to run.

Testing in
TestOps/sec
contextualFragment (childNodes)
Array.from(range.createContextualFragment(s).childNodes).forEach((node) => document.body.appendChild(node));
ready
contextualFragment
document.body.appendChild(range.createContextualFragment(s));
ready
insertAdjacentHTML()
document.body.insertAdjacentHTML('afterbegin', s);
ready

Revisions

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