remove-elements-from-dom

JavaScript performance comparison

Test case created by nikitahl

Preparation code

<div id="container"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var html = `<section>
        <h2>Section</h2>
        <div class="text-container">
          <p>Paragraph text 1</p>
          <p>Paragraph text 2</p>
          <p>Paragraph text 3</p>
          <p>Paragraph text 4</p>
          <p>Paragraph text 5</p>
          <p>Paragraph text 6</p>
          <p>Paragraph text 7</p>
          <p>Paragraph text 8</p>
          <p>Paragraph text 9</p>
          <p>Paragraph text 10</p>
        </div>
      </section>`;
    
    var container = document.getElementById("container");
    
    var caseRemoveChildTextContainers;
    var caseInnerHTMLTextContainers;
    var caseOuterHTMLParagraphs;
    var caseRemoveParagraphs;

};
</script>

Preparation code output

<div id="container"></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
innerHTML
container.innerHTML = html;
caseInnerHTMLTextContainers = document.querySelector("#container .text-container");

caseInnerHTMLTextContainers.innerHTML = "";
pending…
remove()
container.innerHTML = html;
caseRemoveParagraphs = document.querySelectorAll("#container p");

for (var i = 0; i < caseRemoveParagraphs.length; i++) {
  caseRemoveParagraphs[i].remove();
}
pending…
removeChild()
container.innerHTML = html;
caseRemoveChildTextContainers = document.querySelector("#container .text-container");

while(caseRemoveChildTextContainers.children.length) {
 
 
 caseRemoveChildTextContainers.removeChild(caseRemoveChildTextContainers.lastChild);
}
pending…
outerHTML
container.innerHTML = html;
caseOuterHTMLParagraphs = document.querySelectorAll("#container p");

for (var i = 0; i < caseOuterHTMLParagraphs.length; i++) {
  caseOuterHTMLParagraphs[i].outerHTML = "";
}
pending…

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

0 Comments