ホーム >> 左脳Script >> Java Script >> エレメントの座標取得 ~IEの破壊的遅さ~

エレメントの座標取得 ~IEの破壊的遅さ~


Java Script による、エレメントの座標の取得方法は、以下のようにエレメントを遡るやり方が広く一般的です。


//  座標取得
function    getPosition(el)
{
    var ex  =   0;
    var ey  =   0;
    do
    { 
        ex  +=  el.offsetLeft;
        ey  +=  el.offsetTop;
    }
    while(  el  =   el.offsetParent );
    //
    return  {x:ex,y:ey};
}
検索すれば、大抵上記の「offset系プロパティ」を使ったコードが紹介されている事と思います。(2009年6月15日時点)

そんな訳で、一般人な私もコレを一般的なものとして使ったコードを書いたわけですが・・・

Internet Explorer での動作の遅さは異常

と言うことが判り、コレをなんとかしなければワシの未来はにぃ!


調査

私の使い方にも問題はあった(100以上の別々のエレメントに対して、常に呼び出していた。)のでしょうが、それにしても破壊的に遅いです。IEだけ特に。

まず、どれくらい遅いのか、その遅さを調べてみましょう。

このような コードで指標を出してみました。→pos_bench.html

コードの正当性に関しては保障はありません。各ブラウザの相対的な位置づけを目標としています。また、実際にテストしたブラウザは、Chrome(1.0.154.65)、safari(4.0-530.17)、Internet Explorer(8.0.6001.18702)、FireFox(3.0.11 .NET CLR 3.5.30729) です。

getPosition 1000回ベンチマーク
Internet Explorer 8312.4ms
Chrome11.4ms
safari4.8ms
ForeFox323.8ms
私の環境では、このような傾向が出ました。5回平均の値ですが、何度かやって大体この傾向が出たので目安と言うことで。絶対値ではなく、各ブラウザの相対値で比べて下さい。

10msec以下は誤差の方が大きいでしょうから差はないと考えても・・・IEのこの値は異常です。FireFox の10倍以上かかっています。

試しに、「offsetLeft、offsetTop」の行をコメントアウトしたところ、IEでも5msec等の値になる事から、offsetParent より、offsetLeft & offsetTop が遥かに重い処理である事も判りました。


構造を複雑?にしてみる

冒頭で示したコード「getPositionルーチン」のアルゴリズムからも判るように、指定のあったエレメントから、その親へ向かって追跡をしています。これは、HTMLのレイアウトや構造に依存すると言う事です。
複雑な段組やら、特にブログのテンプレートのように 「多数の<div>入れ子」の構造になっている場合、特に遅くなる事が判ります。

20段の <div> に内包される場合のベンチ→pos_bench2.html

20段<div> 1000回ベンチマーク
Internet Explorer 8512.4ms
Chrome13.2ms
safari2.6ms
ForeFox330.4ms
例によって、私の環境の値なので、あくまで相対的指標です。

Chrome、safari は誤差範囲程度なので、あまり指標にならないかもしれません。

当初の予想通り、親へのパスが深くなると重くなる結果が出ています。
そして、IEでは offsetプロパティの重さもあってか、差が如実です。


どないしよか・・・orz

元々が、結構単純なコードなだけに「コードそのものの最適化」が、そもそも出来そうにありません。その上、この「offsetプロパティから値を得る」作業そのものが重いとなると、なかなか打つ手がありません。

真っ当な方法で「エレメント座標の取得」を高速化する方法はあるのでしょうか・・・



トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/165

コメントする

ホーム >> 左脳Script >> Java Script >> エレメントの座標取得 ~IEの破壊的遅さ~

アーカイブ

このブログ記事について

このページは、n-yagiが2009年6月18日 11:53に書いたブログ記事です。

ひとつ前のブログ記事は「foreach参照の試練」です。

次のブログ記事は「コード表示用 Plugin 改 ~文字装飾の憂鬱~」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。