<div id='test'></div>var newElement = document.createElement("div");newElement.id = "testing"for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart);}document.getElementById("test").append(newElement);var newElement = document.createElement("div");newElement.id = "testing"for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.appendChild(newElementPart);}document.getElementById("test").appendChild(newElement);html = "<div id='testing'>"for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>";}html += "</div>";document.getElementById("test").insertAdjacentHTML("beforeend", html);html = "<div id='testing'>"for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>";}html += "</div>";document.getElementById("test").append((new DOMParser()).parseFromString(html, "text/html").body.childNodes);html = "<div id='testing'>"for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>";}html += "</div>";document.getElementById("test").append(document.createRange().createContextualFragment(html));--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| append | |
| appendChild | |
| insertAdjacentHTML | |
| DOMParser | |
| createContextualFragment |
| Test name | Executions per second |
|---|---|
| append | 1168.8 Ops/sec |
| appendChild | 972.5 Ops/sec |
| insertAdjacentHTML | 1244.6 Ops/sec |
| DOMParser | 2074.1 Ops/sec |
| createContextualFragment | 619.5 Ops/sec |
Let's break down the benchmark and its various test cases.
Benchmark Overview
The benchmark measures the performance of four different DOM manipulation methods: append, appendChild, insertAdjacentHTML, DOMParser, and createContextualFragment. These methods are used to add HTML elements or fragments to a document. The benchmark is designed to test which method is the fastest for adding a large number of elements.
Library and Features
DOMParser: This library parses an HTML string into a DOM document, allowing you to manipulate its contents. In this benchmark, it's used to parse an HTML string created by concatenating 1000 "div" elements with a class of "testClass".createContextualFragment: This feature creates a new Document Fragment that contains a subset of the original document. It allows for efficient insertion of content into the DOM without creating new elements. In this benchmark, it's used to create a new fragment containing 1000 "div" elements with a class of "testClass".insertAdjacentHTML: This method inserts an HTML string at a specified location within the document, allowing for efficient addition of content. In this benchmark, it's used to insert a large HTML string into the document.append, appendChild) are native DOM methods that add elements to the end or children of an existing element.Test Cases
append method.appendChild method.insertAdjacentHTML.Pros and Cons
append and appendChild: These methods are simple and lightweight, but may have slower performance due to the need for multiple DOM operations.insertAdjacentHTML: This method is efficient for inserting large amounts of content at a specific location within the document.DOMParser: This method can be slower than other approaches since it involves parsing an HTML string into a DOM document, which may not be necessary for this benchmark.createContextualFragment: This feature provides an efficient way to add content to the DOM without creating new elements, but its performance benefits may vary depending on the specific use case.Other Alternatives
html += '<div class="testClass"></div>') for simplicity.<template id="myTemplate">...</template>) to avoid creating and appending individual elements in a loop.Keep in mind that the performance results of this benchmark may vary depending on the specific browser, hardware, and version being tested.
