ホーム >> 左脳Script >> Java Script >> エレメントの座標取得 ~高速化への挑戦~

エレメントの座標取得 ~高速化への挑戦~


Java Script による、エレメントの座標の取得方法は、エレメントのoffsetLeft、offsetTop を使う方法が一般的です。
しかし、この offsetLeft、offsetTopプロパティInternet Explorer 8 では破壊的に遅く、扱うエレメントの数が増えると、あっという間にブラウザークラッシャーになってしまいます。

これを何とか出来ねぇでしょうか?


キャッシュはどうか?

階層構造を親に向かって辿るなら、なんとかキャッシングして辿らずに済ませれば軽くなるのではないか?
と、安易な思いつきから、キャッシングの方法を調査。

エレメントに対して、offsetLeft、offsetTop を記憶できれば良いのです。
が、Java Script のハッシュは、オブジェクトを直接キーに出来ません。

しかし、検索の結果「JavaScriptでもオブジェクトをキーに出来る、FlashDictionaryのようなもの」を作成された方がいらっしゃったので、試しに使って見ました。


以下のようなコードで、元のコードを代用してみました。

//  キャッシュ
var elementPositionCache    =   new Object.associativeArray();
//
function    getPositionN(node)
{
    var result  =   elementPositionCache.get(node);
    if( result!=undefined   )   return  result;
    //  キャッシュに無かった
    if( node.offsetParent   )
    {
        var p   =   getPositionN(node.offsetParent);
        result  =   {x:(p.x+node.offsetLeft),y:(p.y+node.offsetTop)};
    }
    else
    {
        result  =   {x:node.offsetLeft,y:node.offsetTop};
    }
    //  キャッシュへ登録
    elementPositionCache.set(node,result);
    return  result;
}
参考:元のコード。

//  座標取得
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};
};

流石に、前回の記事でのベンチコードで計ったところ、5回平均の1回目は重いのですが、2回目以降は、全く時間がかかっていません。キャッシュ機構はちゃんと動作しているようです。

キャッシュのクリアタイミング次第では、十分な速度を出せるであろうと、「バラバラ逃げるリンク」に組み込んで見たのですが・・・


結果:結局重いまま。

どいう残念な事になってしまいました。


今回の反省

正直、データの十分な解析をしないまま、思いつきでキャッシュ実装をしていた事で、結果を出せなかったようです。orz

しかし、「Java Script で オブジェクトをキーに出来る配列ライブラリ」を知る事が出来たのは良い収穫でした。


コレは使える!うぅん、知らないけど、キットそう・・・



トラックバック(0)

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

コメントする

ホーム >> 左脳Script >> Java Script >> エレメントの座標取得 ~高速化への挑戦~

アーカイブ

このブログ記事について

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

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

次のブログ記事は「エレメントの座標取得 ~スクロール要素~」です。

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

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