Benchmark: HTML insertion - MeasureThat.net

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<div id="testElement" style="display:none"></div>

Script Preparation code:

var js = document.getElementById('testElement');
var jq = $('#testElement');
var len = 500;

Tests:

jQ append
var html = ''; for (var i = 0; i < len; i++) { html += '<div>Test ' + i + '</div>'; } jq.html(html); jq.html('');
js append
var html = ''; for (var i = 0; i < len; i++) { html += '<div>Test ' + i + '</div>'; } js.innerHTML = html; js.innerHTML = '';
jq append loop
for (var i = 0; i < len; i++) { jq.append('<div>Test ' + i + '</div>'); } jq.html('');
js append loop
for (var i = 0; i < len; i++) { js.innerHTML += '<div>Test ' + i + '</div>'; } js.innerHTML = '';
js array join
var html = []; for (var i = 0; i < len; i++) { html.push('<div>Test ' + i + '</div>'); } js.innerHTML = html.join(''); js.innerHTML = '';
js insert
for (var i = 0; i < len; i++) { js.insertAdjacentHTML('beforeend','<div>Test ' + i + '</div>'); } js.innerHTML = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQ append
js append
jq append loop
js append loop
js array join
js insert

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 hours ago)

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

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
jQ append	4500.0 Ops/sec
js append	6606.3 Ops/sec
jq append loop	500.1 Ops/sec
js append loop	24.3 Ops/sec
js array join	6292.4 Ops/sec
js insert	2582.9 Ops/sec

HTML insertion (version: 7)

compare between plain js and jQuery

Comparing performance of: jQ append vs js append vs jq append loop vs js append loop vs js array join vs js insert

Created: 7 years ago by: Registered User

Jump to the latest result

jQ append

js append

jq append loop

js append loop

js array join

js insert

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A