ブラウザをフリーズせずにHTMLテーブルをソートすることはできますか？

Question

何百もの行を含むHTMLテーブルを使ってWebページを作成しました。 JavaScriptでページをプログラミングして、ユーザーがその列の上にあるヘッダーをクリックして、その列で表をソートできるようにしました。

これはうまくいきますが、行が非常に多いので少し時間がかかります。 JavaScriptのarray.sortメソッドを使用して基になるデータをソートし、次にそのデータをページに書き込むために使用します。

ユーザーがヘッダーをクリックすると、操作が完了するまでブラウザがフリーズするという問題があります。テーブルがソートされている間にブラウザーがフリーズしないように私のページをプログラムするにはどうすればいいですか？

Answer 1

これを達成する1つの方法は、サーバーサイドでajaxを使用してアイテムをソートすることです。

<div id="tableContainer"> 
    <table>...</table> 
</div> 

$.ajax({ 
    url: "/sort" 
    data: {items:items, sortField:"id"}, 
    dataType:"html", 
    success: function(sortedTable){ 
     $("#tableContainer").html(sortedTable); 
    } 
} 

Answer 2

この問題をおそらく既に解決している既存のHTMLテーブル/グリッドウィジェットライブラリを使用するのが最も良い方法です。間違いなく、ウェブを検索することで多くのものを見つけることができます。

Ajaxリクエストを使用してサーバー上のアイテムを大量に持ち上げる（たとえば、ソートする）ことができ、既存のDOMテーブル要素をサーバーソートハンドラから返された要素で置き換えることができます。

ソートアルゴリズムを自然言語のループからsetTimeoutまたはsetIntervalを使用して制御されるループに分解するなどして、ブラウザーのUIスレッドに適切な制御を戻すソート関数を記述することもできます。

Answer 3

ブラウザがフリーズしているのは、ページを常に再描画するためです。一度再描画するだけです。

テーブルを表示し、テーブルを並べ替えて並べ替え、再度表示することができます。

また、新しいソートテーブルをオフスクリーンで作成して、既存のテーブルをソートバージョンで置き換えることもできます。

Answer 4

あなたのケースのテーブルを並べ替える作業が本当に重い場合は、AJAXを使用してサーバー側の並べ替えを行うか、この新しいおもちゃHTML 5 web workerをご覧ください。ブラウザはシングルスレッドなので、UIスレッドは非ブロッキングコールバックメソッド内でラップされていないクライアント側で高価な操作を行うたびにブロックされるため、応答しないようにする必要があります。

ウェブワーカーの問題は、すべてのブラウザで広くサポートされていないことです。しかし、それは、高価なクライアント側のjs計算を別のバックグラウンドワーカーに委託する一方で、UIスレッドは応答性のままです。