csvで大量の商品リストを分割して書き出してIEでの処理を早くする方法【jQuery】

いつものようにcsvで商品リストを書き出す方法で特設ページを作っていたら、
今回の値下げ商品が1600件あって、IEだけページを開いたときに2秒程度フリーズしてしまう現象が起きたので、分割してhtmlを書き出す方法を調べてみた。

jQueryでcsv→html関連記事

一括書き出しのデモ

まずは実際に重たいページをIEで確認してください。
大人の事情で実際のページは見せれないので同じような条件で作ったデモをどうぞ。
スクロールしても何もないですがねw

フリーズする原因

いろいろ調べてみた結果、すごく簡単に言うとIEでページを開くのがそもそも遅く、今回のように大量のデータを一気に扱うと処理に時間がかかってフリーズっぽくなってしまうみたい。
じゃあ分割してちょっとずつ読み込めばいいんじゃない？ってことで改造してみた。

分割書き出しのデモとjsの解説

DEMO

js

$(window).load(function () {
    var randam = Math.random()*10;
    $.get('./test.csv?d='+randam,function(data){
        var csv = $.csv()(data);
        var text = ["",];
        var d = 0;
        var j = 1;
        var basep = 40;

        $(csv).each(function(index){
            if(this[0] && this[1] == 1){
                if(j % basep == 0){         
                    d++;
                    text[d] = "";
                }
                var randam = Math.random()*10;
                text[d] += this[0]+'.<img src="http://mugen00.moo.jp/web/wp-content/uploads/2017/06/TSURU170308-065_TP_V.jpg?d='+randam;
                text[d] += '" width="300"><br>';

                j++;
            }
        })
        
        $("#main").append(text[0]);

        var p2 = 1;
        var countup = function(){
            $("#main").append(text[p2]);
            var id = setTimeout(countup, 1000);
            p2++;

            if(p2 >= d){　
                clearTimeout(id);
            }
        }
        countup();
    })

});

htmlとcssは大したことないので割愛。
配列のtext[d]にliを詰め込んでいきます。
csvの処理回数をjでカウントして、jをbasepの数で割った余りが0の時text[d]のdに1足します。
つまり40こずつに区切ります。14行目は配列がundifindedのままなんで空にするのを忘れずに。

あとは24行目で何よりも先に1個目の配列を先に書き出しちゃえばその分時間が稼げます。

一定時間ごとに処理して書き出す

26行目からsetTimeout()を使って一定時間ごとに処理をしています。
上の場合だと1秒ごとに40個ずつに区切った配列を書き出していきます。

最後まで書き出しが完了したらclearTimeout();で終了させます。

という感じで分割して書き出していけばIEでもなるはやでページの表示ができるようになります。

ページ内リンクはやめておく

カテゴリごとにidをつけてページ内リンクを設置していたとしても書き出し途中の場合、idがなかったらその場所まで来れないので注意です。
そもそも件数が多いのが前提なので必要だと思います。
処理する件数にもよりますが、書き出す間隔を1秒より短くするとか、区切りをもう少し多くするとかして早めにすべてを書き出さないとだめですね。

処理が全部終わったらナビゲーションなんかを出したらしたらいいかなと思います。
今回は作ってないので、とりあえず次回までに考えることにしますw