IE8でjQueryが重いなと思ったら、やるべき3つのこと

入社半年の新人
ですが、このような場をいただきましたので、入社してすぐに取り組んだInternetExplorer(以下、IE)
8のjQueryのパフォーマンス対策について書いてみたいと思います。

document.getElementById("aaa")
document.getElementsByTagName("aaa")
document.getElementsByClassName("aaa")

$(".bar")

$("#foo").find(".bar")

$("#foo").children(".bar")

$("div.bar")

$("li").find(".bar")

$(".bar").css("color","#fff");
$(".bar").css("border","thin solid #000")
$(".bar").width(100);

var bar=$(".bar");
bar.css("color","#fff");
bar.css("border","thin solid #000");
bar.width(100);

$(".bar").css("color","#fff").css("border","thin solid #000").width(100);

以上が３つの対策になります。

まとめ

スーパーデリバリーでは、これら３つの対策をすることで「IE8でjQueryが重い」現象に対応し、パフォーマンス問題を改善することができました。
もし、いまお困りであれば試してみてください！
 

まとめのまとめとして、今回の対策からの学びを、本質的な観点からまとめたいと思います。

今回最も大きな原因は、IE8の機能不足によるものでした。

ただし、使用するライブラリや実行環境の問題というのは多くの場合制御不能なので、”特徴”と捉えてうまく付き合うしかありません。

今回の現象も、「重い」という問題になる前に特徴を把握して、対策をしておけば、顕在化することなく防げていたと思います。

ただ、そもそも、「対策」にあげている、2.検索対象を減らしたり、3.検索回数を減らすといった対策は、通常のプログラムを書く場合や、SQLを考える場合などでも考慮すべき点です。

ひと昔前はJavaScriptというとプログラミング言語というよりはHTMLの一部みたいに考えていた頃もありましたが、改めてプログラミング言語だということを意識して、設計・実装を行うことが必要です。

これらを意識していれば、もし仮に特徴を知らなかったとしても、パフォーマンスが問題にならなかったかもしれません。

また、パフォーマンスの改善の効果の他に、検索回数を減らすために要素の取得処理をまとめ、複数箇所に分散させないことで、修正箇所が絞られ、スクリプト言語にありがちなスペル違いや修正漏れを防ぐことができ、メンテナンス性も改善できます。

日頃からシンプルで保守性の高いコードを心がけたいですね！

Don't repeat yourself!

最後に

スーパーデリバリーのTOPページを2013年7月3日にリニューアルしています。

デザイナーとプログラマのこだわりがぎっしり詰まったNewTOPページをぜひご覧ください

→ スーパーデリバリー( http://www.superdelivery.com )

担当したログイン後のスライドショーはスーパーデリバリーの会員様だけにしかお見せできないのが少し残念ですが、、、

---

参考URL：
http://jquery.com/

http://sizzlejs.com/
http://ja.wikipedia.org/wiki/Don't_repeat_yourself