私のプロジェクトでは、1 ページに 24*6*300 セルのテーブルが 1 つあります (これは統計をレンダリングするためのスクリプトです) - 時間の 24 列 * 10 分の 6 列 * 300 行。すべてのセルには、追加情報を含むほろ酔いポップアップがあります。問題は、非常に遅いことです。レンダリングだけでなく、ページ全体の作業も行います。スピードアップしたい場合、何をお勧めしますか? (セルを divs で置き換えますか? ul? でテーブルを画像としてレンダリングし、ホバー効果に imagemap を使用しますか?)
4 に答える
これが私のアドバイスです:
1.散らかったものにページを付けたり、削除したりします
たぶん、1ページあたり1時間のデータしか表示できませんか?たぶん、画面に基本的な情報だけを単純化して表示し、ユーザーが具体的に要求したときに、より包括的な結果を提供できるでしょうか。
2.CSS3スタイリングを削除します
テキストの影や変換などは、多くのCPUを消費します。パフォーマンスに重要な影響を与える場合は、それらを削除してください。私の意見では、より良いページは、美しくて非常にslllllooooooowwwwwww...よりも速くて醜いページです。
3.ページ上のJavaScript??
リークを特定し、最適化し、リファクタリングします。
うーん...他に何かありますか?
ブラウザの表示領域に43200個のオブジェクトが表示されていないことを期待しています。ユーザーのスクロールイベントに行を追加し、現在表示領域にない行を削除することを検討してください。
jqGridを使用して、巨大なデータテーブルを派手な方法でレンダリングできます
特定の DOM 要素がより多くのメモリ/プロセッサを集中的に使用することを懸念しているようです。あなたのケースでは、div の代わりにテーブルを使用することで、余分な要素が 1 つまたは 2 つになる可能性があります。しかし、機能的にも視覚的にも同じものになってしまうと、混乱してすぐに保守できなくなります。それを機能させるには、大量の CSS と、場合によっては多少の JavaScript が必要になります。意味的には無意味であることは言うまでもありません。テーブルは、あなたが持っているもののように、表形式のデータ用です。
夢中になってゼロからコードを作成するか、世の中にある多くのツールの 1 つを使用して作業を完了することができます。他の人の努力を活用し、無料で入手できるツールを使用することをお勧めします。データ テーブルの使用を検討してください。ある種のページネーションまたは「無限スクロール」/遅延読み込みソリューションが必要になる可能性があります。データ テーブルには、無限スクロールを処理できる「スクローラー」と呼ばれる追加機能が付属しています。
幸運を。