10 個の折れ線グラフを作成してみましたが、それらはすべて 3000 ポイント、300*300 SVG サイズでした。ブラウザがクラッシュし、タスク マネージャーを確認したところ、Google レンダラーがメモリ使用率 1.2G、CPU 使用率 100% でおかしくなっていました。
1 に答える
2
このような問題には簡単な解決策はありません。コードを精査して可能な限り効率的にすることはできますが、コードが 1 つの「スレッド」で何十万もの操作を実行する必要がある場合は、フリーズしてしまいます。
このフリーズアップを回避するための一般的な解決策は、描画プロセスを小さなタスクに分割し、非同期で (つまり 内からsetTimeout) 呼び出すことです。このようにして、ブラウザーが JS コードを実行している間、長時間ロックすることはありません。おそらく (私はこれについて専門家ではありませんが)、ガベージ コレクターが途中でクリーンアップする可能性もあります。
その結果、全体的な描画時間が短縮されるわけではありませんが、ブラウザがフリーズしないため、ユーザーにとっては高速に「感じ」ます。プログレスバーを追加することもできます。
一部の描画操作は、サブタスクに分割できません。たとえばsvg.line()、グラフのパス定義を生成する d3 関数を分割することはできません。ただし、 10 個のチャートの描画コードを分割して、a の目盛りごとに一度に 1 つのチャートを描画することができますsetTimeout。同様に、実際の図面からデータの準備を分割することもできます。
私は別のシナリオへの回答を書きましたが、ここに同様の問題があります: JavaScript によってブロックされた CSS トランジション
于 2013-05-20T21:59:34.997 に答える