Run details:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0
Firefox 98
Ubuntu
Desktop
3 years ago
Test name Executions per second
DocumentFragment 855.3 Ops/sec
insertAdjacentHTML 1289.1 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);