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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Linux; Android 9; ASUS_X01BDA) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.116 Mobile Safari/537.36

Browser/OS: Chrome Mobile 79 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	0.0 Ops/sec
updateDOM	198.2 Ops/sec

innerHTML vs updateDOM (version: 0)

Comparing performance of: innerHTML vs updateDOM

Created: 6 years ago by: Guest

Jump to the latest result

innerHTML

updateDOM

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A