0B

ブラウザ別 JavaScript 速度計測 if else 文, switch case 文, ?: 三項演算

目的

JavaScript で、以下の似たもの三種類の速度の違いを知る。

  • if else 文
  • switch case 文
  • ?: 三項演算

結果

ブラウザ別に速度を計測したところ、以下の結果となった。

if elseswitch case?: 三項演算
Opera 9.64110011561112
Opera 11.10173166161
Firefox 4.0106105110
Chrome 10.0917373

過程

速度計測器となる以下の HTML を各ブラウザに読み込ませ、更新ボタンを押すごとに出力された数値を記録することを 5 回繰り返し、それらの平均の数値を基に上記の表を作成した。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[JavaScript][bench] if else 文, switch case 文, ?: 三項演算</title>
<script>
window.onload = function() {
	// if else を行う一般的な関数サンプル
	function ifElse(){
		var n = Math.random() * 6 | 0;
		if (n === 5) return "five";
		else if (n === 4) return "four";
		else if (n === 3) return "three";
		else if (n === 2) return "two";
		else if (n === 1) return "one";
		else return "zero";
	}

	// switch case を行う一般的な関数サンプル
	function switchCase() {
		var n = Math.random() * 6 | 0;
		switch (n) {
			case 5: return "five";
			case 4: return "four";
			case 3: return "three";
			case 2: return "two";
			case 1: return "one";
			default: return "zero";
		}
	}

	// 三項演算を行う一般的な関数サンプル
	function ternaryOperation() {
		var n = Math.random() * 6 | 0;
		return n === 5 ? "five":
			n === 4 ? "four":
			n === 3 ? "three":
			n === 2 ? "two":
			n === 1 ? "one":
			"zero";
	}

	// 任意の関数を実行し速度を記録する関数
	function bench(func) {
		document.getElementById("running_func").firstChild.nodeValue = func;
		for (var i = 9e5, start = new Date; --i;) func();
		bench[func] = new Date - start;
	}

	// ベンチ実行
	bench(ifElse);
	bench(switchCase);
	bench(ternaryOperation);

	// ベンチ結果出力
	document.write(
		"<h1>結果</h1><dl>" +
		"<dt>if else" +
		"<dd>" + bench[ifElse] +
		"<dt>switch case" +
		"<dd>" + bench[switchCase] +
		"<dt>?:" +
		"<dd>" + bench[ternaryOperation] +
		"</dl>"
	);

};
</script>
</head>
<body>
<p id="running_func"></p>
</body>
</html>