Run results for: performanceDom

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser: Chrome 119

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
innerHTML	54193.9 Ops/sec
innerText	101142.3 Ops/sec
textContent	133657.9 Ops/sec
outerHTML	51480.0 Ops/sec

Script Preparation code:

const a = document.createElement('test');
        document.head.appendChild(a); // Append 'a' to the document body
        let string = 'This element contains <code>code</code>\n' + '<p><strong>and HTML tags</strong></p>`'

        // Update innerHTML with a larger content
        let start = performance.now();
        a.innerHTML = string;
        let end = performance.now();
        let diff = end - start;

        start = performance.now();
        a.innerText = string;
        end = performance.now();
        let diff2 = end - start;

        start = performance.now();
        a.textContent = string;
        end = performance.now();
        let diff3 = end - start;

        start = performance.now();
        a.outerHTML = string;
        end = performance.now();
        let diff4 = end - start;

        console.table({
            'innerHTML': diff,
            'innerText': diff2,
            'textContent': diff3,
            'outerHTML': diff4
        });

Tests:

innerHTML
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.innerHTML = string; let end = performance.now(); let diff = end - start; console.log(diff);
innerText
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.innerText = string; let end = performance.now(); let diff = end - start; console.log(diff);
textContent
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.textContent = string; let end = performance.now(); let diff = end - start; console.log(diff);
outerHTML
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.outerHTML = string; let end = performance.now(); let diff = end - start; console.log(diff);