応答が遅いHTMLテーブルは大きな

Question

である私は、製品のデータは4列（インデックス番号、SKU、製品の説明、および株式）をテーブルに表示されている製品データ管理のためのWebアプリケーション、に取り組んでいます。

私が直面している問題は、テーブルが非常に大きく（> 1000行）なったとき、ページが非常に遅く、特に行に移動したときです（私はCSSでtr:hoverを定義しました）。

Iは、部分的にデータを表示することによってこの問題を解決し、ユーザが下にスクロールされたときに、いくつかのJavaScriptを使用することによって、よりロードしようとした：

if (tablesDIV.scrollTop> = tablesDIV.scrollHeight - (tablesDIV.clientHeight + 80)) { 
    /*...*/ 
} 

それが良好な結果を与えたが、これにより最後の行に達する防止を押すと、かなりの数の行が読み込まれたときにページが再び遅くなりました。

この問題の解決方法はありますか？

EDIT：テーブルに関連するCSSコード。

#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default} 
#tables tbody th{font-weight:700;text-overflow:none} 
#tables tbody tr{background:#FFF;cursor:pointer} 
#tables tbody tr:nth-child(even){background:#F8F9FC} 
#tables tbody tr:hover{background:#CDE} 

EDIT2：デモ。

デモ：http://jsfiddle.net/4dpGz/

Answer 1

ループを遅くする最初のことは、.insertRow()です。ループの最上部でこれを行い、セルを追加します。行が追加され、各セルが追加された後、ブラウザはレイアウト計算を実行しています。代わりに.createElement()を使用し、次にループの最後に.appendChild()を使用します。

デモ：で

row = tableContent.insertRow(i); 

を：：http://jsfiddle.net/ThinkingStiff/gyaGk/

置き換え

row = document.createElement('tr'); 

そして、あなたのループの最後にこれを追加します。解決します

tableContent.tBodies[0].appendChild(row); 

あなたの読み込み速度の問題。ホバーについては、タグセレクタを使用してtrとtd要素に影響するCSSルールが多すぎます。私はいくつかを削除し、いくつかのクラスを使用し、ホバーの強調表示ははるかに高速です。具体的には、td要素のoverflow: hiddenがかなり減速していることがわかりました。いくつかのルールを組み合わせ、より単純なセレクタを使用して、CSSを素早く処理するために要素にクラスを追加することを検討してください。ホバリングの間、レイアウトエンジンによって多くのことが再計算されなければならず、CSSルールが少なくなるほどよい。私があなたのコードで見た1つの例は、テーブルにtbodyが1つだけあったときは#tables tbody trでした。 #tables trは十分である。それらのいずれかよりも優れたクラスです。私はデモで.rowを使用しました。 Google Page Speedから

ベスト・プラクティス：

• 避け子孫セレクタ：table tbody tr td
• が冗長祖先を避ける：body *
• 避けタグセレクタ：body section article（bodyは必要ありません）
• は、ユニバーサル（*）セレクタを避けてくださいキー（右端）：ul li
• Avoi D子または隣接セレクタ：ul > li > a
• が過度資格のセレクタを避ける：form#UserLogin（#が既に特定され）
• （クラスまたはID）可能な限りあなたのルールは、などの特定してください。

Answer 2

表がダウンロードする必要があり、それらが表示される前に完全にレンダリング、表示に時間がかかるように見えます。すべてのこの経過は、処理能力に依存します：あなたは私はあなたがここからいくつかのことを試すことができますが、目立った遅れを見ている驚いていた行の量については

Are large html tables slow?

、私たちはあなたを助ける支援しますアウト：（時たとえば、200行）（これらは、ブラウザによってレンダリングされる）

• 削除勾配背景チャンクで
• のpaginateフォームデータ
• 出力形式行
• すべてのCSSヘルプを削除しますか？
• あなたのテーブルはあなたがtable-layout:fixedプロパティを適用するビットにレンダリング時間を向上させることができます（COLSPANおよび/またはROWSPANなし）通常の列を持っている場合、細胞

Answer 3

、テーブルの行の正確な幅+高さを指定します。

MDN：最初のテーブルの行がダウンロードされ、分析された後に「固定」レイアウト方法の下https://developer.mozilla.org/en/CSS/table-layout

、テーブル全体をレンダリングすることができます。これにより、「自動」レイアウト方法に比べてレンダリング時間が短縮されますが、その後のセルの内容は、提供される列幅に収まらない場合があります。

Answer 4

大きなテーブルをdivに入れると、setTimeoutを使用するのが最適です。これは、最初にグローバル変数にテーブルを格納してから、setTimeoutで関数を呼び出すときにChromeで大幅に高速化されているようです。

setTimeout("setTable(tdata)",1); 

function setTable(d) { 
     $("#myDiv").html(d); 
} 

乾杯！ B55

Answer 5

また、chromeの任意のHTML要素と同様に、「transform：rotateX（0deg）;」を追加します。ハードウェアアクセラレーションが強制的に実行され、スクロールが大幅に高速化されます（問題の場合）。

Answer 6

非常に大きなテーブル（たとえば、5000または500,000行）で作業する場合は、Clusterizeという小さなプラグインをお勧めします。 jQueryを使用する必要はありません。アイデアはレイジーローディングイメージに似ており、実際には非常にうまく動作します。