Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6.1 Safari/605.1.15
Safari 16
Mac OS X 10.15.7
Desktop
one year ago
Test name Executions per second
DocumentFragment 1108.4 Ops/sec
insertAdjacentHTML 923.3 Ops/sec
HTML Preparation code:
AخA
 
1
<div id='test'></div>
Tests:
  • DocumentFragment

    x
     
    const fragment = document.createDocumentFragment()
    for (i = 0; i < 1000; i++) {
      const innerDiv = document.createElement("div");
      innerDiv.className = "MyClass"
      fragment.appendChild(innerDiv);
    }
    document.getElementById("test").append(fragment);
  • insertAdjacentHTML

     
    html = ""
    for (i = 0; i < 1000; i++) {
      html += "<div class='MyClass'></div>";
    }
    document.getElementById("test").insertAdjacentHTML("beforeend", html);