読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScript 「this」のメリットと処理性能

<スポンサーリンク>

1.基礎知識のまとめ

・処理のパフォーマンスを向上できる
・内側のコードを使いまわしやすくなる
・$()関数に複数のセレクタを指定した場合に処理の切り分けが可能になる

引用元)「jQuery最高の教科書 p.79」

2.処理パフォーマンスの比較

下のサンプルで700,000回似たようなループを回してみたところ、たしかにthisを使った方がほんの少し処理性能が上がった。
何回やっても同じような結果だった。

this無し:処理時間:8362ms 
thisあり:処理時間:7335ms 

これは単純に文字のサイズを変えたり、色を変えるだけなんだけど、もう少し複雑な処理をすると、thisの有無の差は大きくなるかもしれない。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#result").on('mouseover',function() {
		var startTime = new Date();
		console.log("NOT THIS START!");
		for (var i=0; i<700000; i++) {
			if (i % 2 == 0) {
				$("#result").css('color','red');
				$("#result").css('font-size','xx-small ');	
			} else {
				$("#result").css('color','DarkBlue');
				$("#result").css('font-size','xx-large');
			}
		}
		console.log("NOT THIS END!");
		var endTime = new Date();
		var time = endTime.getTime() - startTime.getTime();
		console.log("処理時間:" + time + "ms");
	});

	$("#result2").on('mouseover',function() {
		var startTime = new Date();
		console.log("USE THIS START!");
		for (var i=0; i<700000; i++) {
			if (i % 2 == 0) {
				$(this).css('color','red');
				$(this).css('font-size','xx-small ');	
			} else {
				$(this).css('color','DarkBlue');
				$(this).css('font-size','xx-large');
			}
		}
		console.log("USE THIS END!");
		var endTime = new Date();
		var time = endTime.getTime() - startTime.getTime();
		console.log("処理時間:" + time + "ms");
	});
})
</script>
</head>
<body>
<h2>thisのサンプル</h2>
<div id="result">
これはthis無しの性能検証のサンプル
</div>
<br/>
<br/>
<br/>
<hr/>
<div id="result2">
これはthisありの性能検証のサンプル
</div>
<br/>
</body>
</html>

3.デモ

マウスオーバーで検証が開始される。
f:id:sho322:20140122003132j:plain

4.参考書籍

jQuery最高の教科書

jQuery最高の教科書

今回はjQuery最高の教科書のp.79あたりを参考にした。
今までモダンJavaScriptとかパーフェクトJavaScriptとか、色々と読んできたけど、この本は今のところ、「わかりやすさ」で一番だ。「深み」については、まだ3章まで読んでないから言及できないが、まじでわかりやすい。
今まではモダンJavaScriptが一番の入門書だと思ってたけど、これは「最高」の名に恥じない素敵な本だと思う。