Benchmark: no name - MeasureThat.net

HTML Preparation code:

<div id="js-bottomBlock">
	<div class="alqs">
		<h3>Также ищут</h3>
		<ul class="alqs-col">
			<li class="alqs-item"></li>
		</ul>
	<nav>
		<div class="page-navig">
			<ul>
				<li></li>
			</ul>
		</div>
	</nav>
</div>

Tests:

1
var node = document.querySelectorAll("#js-bottomBlock > div"); for (let i = 0; i < node.length; i++) { node[i].innerHTML = ''; }
2
var node = document.querySelectorAll("#js-bottomBlock > div"); for (let i = 0; i < node.length; i++) { node[i].parentNode.removeChild(node[i]); }
3
var node = document.querySelectorAll("#js-bottomBlock > div"); for (let i = 0; i < node.length; i++) { node[i].innerHTML = ''; node[i].parentNode.removeChild(node[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2
3

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down this JavaScript benchmark from MeasureThat.net.

**The Tests:**

This benchmark focuses on manipulating HTML elements within a specific section of a webpage (`#js-bottomBlock`).

* **Test 1:** Empties the inner HTML content of all matching elements. This essentially clears their text and any existing elements within them without removing the elements themselves from the page.
   ```javascript
   var node = document.querySelectorAll("#js-bottomBlock > div");
   for (let i = 0; i < node.length; i++) {
     node[i].innerHTML = '';
   }
   ```

* **Test 2:** Completely removes each matching element from the DOM using `parentNode.removeChild(node[i])`. This permanently deletes these elements from the webpage.  
   ```javascript
   var node = document.querySelectorAll("#js-bottomBlock > div");
   for (let i = 0; i < node.length; i++) {
     node[i].parentNode.removeChild(node[i]);
   }
   ```

* **Test 3:** Combines the actions of Test 1 and Test 2. It first empties the HTML content and then removes each element.

```javascript
   var node = document.querySelectorAll("#js-bottomBlock > div");
   for (let i = 0; i < node.length; i++) {
     node[i].innerHTML = '';
     node[i].parentNode.removeChild(node[i]);
   }
   ```

**What is being measured?**

The benchmark measures the **Execution Speed**: How many times each test case can be executed per second (ExecutionsPerSecond). This gives an indication of how efficiently JavaScript can handle these specific DOM manipulations.

**Options Compared:**

*  **Clearing Content vs. Removal:** Test 1 shows clearing content, while Tests 2 and 3 involve removing elements entirely. Different approaches have different performance implications.
* **Combined Operation:** Test 3 combines the two actions in one loop, potentially affecting efficiency compared to separate operations (Tests 1 & 2).

**Pros and Cons of Each Approach:**

*  **Clearing Content:** Faster if you only need to reset text within elements without removing them from the DOM.
* **Removal:** More drastic, frees up memory but involves more overhead for finding parent nodes and detaching children.
* **Combined Operation:** May offer a slight performance advantage depending on how the browser optimizes it, but can be less readable.

**Considerations:**

* **DOM Structure Complexity:** The number of elements affected, their nesting depth, and the complexity of the HTML within them all influence execution speed.

* **Browser Rendering:** Different browsers have varying levels of DOM manipulation efficiency, which can affect benchmark results.

**Alternatives:**
While not directly covered in this benchmark, consider:

* **Virtual DOM Libraries (e.g., React):**  These libraries update only the necessary parts of the actual DOM, potentially leading to significant performance gains for complex UI updates.

Let me know if you have any other questions about specific test cases or JavaScript concepts!

Related benchmarks:

no name (version: 0)

Comparing performance of: 1 vs 2 vs 3

Created: 7 years ago by: Guest

Jump to the latest result

1

2

3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):