JavaScript/jQuery

jQuery高速化

jQueryは便利でJavascriptだとめんどうなclassで指定できるなど、非常に使いやすいライブラリーです。

しかし、使いやすいからとclassなど、Javascriptだということを考えないで組んでいくと後々非常に重いjavascriptとなってしまいます。

そうならないためにjQueryをコーディングする際気をつけるべきことです。

1.出来るだけ#idを指定する

なぜ出来るだけ#idを使用するかというと、元々のJavascriptがidで指定できるためです。
#idで指定してあげると無駄な処理が無い分早くなります。

[javascript]
$("#test").click….
[/javascript]

2.クラスを使用する場合はタグを記入する

タグを指定してあげることで、検索対象がすべてのタグから特定のタグになるので早くなります。

[javascript]
$("div.test").click….
[/javascript]

3.オブジェクトはキャッシュする

オブジェクトを変数に入れ無駄なアクセスを減らす事で高速化できます。

[javascript]
$("div.test").click(….
$("div.test").css(….
$("div.test p").attr(….
[/javascript]

を、

[javascript]
$test = $("div.test");
$test.click(….
$test.css(….
$test.find("p").attr(….
[/javascript]

4.何度も書かない

コードを書くのも楽になります。

[javascript]
var test = ("$div.test");
test.mouseover(….
.mouseout(….
.hover(….
[/javascript]

5.サブクエリを使う

3番にも似ていますが親要素をキャッシュしてから子要素にアクセスする。

[javascript]
var test = $("div.test");
test.find("p").mouseover(…
[/javascript]

6.圧縮する

圧縮する。Webサービスでも様々なものがあるので利用してみるのもいいですね。
JavaScriptを使用する上でよく使うサイト集

この他にも様々なものがありますが手間がかかるものもあるので、そこは各プログラムごとに相談しつつという感じにやっていければいいと思います。