JSFiddle - React, Tailwind, and code Playground

by piayo

JavaScript

(function(){
	console.log(">>RUN!");
	
	document.body.insertAdjacentHTML("beforeend", '<div id="test"></div>');
	var $test = document.getElementById("test");
	var count = 500;
	
	function clearDiv() {
		$test.innerHTML = "";
	}
	
	var test_1 = function(){
		console.time("innerHTML");
		for (var i = 0; i < count; ++i) {
			$test.innerHTML += "<span>" + i + "</span>";
		}
		console.timeEnd("innerHTML - 1");
		clearDiv();
	}
	
	function test_2 () {
		console.time("innerHTML: in for");
		for (var i = 0, html = ""; i < count; ++i) {
			html += "<span>" + i + "</span>";
			$test.innerHTML = html;
		}
		console.timeEnd("innerHTML: in for");
		clearDiv();
	}
	
	function test_3 () {
		console.time("innerHTML: after for");
		var html = "";
		for (var i = 0; i < count; ++i) {
			html += "<span>" + i + "</span>";
		}
		$test.innerHTML = html;
		console.timeEnd("innerHTML: after for");
		clearDiv();
	}
	
	function test_4 () {
		console.time("innerHTML: array.push");
		for (var i = 0, arr=[]; i < count; ++i) {
			arr.push("<span>" + i + "</span>");
		}
		$test.innerHTML = arr.join();
		console.timeEnd("innerHTML: array.push");
		clearDiv();
	}
	
	function test_5 () {
		console.time("insertAdjacentHTML");
		for (var i = 0; i < count; ++i) {
			$test.insertAdjacentHTML("BeforeEnd", "<span>" + i + "</span>");
		}
		console.timeEnd("insertAdjacentHTML");
		clearDiv();
	}
	
	function test_6 () {
		console.time("appendChild");
		for (var i = 0, span; i < count; ++i) {
			span = document.createElement("span");
			span.textContent = i;
			$test.appendChild(span);
		}
		console.timeEnd("appendChild");
		clearDiv();
	}
	
	test_1();
	test_2();
	test_3();
	test_4();
	test_5();
	test_6();
	
})();

/*
---------------------------------------
Firefox 23.0.1 (2013.09.06)
---------------------------------------
[10:17:54.597] ">>RUN!"
[10:17:54.598] innerHTML: タイマー開始
[10:17:54.961] innerHTML: in for: タイマー開始
[10:17:55.241] innerHTML: in for: 280.18ms
[10:17:55.242] innerHTML: after for:...