Benchmark: createElement + append vs html code

HTML Preparation code:

<div id="fakeInput" contenteditable> </div>

Tests:

html code
//document.getElementById('fakeInput').innerHTML = '<img class="emoji" src="/sy2/images/message/emoji/22.svg">'; document.getElementById('fakeInput').innerHTML = '123456';
createElement
//var child = document.createElement('img'); //child.setAttribute('class', 'emoji'); //child.setAttribute('src', '/sy2/images/message/emoji/20.svg'); //document.getElementById('fakeInput').appendChild(child); var child = document.createTextNode('123456'); document.getElementById('fakeInput').appendChild(child);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
html code
createElement

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: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G611MT) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/16.0 Chrome/92.0.4515.166 Mobile Safari/537.36

Browser/OS: Chrome Mobile 92 on Android

View result in a separate tab

Test name	Executions per second
html code	26019.2 Ops/sec
createElement	95400.8 Ops/sec

createElement + append vs html code (version: 1)

Comparing performance of: html code vs createElement

Created: 4 years ago by: Registered User

Jump to the latest result

html code

createElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A