Run results for: innerHTML vs updateDOM

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Browser: Chrome 63

Operating system: Windows 7

Device Platform: Other

Date tested: 2024 years ago

Test name	Executions per second
innerHTML	1280.2 Ops/sec
updateDOM	570.1 Ops/sec
updateDOMChildren	513.6 Ops/sec

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;
        }
    }

function _updateDomElementChildren(oldDom, newDom) {
        const newDomChildren = Array.from(newDom.children);
        const oldDomChildren = Array.from(oldDom.children);
        const 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) => {
            const 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 || ''
                console.warn(`different nodeName ${oldElement.nodeName} != ${element.nodeName}`);
            }
            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) {
                    oldElement.value = element.value;
                }
                if (element.children.length) {
                    _updateDomElementChildren(oldElement, element)
                }
              	else if(element.textContent != oldElement.textContent){
                	oldElement.textContent = element.textContent
                }
            }
        })

        //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) })
updateDOMChildren
DOMUpdates.forEach(update => { updateDOM.innerHTML = update _updateDomElementChildren(baseDOM, updateDOM) })

Run results for: innerHTML vs updateDOM

innerHTML

updateDOM

updateDOMChildren