大きなHTMLテーブルは遅いですか？

Question

私は最近、多数の（数百）行のテーブルを使用してアプリケーションを開発しています。行には表形式のデータが含まれ、各行には2つのドロップダウンリストとそのすぐ下の非表示の表の行を表示するリンクがあります。

現在、ドロップダウンから値を選択しようとしているときや、隠しテーブルの行を表示しているときに、長時間の遅延が発生しています。

テーブルが私の問題の原因ですか？

Answer 1

問題は、テーブルレイアウトではなく、コントロール（100個の選択ボックス）のレンダリングよりも多い可能性があります。ドロップダウンリストにはいくつのアイテムがありますか？異なるオペレーティングシステム上のすべてのブラウザで同じように動作しますか？

あまりにも漠然としていますが、テーブルはレンダリングが遅くはありませんが、アクセシビリティが不足しているため見落とされます（理想主義の多くはスクリーンリーダーが好きではありません）。

Answer 2

幅が明示的に指定されていないと、HTMLテーブルの表示が遅くなることがあります。そうでない場合、ブラウザーはセルの内容のロードを完了してから正しい幅を計算する必要があります。

MSDNには、 "Building High Performance HTML Pages"の記事に役立ついくつかの情報hereがあります。彼らは、以下の（特にに関するテーブル）をお勧め：

• テーブルの上にfixedにテーブルレイアウトCSS属性を設定します。
• 各列にcolオブジェクトを明示的に定義します。
• 各colにWIDTH属性を設定します。

Answer 3

私は、数千のエントリを持つ静的なテーブルを表示するときに任意の速度低下に気づいていませんでしたが、ゼブラストライプを並べ替えたり、ダイナミックのような効果を追加するとすぐに高速なコンピュータ上でも近代的なブラウザを行き詰まらすることができます。表全体でJavaScriptの繰り返しを実行していないことを確認してください。

Answer 4

各列の幅を知っている場合は、表のCSSにtable-layout: fixedと指定してみてください。違いがあるかどうかを確認してください（ブラウザがトグルしたためにテーブル全体を再描画しようとします

Answer 5

いくつかのプラットフォーム上のいくつかのブラウザで、いくつかの低速のマシンでいくつかのブラウザでアプローチをテストしてください。私は一度、Macintosh用のSafariを除いて、どこでもスピーディーなアプリを持っていました。それはドロップダウンをレンダリングする方法について何かであることが判明しました。実験に代わるものはありません。ええ、私はテストを意味しました。

Answer 6

IEは非常に大きなDOM操作をまったく処理しません。

各行とリンクに2つの選択肢があり、各選択に5つのオプションがあるとします（（（5options + 1select）* 2）+1リンク+ 3tds + 1tr）少なくとも17のDOM項目行ごとに。さらに、私が間違っていない場合、つまり、各テキストアイテムをそれ自身のDOMノードとして扱います。したがって、ドロップダウンテキストには10​​個のDOMノードを追加し、リンクには1個を追加します。これは行あたり28個のDOMアイテムです。

Answer 7

私は経験から、遅くなる原因となっているドロップダウンリストはほとんど間違いないと述べることができます。数百の行を持つ表は、テキストのみを含む場合はほぼ即時にレンダリングできますが、数十のオプションを使用して各行にドロップダウンリストを追加すると、50行でも目立つ時間がかかります。

テーブル行のドロップダウンの必要性を考慮して設計してください。これがフォームの場合（そしてドロップダウンリストが必要な理由は？）、編集したい行をユーザーに選択させてから、あなたがそのようなことをしている場合はAJAXを介して、あるいはより伝統的な「詳細ビュー」のアプローチのどちらかで、その行にのみ表示されます。

Answer 8

私はそれだけでなく、低速読み込みを引き起こしているだけでなく、ドロップダウンリストの母集団であることに同意します。

テーブルを改ページすると便利です。 jQueryなどのJavaScriptフレームワークや、ページネーションやAJAXにはextjsを使用できます。