jQuery高速化

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

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

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

1. 出来るだけ#idで指定する。
2. クラスを使用する場合はタグを記入する
3. オブジェクトをキャッシュする
4. 何度も書かない
5. サブクエリを使用する
6. 圧縮する

1.出来るだけ#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を使用する上でよく使うサイト集

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

フォローお待ちしております。

@hanajr76

sssss