WEB制作トラブル速戦即決術！第12回

[TROUBLE 64]

IE 6やIE 7で自作のJavaScriptの
実行速度が遅く感じる

文＝マツダナオキ（(株)TSUDUMI）

A.	何度もgetElementById（）を使わず、変数に格納する

Internet Exprolerのバージョン6や7では、getElementById（）やdocument.getElementsByTagName（）等を使ってのDOM要素参照が多くなると、JavaScriptの動作が遅くなる傾向がある。コード内に同じ要素への参照が多いのであれば、一度変数に格納して、以後はその変数を使うようにし、getElementById（）などの記述数を減らそう。Jqueryの$（）関数などでの参照でも同様だ。なお、Internet Exprolerだけではなく、ほかのブラウザでの高速化も期待できる。

getElementById（）での、同じ要素への参照が多い例。「box」というidをもつ要素への参照が何度も行われている。ブラウザは毎回、HTML全体から「box」を探すことになってしまう

1行目で「box」というidをもつ要素への参照を「boxObj」という変数に格納した。これ以後のコードでは「boxObj」を使用している

上記のコードをjQueryを利用したコードに書き直したもの。jQueryの$（"#box"）も一度変数に格納するとよい

Firefoxでは、アドオン「Firebug」の「プロファイル」機能を使用することで、実行するJavaScriptを関数ごとに速度計測できる。IEで利用できる「Firebug Lite」では、残念ながらこの機能は実装されていないので直接計測はできないが、Firefoxでの実行速度も参考にはなるだろう