めも。

console.profile()、console.profileEnd()を用いると各関数の実行回数、合計の実行時間などを計測し、コンソールへ詳細に吐き出してくれる。
上記関数にはそれぞれ同一のキーを引数として渡し、同じキーが指定されたものをペアとしてその区間の計測結果を出力してくれる。

例えば下記のようなjQueryを用いたコードのパフォーマンスを詳細に計測したい場合。

<script>
var obj = {};

obj.test = function(){
	console.log('ok');
}

$(function(){
	for(var i = 0; i < 100; i++){
		for(var j = 0; j < 10; j++){
			obj.test();
		}
	}
})
</script>

下記のようにconsole.profile()、console.profileEnd()を挿入してみる。

<script>
var obj = {};

obj.test = function(){
	console.log('ok');
}

$(function(){
	console.profile('key');
	for(var i = 0; i < 100; i++){
		for(var j = 0; j < 10; j++){
			obj.test();
		}
	}
	console.profileEnd('key');
})
</script>

そして、これを実行すると下記のようなデバッグ結果が出力される。
※下記はChromeで実行した場合のデバッグコンソール。

パフォーマンスを極限まで追及する際に欠かせない非常に強力な機能だね。

めも。

<script src="//example.com/hoge.js"></script>
<script src="//example.com/fuga.js" defer></script>

上記2行目のようにscriptタグに対しdefer属性を追加してやると、そのscriptタグの評価を他全てのscriptタグの評価終了後に遅延させることが出来る。
逆に非同期で外部JSファイルを読み込み逐次評価させたい場合は下記のように、async属性を追加してやればよい。

<script src="//example.com/hoge.js"></script>
<script src="//example.com/fuga.js" async></script>

まぁ普通にjQueryの$(function(){…})でやればいいことなんだけれども。

めも。

remove()だとその要素ごと消し去ってしまうので、子要素のみを空っぽにしたい場合はempty()を用いる。

以下例。

■HTML

<div class="target">hogehogehogehogehogehoge<span>piyopiyopiyo</span></div>

■Javascript

$(function(){
	$('.target').empty();
});

これで外側のdiv要素は残り中身だけを空にする事が出来る。