データベースからダンプされた大きな HTML テーブル (~10K 行、4 列、テキストのみ) があります。Chrome/Firefox で開くとパフォーマンスが低下します。
データベースに直接アクセスできないため、ページごとにロードすることはできません。すべてのデータは静的 HTML です。
この場合、いくつかのjQueryプラグインを使用したページネーションはパフォーマンスの向上に役立ちますか? 他の提案はありますか?
データベースからダンプされた大きな HTML テーブル (~10K 行、4 列、テキストのみ) があります。Chrome/Firefox で開くとパフォーマンスが低下します。
データベースに直接アクセスできないため、ページごとにロードすることはできません。すべてのデータは静的 HTML です。
この場合、いくつかのjQueryプラグインを使用したページネーションはパフォーマンスの向上に役立ちますか? 他の提案はありますか?
該当する場合、設定table-layout: fixed
はレンダリング時間を大幅に短縮するのに役立ちます。遅さの主な原因は、デフォルトのテーブル レイアウト方法では、テーブルの一部をレンダリングする前に、ブラウザがテーブル全体を解析して処理し、すべてのセルの幅要件を計算する必要があることです。
固定レイアウトは、最初の行に従って列幅を設定するようブラウザーに指示します (適用される可能性のある CSS に注意してください)。もちろん、幅が他の行に適していない場合、これは混乱を招く可能性があります。行が一般的に非常に類似しているデータ テーブルの場合、幅はおそらく適切に設定できます。
これは、10,000 行すべてを読み取る人がいるとしても、ほとんどいないという問題を変えるものではありません。人々はおそらくそこで特定のデータを探しているでしょう。ユーザーが欲しいものだけを取得できる検索フォームを設定する方がよい場合があります。
同様の問題があり、jQuery プラグインを作成しました。
https://github.com/lperrin/infinitable
これを使用するには、Ajax 呼び出しですべてのデータをロードし、それを巨大な配列に変換して、プラグインに渡します。
基本的に、表示されていないセルを非表示にしながら、セルの並べ替えやフィルター処理を容易にします。それを達成するための他のソリューションがありますが、これには jQuery 以外の依存関係はありません。
プロジェクトには、100,000 要素を含むテーブルを含むデモが含まれています。
ページネーションは、この問題を確実に解決します。また、最初にテーブル スタイルを に設定してみてくださいdisplay: none
。ブラウザーがテーブルをレンダリングしようとする前に、ページネーションが有効になる可能性がありますが。
テーブルを別の html ファイルに保存し、ドキュメントへの ajax 呼び出しを行い、ライブ スクロールを実装することもできます。ただし、これは、ユーザーがデータを探索する方法によって異なります。特定の怒りへのジャンプ100-199
が便利な場合は、ページ分割されたテーブルが理想的です。