0

jquery プラグイン Datatables と twitter ブートストラップ css を使用して、最大 1500 行をレンダリングする必要があります。各行には、最大 50 行を含むことができるテーブルがあります。

Chrome 開発者ツールのプロファイラーとテストを使用すると、レンダリングが実際の問題になります。たとえば、.table th、.table td の 219861 セレクターの一致を表示する 250 のアイテムがあります。

どうすればこれを最適化できますか?

私はbootstrapcdnからTwitterのブートストラップを取得します

4

3 に答える 3

0

最近、テーブルデータが多すぎるという同様の状況が発生し、ページネーションで解決する必要がありました。HTML は、レンダリングを開始する前に、すべての情報を取得して大規模なテーブルを作成する必要があるため、非常に遅くなります。

于 2013-02-15T11:42:59.743 に答える
0

最後に、表示される行の最大数を 200 に制限します。「すべてのものを表示する」ことはできません。

cssも最適化してみます。私が使用していないブートストラップ css の定義がたくさんあるようです。

于 2013-02-15T16:13:34.550 に答える
0

私はフレームワーク開発者であり、現時点で直面したことや覚えていることのいくつかを共有できます

  1. テーブル レイアウト内にテーブルを記述する場合は、使用しないでください 

     'box-sizing:border-box'

    代わりに 'content-box' を使用してください。そうしないと、境界線を指定した場合または指定しなかった場合に、列ではなく行間にギャップが作成されます。それを削除するのに役立つスタイルはありません..これは、ネストされたテーブルレイアウトを実装する際に非常に重要です

  2. テーブル レイアウトで DIV を使用している場合でも、一部の mozilla バージョンでは 'max-width' が適切に機能しないことに注意してください。細胞。

  3. ホバーとフォーカスが適切に適用されないため、ブロック レバー ラッパーをセル内に保持し、テーブルの場合はスキンを適用します。

  4. そして、その場で要素を作成して追加する代わりに、これらの多くの要素を動的に埋め込み、HTML文字列を準備して追加すると、非常にうまく機能します..私はこれを観察しました. しかし、html レンダラーを変更すると汚いように見えるかもしれませんが、必要なのはパフォーマンスだけです

これらは、この時点で私が覚えているいくつかのことです。私がどこか間違っている場合は、私を修正してください..

提案モバイル ブラウザもターゲットにしている場合は、div レイアウトを扱う専門知識がない限り、テーブル レイアウトを使用してください。Floats一部の携帯端末では正しく動作しません。また、テーブルはモバイルでもメディア クエリで適切にスケーリングされます。

于 2013-02-14T16:51:08.367 に答える