なぜブラウザは大量のDOM要素で遅くなるのですか

Question

この質問は非常に些細なものですが、ブラウザがDOMをどのように処理し、DOM要素の数が多いと遅くなるのかを知りたいだけです。これはちょうどサイズについてですか？ DOM要素の数は多くないが、javascriptオブジェクトは何ですか？それはまだ遅く応答するか？

私は、JavaScriptオブジェクトにイベントが添付されていて、それらを破棄しないと、すべてのイベントハンドラを（順番に）実行する必要があるため遅く応答しますが、なぜメモリリークがブラウザを遅くするのか？ （ブラウザがメモリを大量に消費しているものの、システムにはまだ十分なメモリが残っていると仮定します）。

更新： 驚いたことに、CPUとメモリの使用状況は常に制御され、ブラウザは遅く応答します。

Answer 1

ページにすべての要素がロードされ、変更されない場合、DOM要素の量に関係なく遅くする必要はありません。ただし、動的ページがある場合は、レイアウト全体が再描画されるような操作が発生します。これはlayout thrashingと呼ばれ、パフォーマンスに大きな影響を与える可能性があります。

Answer 2

最も明白なのは、ブラウザがすべてのメモリを消費し、スクロール中に何かをレンダリングする時間が来たときなどです。 メモリに問題がなければ、JohanPは書き込みです - 理由はありません。

Answer 3

多くのデータを読み込むとブラウザが遅くなるのはなぜですか？彼らは多くのデータを読み込まなければならないからです。大きな画像は明らかに負荷スピードの点で最悪の原因ですが、ページの負荷は送信されるキロバイト数に直接関係しています。コードがたくさんあると、ファイルサイズが大きくなります。

function foo(arg) { bar = "This is a global variable"; }

： - 明示的に定義されていない変数はグローバルスコープを仮定します

1. 偶然グローバル変数：JavaScriptのためとして

   、漏洩の4つの主要な原因がありますタイマまたはコールバックを忘れた -のような時間関数で変数を宣言するときの場合、変数はまだ区間の終わりに存在します。

   ​​

2. をクロージャ - しばしばないループ：後に除去される要素への参照を割り当てる場合、基準がまだ存在する - DOMのアウト

3. は参考文献可変的な範囲を失い、プロセスに漏れてしまう。 JavaScript closuresを参照してください。

JavaScriptのメモリリークの詳細については4 Types of Memory Leaks in JavaScript and How to Get Rid Of Themを参照してください。

希望すると便利です。