cferdinandi/performance.html

## 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>