DocumentFragmentを使っても1万ノードを一気に足すのはやめといたほうがいいらしい

JavaScript

opera:cache で確認できる自分のキャッシュファイルの数は10189個あった。

それを、URL で絞り込んでインクリメンタルサーチ (書くまま検索) させる遊びをしているのだけど、入力欄が空白のときはテーブルの行を10189行全部追加しないといけないので、一気にやると5秒ぐらい固まる。

function redrawTableContents(df){
    tbody.appendChild(df.cloneNode(true));
}

(df には1万行の tr 要素が入ってる)

というわけで、一定行ずつ数回に分けて描写するようにすると、固まることはなくなったものの、やはりもっさりする。

function redrawTableContents(df){
    var singledrawnum=50;
    var df2=document.createDocumentFragment();
    tr=df.firstChild;
    while(tr){
        for(var i=0;i<singledrawnum;i++){
            if(!tr) break;
            df2.appendChild(tr.cloneNode(true));
            tr=tr.nextSibling;
        }
        tbody.appendChild(df2);
    }
}

50行、100行、300行、600行、1000行ずつ試したけど、もっさりするか一瞬止まるかのどちらか。

何が一番良いんだろう。

全部の結果というところをスタイルでdisplay:noneとしておいて、検索欄が空白ならそれを表示させるのがいいかな。


まあ書くまま検索なんてやらなきゃいいことなのかもしれないけど (キャッシュファイルを漁るときなんて大体 URL 決め打ちでしょ? )、遊びということでやってみてる。

僕の opera:cache の HTML ソースのサイズが 6MB で、Safari の Client Side Storage が 5MB までなので、将来はこういうことも必要になってくるかもしれない。


ブックマークレットは下に置いてあるので、全コピして opera:cache でアドレス欄に入れて実行。

"youtube" とかそれなりに長い (結果が絞れる) 文字列を入れた場合は普通にストレス無く使えると思う。


やっぱりAutoPagerize的に継ぎ足すのが良さそう。こんな感じで。

function redrawTableContents(df,query){
    var singledraw=100;
    var df2=document.createDocumentFragment();
    tr=df.firstChild;
    function draw(){
        for(var i=0;i<singledraw;i++){
            if(!tr) break;
            df2.appendChild(tr.cloneNode(true));
            tr=tr.nextSibling;
        }
        tbody.appendChild(df2);
    }
    draw();
    return document.addEventListener('scroll',function(){
        var html=document.documentElement;
        var scrollBottom=html.scrollHeight-html.scrollTop-html.clientHeight;
        if(scrollBottom<html.clientHeight){
            draw();
        }
        if(query != searchbox.value || !tr){
            document.removeEventListener('scroll',arguments.callee,false);
        }
    },false);
}

こういうのを「クロージャ」というんですよね? (って誰に聞いてんだ)

使いもしない情報を表示するためにリソースを無駄遣いするのは無意味だ。

上のリンクも新しいのに変えておいた。かなりサクサク動きます。