cferdinandi · January 29, 2025 03:46
diff --git a/performance.html b/performance.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>DOM Injection Performance Testing</title>
 </head>
 <body>


 	<div id="app1"></div>
 	<ul id="app2"></ul>
 	<div id="app3"></div>
 	<div id="app4"></div>
 	<div id="app5"></div>

 	<script>
 		// Cache variables
 		var app1 = document.querySelector('#app1');
 		var app2 = document.querySelector('#app2');
 		var app3 = document.querySelector('#app3');
 		var app4 = document.querySelector('#app4');
 		var app5 = document.querySelector('#app5');

 		// Create an array to iterate over
 		var items = [];
 		for (var i = 0; i < 1000; i++) {
 			items.push(i);
 		}


 		// forEach() and innerHTML
 		// https://gomakethings.com/two-different-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#using-array-foreach
 		;(function () {
 			var start = performance.now();

 			var html = '';
 			items.forEach(function (item) {
 				html += '<li>' + item + '</li>';
 			});
 			app1.innerHTML = '<ul>' + html + '</ul>';

 			var end = performance.now();
 			console.log('forEach() took ' + (end - start) + 'ms');
 		})();

 		// forEach() and innerHTML injecting on each loop
 		// https://gomakethings.com/loops-dom-injection-and-performance-with-vanilla-js/
 		;(function () {
 			var start = performance.now();

 			items.forEach(function (item) {
 				app2.innerHTML += '<li>' + item + '</li>';
 			});

 			var end = performance.now();
 			console.log('Inject on each loop took ' + (end - start) + 'ms');
 		})();

 		// map() and join() with innerHTML
 		// https://gomakethings.com/two-different-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#using-array-map-and-array-join
 		;(function () {
 			var start = performance.now();

 			app3.innerHTML = '<ul>' + items.map(function (item) {
 				return '<li>' + item + '</li>';
 			}).join('') + '</ul>';

 			var end = performance.now();
 			console.log('map() + join() took ' + (end - start) + 'ms');
 		})();

 		// createElement()
 		// https://gomakethings.com/two-more-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#creating-an-element
 		;(function () {
 			var start = performance.now();

 			var list = document.createElement('ul');
 			items.forEach(function (item) {
 				var li = document.createElement('li');
 				li.textContent = item;
 				list.appendChild(li);
 			});
 			app4.appendChild(list);

 			var end = performance.now();
 			console.log('createElement() took ' + (end - start) + 'ms');
 		})();

 		// createDocumentFragment()
 		// https://gomakethings.com/two-more-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#creating-a-fragment
 		;(function () {
 			var start = performance.now();

 			var list = document.createElement('ul');
 			var fragment = document.createDocumentFragment();
 			items.forEach(function (item) {
 				var li = document.createElement('li');
 				li.textContent = item;
 				fragment.appendChild(li);
 			});
 			list.appendChild(fragment);
 			app5.appendChild(list);

 			var end = performance.now();
 			console.log('createDocumentFragment() took ' + (end - start) + 'ms');
 		})();
 	</script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>DOM Injection Performance Testing</title>
	</head>
	<body>


	<div id="app1"></div>
	<ul id="app2"></ul>
	<div id="app3"></div>
	<div id="app4"></div>
	<div id="app5"></div>

	<script>
	// Cache variables
	var app1 = document.querySelector('#app1');
	var app2 = document.querySelector('#app2');
	var app3 = document.querySelector('#app3');
	var app4 = document.querySelector('#app4');
	var app5 = document.querySelector('#app5');

	// Create an array to iterate over
	var items = [];
	for (var i = 0; i < 1000; i++) {
	items.push(i);
	}


	// forEach() and innerHTML
	// https://gomakethings.com/two-different-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#using-array-foreach
	;(function () {
	var start = performance.now();

	var html = '';
	items.forEach(function (item) {
	html += '<li>' + item + '</li>';
	});
	app1.innerHTML = '<ul>' + html + '</ul>';

	var end = performance.now();
	console.log('forEach() took ' + (end - start) + 'ms');
	})();

	// forEach() and innerHTML injecting on each loop
	// https://gomakethings.com/loops-dom-injection-and-performance-with-vanilla-js/
	;(function () {
	var start = performance.now();

	items.forEach(function (item) {
	app2.innerHTML += '<li>' + item + '</li>';
	});

	var end = performance.now();
	console.log('Inject on each loop took ' + (end - start) + 'ms');
	})();

	// map() and join() with innerHTML
	// https://gomakethings.com/two-different-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#using-array-map-and-array-join
	;(function () {
	var start = performance.now();

	app3.innerHTML = '<ul>' + items.map(function (item) {
	return '<li>' + item + '</li>';
	}).join('') + '</ul>';

	var end = performance.now();
	console.log('map() + join() took ' + (end - start) + 'ms');
	})();

	// createElement()
	// https://gomakethings.com/two-more-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#creating-an-element
	;(function () {
	var start = performance.now();

	var list = document.createElement('ul');
	items.forEach(function (item) {
	var li = document.createElement('li');
	li.textContent = item;
	list.appendChild(li);
	});
	app4.appendChild(list);

	var end = performance.now();
	console.log('createElement() took ' + (end - start) + 'ms');
	})();

	// createDocumentFragment()
	// https://gomakethings.com/two-more-ways-to-create-html-from-an-array-of-data-with-vanilla-js/#creating-a-fragment
	;(function () {
	var start = performance.now();

	var list = document.createElement('ul');
	var fragment = document.createDocumentFragment();
	items.forEach(function (item) {
	var li = document.createElement('li');
	li.textContent = item;
	fragment.appendChild(li);
	});
	list.appendChild(fragment);
	app5.appendChild(list);

	var end = performance.now();
	console.log('createDocumentFragment() took ' + (end - start) + 'ms');
	})();
	</script>

	</body>
	</html>