セレクタ検索系でIEが遅くなる理由

セレクタ検索を独自に実装されている方は多いと思いますが、どうにもIE(特にIE6、7)が遅いと感じることはありませんか?

もちろん、JScriptのエンジン自体が遅いからなのですが、それ以外にもちょっとしたことで速度が改善したりします。

特に私が感じたのは、「NodeList」のループの部分です。

var list = document.getElementsByTagName(‘p’);

for (var i = 0; i < list.length; i++) {

// do something

};

と書くことが多いかと思います。しかし、これは遅いです。

var list = document.getElementsByTagName(‘p’), len = list.length;

for (var i = 0; i < len; i++) {

// do something

};

これだと数倍早く動きます。600回くらいのループで検証しました(内部処理は++countくらいで)が、

前者はIE6で約500ms、後者だと20数msでループが完了しました。

NodeListはSnapShotではなくLiveなものだから、ループの際に逐一「.length」の変化を見てるのかな?

もしくはNodeList.lengthのアクセス自体が遅いのか。

どちらかはわかりませんが、とにかくループ前にNodeListの長さを変数に格納してループすると

早くなるようです。

「数msくらい気にしない」、もしくは「IEはこんなもん」と思うのならさほど気にしなくてもよさそうですが、検索が遅いとその後の処理も遅くなってしまいますよね。

※どうもセレクタ検索を書くと速度のチューニングにハマって仕事にならないですね。

とりあえずトータルではjQueryより早ければいいかな。

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

7 Comments »