Run results for: innerhtml vs removechild

Run details:

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

Browser: Chrome 104

Operating system: Mac OS X 10.14.6

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
innerHTML	15238.7 Ops/sec
removeChild appendChild	19262.6 Ops/sec

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); node.innerHTML = '<img src="data:image/png;base64,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" alt="📀">';
removeChild appendChild
var node = document.getElementById('container') var img = new Image() img.src = 'data:image/png;base64,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' img.alt = '📀' while(node.firstChild) node.removeChild(node.firstChild) node.appendChild( img )

Run results for: innerhtml vs removechild

innerHTML

removeChild appendChild