大きなHTMLチャンク（AJAX経由でロードされた）を追加するときにブラウザをフリーズする方法

Question

私は様々なアイテムに関する情報を表示するweb-appを持っています。アイテムのわずかな部分だけが最初に表示されます。 （トップレベルのもの）。ページが最初にロードされたとき（そして最初のアイテムが表示されているとき）、私はAJAX経由でサーバーから完全なアイテムリストを要求しています。

リクエストが返されるとすぐに、アイテムを非表示divに挿入するので、ユーザーはアイテムを検索できます。 （完全なリストがロードされる前に検索を開始すると、モーダルダイアログで適切な「読み込み中のスピナー」が得られます）

私が唯一の問題は、ajaxで取り込んだデータを挿入した後、 （約10.000アイテム、生成されたHTMLの〜40MB）ブラウザは最大40秒間フリーズします。

私のコードは次のとおりです。

私はこの時の私のWebアプリが責任を作るために使用できる「パターン」

$.ajax({url: uri, data: { .... }}) 
     .done(function(data, status, jqXHR) { 
       data = $.trim(data); // takes about 35 ms 
       setupFullTree(data); 
     }) 

function setupFullTree (data,s){ 
    $tree.append('<div id="i-full-tree" data-status="loading" style="display:none"></div>'); // takes no measurable time 
    $('#i-full-tree').append(data); // takes between 10000 and 40000 ms, depending on the browser, ... 
    indexFts(); // takes about 50ms 
} 

？私はそれを小さな塊に分割しなければなりません（それは構造のような木ですので、これは簡単ではありません）。そして、私は挿入中にsetTimeoutを使う必要がありますか？ WebWorkerで必要な計算の一部を移動する方法はありますか？

Answer 1

ツリー構造で表示するajax応答データをjs変数に格納し、最初の100項目をロードして、ユーザーがデータの末尾までスクロールするとロードする必要があります。