var list = [],
n = 0;
while(true) {
n++;
list.push(document.createElement('div'));
node.setAttribute("class", "test");
node.innerText = "test";
if(n===10000)
break;
}
var list = [],
n = 0,
node = document.createElement('div');
node.setAttribute("class", "test");
node.innerText = "test";
while(true) {
n++;
var clone = node.cloneNode(true);
node.setAttribute("class", "clone");
node.innerText = "clone";
list.push(clone);
if(n===10000)
break;
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
createElement | |
cloneNode |
Test name | Executions per second |
---|---|
createElement | 0.0 Ops/sec |
cloneNode | 97.3 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks!
What is being tested?
On MeasureThat.net, users create and run JavaScript microbenchmarks to measure the performance of different approaches in creating or cloning DOM elements.
In this specific benchmark, two test cases are compared:
createElement
cloneNode
These test cases aim to determine which approach is faster for creating new DOM elements or cloning existing ones before insertion.
Options being compared
The options being compared are:
document.createElement()
method.node.cloneNode(true)
method.Pros and cons of each approach:
Library and its purpose
In this benchmark, node
appears in both test cases. However, it is not explicitly stated which node
refers to. In the context of DOM manipulation, node
typically represents a reference to a DOM node (e.g., an HTML element). The cloneNode()
method clones the contents of the specified node.
Special JS feature or syntax
There are no special JavaScript features or syntaxes mentioned in this benchmark that require specific knowledge or expertise.
Other alternatives
If you're looking for alternative approaches, consider the following:
Keep in mind that these alternatives may introduce additional complexity and may not be suitable for all use cases. The createElement
vs cloneNode
comparison remains a fundamental benchmark, as it highlights the trade-offs between creating new elements versus cloning existing ones.