Benchmark: innerHTML vs updateDOM

HTML Preparation code:

<div class="original">original</div>
<div class="updated">updated</div>

Script Preparation code:

var baseDOM = document.querySelector('.original');
var updateDOM = document.querySelector('.updated')

var DOMUpdates = [
    'content updated',
    'content <b>updated</b>',
    'content <b>updated</b> more',
    '<p>content <b>updated</b> more</p>',
    `<div class="one">
        <div>content<b>updated</b></div>
        <span>more</span>
    </div>`,
    `<div class="one">
        <div>content</div>
        sass&gt;as <b>updated</b>aaa
        <span>more</span>
    </div>`,
    `<div class="dos">
        <div>content</div>
        sass&gt;as <b>updated</b>aaa
        <span>more</span>
    </div>`,
    `<div class="dos">
        <div>content</div>
        sass&gt;as <b>updated</b>aaa
        <list>more</list>
    </div>`,
    `<div class="dos">
        <div>content</div>
        sass&gt;as <b>updated</b>aaa
        <list>
            <p>1</p>
        </list>
    </div>`,
    `<div class="dos">
        <div>content</div>
        sass&gt;as <b>updated</b>aaa
        <list>
            <p>1</p>
            <p>2</p>
        </list>
    </div>`,
    `<div class="dos">
        <div>content</div>
        sass&gt;as <b>updated</b>aaa
        <list>
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </list>
    </div>`,
];

function cleanChildNodes(node) {
  for (var n = 0; n < node.childNodes.length; n++) {
      var child = node.childNodes[n];
      if
      (
          child.nodeType === 8
          ||
          (child.nodeType === 3 && !/\S/.test(child.nodeValue))
      ) {
          node.removeChild(child);
          n--;
      }
      else if (child.nodeType === 1) {
        cleanChildNodes(child);
      }
  }
}

function _updateDomElement(oldDom, newDom) {
        cleanChildNodes(oldDom)
        cleanChildNodes(newDom)

        var newDomChildren = Array.from(newDom.childNodes);
        var oldDomChildren = Array.from(oldDom.childNodes);
        var isTextNode = (node) => node.nodeType === Node.TEXT_NODE;

        for (let iD = oldDomChildren.length - 1; iD >= newDomChildren.length; iD--) {
            oldDom.removeChild(oldDomChildren[iD]);
        }

        newDomChildren.forEach((element, index) => {
            var oldElement = oldDomChildren[index];

            if (!oldElement) {
                oldDom.appendChild(element.cloneNode(true));
            }
            else if (
                isTextNode(element) && isTextNode(oldElement)
                && oldElement.nodeValue !== element.nodeValue
            ) {
                oldElement.nodeValue = element.nodeValue
            }
            else if (isTextNode(oldElement) && !isTextNode(element)) {
                oldDom.replaceChild(element.cloneNode(true), oldElement);
            }
            else if (element.nodeName !== oldElement.nodeName) {
                oldElement.outerHTML = element.outerHTML || ''
            }
            else if (element.outerHTML !== oldElement.outerHTML) {
                Array.from(element.attributes || []).forEach(attr => {
                    const oldAttr = oldElement.getAttribute(attr.name);
                    if (!oldAttr || oldAttr !== attr.value) {
                        oldElement.setAttribute(attr.name, attr.value);
                    }
                })
                if (oldElement.attributes.length > element.attributes.length) {
                    Array.from(oldElement.attributes || []).forEach(attr => {
                        if (!element.attributes[attr.name]) {
                            oldElement.removeAttribute(attr.name);
                        }
                    })
                }
                if (element.value !== oldElement.value) {
                    console.log("Value ", element.className);
                    oldElement.value = element.value;
                }
                if (element.childNodes.length) {
                    _updateDomElement(oldElement, element)
                }
                else if (element.innerText != oldElement.innerText) {
                    console.log("innerText ", element.className);
                    oldElement.innerText = element.innerText;
                }
            }
        })

        //Security check
        if (newDom.innerHTML.replace(/\s+/g, '') !== oldDom.innerHTML.replace(/\s+/g, '')) {
            console.warn(`
                    Force innerHTML substitution :(
                        OLD: ${oldDom.innerHTML.replace(/\s+/g, '')}
                        NEW: ${newDom.innerHTML.replace(/\s+/g, '')}
                    `);
            oldDom.innerHTML = newDom.innerHTML;
        }
    }

Tests:

innerHTML
DOMUpdates.forEach(update => { updateDOM.innerHTML = update baseDOM.innerHTML = updateDOM.innerHTML })
updateDOM
DOMUpdates.forEach(update => { updateDOM.innerHTML = update _updateDomElement(baseDOM, updateDOM) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
updateDOM

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.

**Benchmark Explanation**

The provided benchmark measures the performance difference between two approaches: using `innerHTML` to update DOM elements and using a custom `_updateDomElement` function to update DOM elements.

**Test Cases**

There are two test cases:

1. **"innerHTML"`**: This test case uses the `innerHTML` property to set the content of both `baseDOM` and `updateDOM`. The idea is to see how fast the browser can apply the same updates using this property.
2. **"_updateDomElement"`**: This test case uses a custom `_updateDomElement` function to update DOM elements. This function performs a more detailed update, taking into account various cases such as text nodes, attribute changes, and node removals.

**Library Used**

The `_updateDomElement` function relies on the `Array.from()` method and various Node.js methods (e.g., `cleanChildNodes()`, `createTextNode()`) to perform the updates. No external libraries are required for this benchmark.

**HTML Structure**

Both test cases use a simple HTML structure with two div elements: `.original` and `.updated`. The contents of these elements will be updated during the benchmark.

**Benchmark Results**

The latest benchmark results show that:

* For the "innerHTML" test case, Chrome 108 browser on a Windows desktop device achieves approximately 1564 executions per second.
* For the "_updateDomElement" test case, Chrome 108 browser on a Windows desktop device achieves approximately 487 executions per second.

**Interpretation**

These results suggest that using `innerHTML` is faster than using a custom `_updateDomElement` function for updating DOM elements. However, it's essential to consider the context and requirements of your specific use case when deciding which approach to use. The custom `_updateDomElement` function provides more detailed updates and may be necessary in certain scenarios where `innerHTML` would not work correctly.

**Notes**

* The benchmark results are affected by various factors, such as browser version, device hardware, and operating system.
* Using a custom `_updateDomElement` function can introduce additional overhead due to the complexity of the implementation.
* In some cases, using `innerHTML` might be sufficient and faster than a custom update function.

Related benchmarks:

innerHTML vs updateDOM (version: 0)

Comparing performance of: innerHTML vs updateDOM

Created: 8 years ago by: Guest

Jump to the latest result

innerHTML

updateDOM

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):