Benchmark: update vs rerender

HTML Preparation code:

<ul id="update-list">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
    </ul>

    <ul id="rerender-list">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
    </ul>

Tests:

update
[].slice .call(document.querySelectorAll("#update-list li")) .forEach( (li, idx) => { li.textContent += " " + idx; });
rerender
const fragment = document.createDocumentFragment(); [].slice .call(document.querySelectorAll("#rerender-list li")) .forEach((li, idx) => { const newLi = document.createElement("li"); newLi.textContent = li.textContent + " " + idx; fragment.appendChild( newLi ); }); const list = document.querySelector("#rerender-list"); list.innerHTML = ""; list.appendChild(fragment);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
update
rerender

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 llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is tested?**

The provided JSON benchmark definition compares two approaches: updating individual elements and rerendering the entire list.

In the "update" test case, an array of `li` elements is sliced from the document query selector `#update-list li`. The `forEach` method is then used to iterate over each element, incrementing its text content with a counter. This approach updates individual elements without re-rendering the entire list.

In contrast, the "rerender" test case creates a new document fragment and appends it to the original `#rerender-list` element. The list's inner HTML is first cleared, and then the updated fragment is appended to it, effectively rerendering the list. This approach rerenders the entire list instead of updating individual elements.

**Options compared**

The two approaches differ in their impact on performance:

*   **Update**: Updating individual elements is generally faster than rerendering an entire list, as it reduces the amount of work done by the browser.
*   **Rerender**: Rerendering the entire list can be slower due to the overhead of updating the DOM and potentially triggering reflows or repaints.

**Pros and Cons**

### Update

Pros:

*   Faster performance
*   Reduced DOM updates
*   Less chance of triggering reflows or repaints

Cons:

*   May not update element content correctly if updated elements are removed from the list
*   Can be slower for very large lists due to the need to iterate over each element

### Rerender

Pros:

*   Ensures accurate updating of element content, even when elements are removed from the list
*   Can handle large lists efficiently by using a single DOM update

Cons:

*   Slower performance compared to the "update" approach
*   Potential for triggering reflows or repaints due to DOM updates

**Library and syntax**

The provided benchmark definition uses the following libraries and syntax:

*   `document.querySelectorAll`: A method of the Document object that returns a NodeList containing all elements that match the specified CSS selectors.
*   `forEach`: A method of the Array prototype that executes a callback function for each element in an array.

**Other considerations**

When working with lists in JavaScript, consider the following additional factors:

*   **Virtual DOM**: Some libraries, like React or Angular, use a virtual DOM to optimize rendering. This can improve performance by reducing the number of DOM updates.
*   **Batching**: Batching DOM updates can help reduce the overhead of individual updates and improve performance.
*   **Debounce or Throttle**: Debouncing or throttling can help prevent excessive DOM updates and improve performance.

**Alternatives**

If you're looking for alternatives to MeasureThat.net, consider:

*   **Benchmark.js**: A JavaScript benchmarking library that allows you to create and run benchmarks in Node.js.
*   **Benchmarks.io**: An online platform for creating and running web-based benchmarks.
*   **JsPerf**: A popular browser-based benchmarking tool that allows you to compare the performance of different JavaScript code snippets.

Related benchmarks:

update vs rerender (version: 0)

Comparing performance of: update vs rerender

Created: 9 years ago by: Guest

Jump to the latest result

update

rerender

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):