<style type="text/css">
.hide {
display: none;
}
</style>
<div id="container"></div>
var container = document.getElementById('container');
ul = document.createElement('ul');
var html = [];
for ( var i=0; i<2000; i += 1 ) {
html.push(`<li>${i}</li>`);
}
ul.innerHTML = html.join('');
container.appendChild(ul);
var element = ul.firstElementChild;
while (element) {
var element = ul.firstElementChild;
element && ul.removeChild(element);
}
var elements = Array.prototype.slice.call(container);
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add("hide");
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
removeChild | |
display:none on each element |
Test name | Executions per second |
---|---|
removeChild | 3060098.8 Ops/sec |
display:none on each element | 720041.3 Ops/sec |
Let's break down the provided JSON and explain what is being tested.
Benchmark Definition
The benchmark is designed to measure the performance difference between two approaches:
ul.firstElementChild
property to remove elements from the list one by one. The code repeatedly assigns the same value to element
, causing an infinite loop.classList.add("hide")
.Options Compared
The two options are being compared in terms of their performance impact.
Pros and Cons of Each Approach:
element
.Library Used:
In the display:none on each element test case, Array.prototype.slice.call(container)
is used to convert the container's children array-like object into a true array. This allows for more efficient iteration and manipulation of the elements using modern JavaScript features like classList.add
.
Special JS Feature/Syntax:
None mentioned.
Other Considerations:
Alternatives:
If you want to explore other approaches or variations of this benchmark:
Keep in mind that modifying the benchmark can affect its accuracy and relevance.