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 Overview**

The provided JSON represents a JavaScript benchmarking test case on the MeasureThat.net website. The test compares two approaches for updating HTML elements: using `innerHTML` and using a custom `_updateDomElement` function.

**What is being tested?**

Two individual test cases are defined:

1. **`innerHTML`**: Updates the innerHTML of an element (`updateDOM`) and then sets the innerHTML of another element (`baseDOM`) to be the same as `updateDOM`.
2. **`updateDOM`**: Uses a custom `_updateDomElement` function to update both `updateDOM` and `baseDOM`.

**Options compared**

The test compares two approaches:

1. Using `innerHTML`: This approach updates the innerHTML of an element by setting its content directly. It is simple but may have performance implications due to the overhead of string manipulation.
2. Using `_updateDomElement` function: This approach uses a custom function to update both elements, allowing for more precise control over the DOM updates. It may be slower than using `innerHTML`, but provides more flexibility and accuracy.

**Test Results**

The latest benchmark result shows that:

* The `updateDOM` test had an average of 198 executions per second on Chrome Mobile 79.
* The `innerHTML` test had zero executions per second, indicating a significant performance disparity between the two approaches.

**Custom `_updateDomElement` function**

The custom `_updateDomElement` function is used to update both elements in a more controlled and accurate manner. It checks for various conditions, such as:

* Node name changes
* Attribute changes
* Content changes
* InnerHTML changes

This function provides more flexibility and accuracy than using `innerHTML`, but may also incur a performance overhead.

**Security Check**

The benchmark includes a security check to ensure that the innerHTML of both elements is not being manipulated maliciously. If the new innerHTML differs significantly from the old innerHTML, it logs a warning message to indicate potential security issues.

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