Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Chrome 100
Windows
Desktop
2 years ago
Test name Executions per second
DocumentFragment 191.7 Ops/sec
insertAdjacentHTML 293.0 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);