2

データベースからダンプされた大きな HTML テーブル (~10K 行、4 列、テキストのみ) があります。Chrome/Firefox で開くとパフォーマンスが低下します。

データベースに直接アクセスできないため、ページごとにロードすることはできません。すべてのデータは静的 HTML です。

この場合、いくつかのjQueryプラグインを使用したページネーションはパフォーマンスの向上に役立ちますか? 他の提案はありますか?

4

3 に答える 3

1

該当する場合、設定table-layout: fixedはレンダリング時間を大幅に短縮するのに役立ちます。遅さの主な原因は、デフォルトのテーブル レイアウト方法では、テーブルの一部をレンダリングする前に、ブラウザがテーブル全体を解析して処理し、すべてのセルの幅要件を計算する必要があることです。

固定レイアウトは、最初の行に従って列幅を設定するようブラウザーに指示します (適用される可能性のある CSS に注意してください)。もちろん、幅が他の行に適していない場合、これは混乱を招く可能性があります。行が一般的に非常に類似しているデータ テーブルの場合、幅はおそらく適切に設定できます。

これは、10,000 行すべてを読み取る人がいるとしても、ほとんどいないという問題を変えるものではありません。人々はおそらくそこで特定のデータを探しているでしょう。ユーザーが欲しいものだけを取得できる検索フォームを設定する方がよい場合があります。

于 2012-08-02T05:58:46.160 に答える
0

同様の問題があり、jQuery プラグインを作成しました。

https://github.com/lperrin/infinitable

これを使用するには、Ajax 呼び出しですべてのデータをロードし、それを巨大な配列に変換して、プラグインに渡します。

基本的に、表示されていないセルを非表示にしながら、セルの並べ替えやフィルター処理を容易にします。それを達成するための他のソリューションがありますが、これには jQuery 以外の依存関係はありません。

プロジェクトには、100,000 要素を含むテーブルを含むデモが含まれています。

于 2012-08-05T23:25:38.260 に答える
0

ページネーションは、この問題を確実に解決します。また、最初にテーブル スタイルを に設定してみてくださいdisplay: none。ブラウザーがテーブルをレンダリングしようとする前に、ページネーションが有効になる可能性がありますが。

テーブルを別の html ファイルに保存し、ドキュメントへの ajax 呼び出しを行い、ライブ スクロールを実装することもできます。ただし、これは、ユーザーがデータを探索する方法によって異なります。特定の怒りへのジャンプ100-199が便利な場合は、ページ分割されたテーブルが理想的です。

于 2012-08-02T04:11:19.353 に答える