javascript - IEでページのアンロードが遅い

Question

多くのテーブル行を動的に作成するサイトを開発しています。現在の行の総数は187です。行を作成するときはすべて正常に機能しますが、IEでページを離れるときは、かなりのラグがあります。これが、ページで行っている重いDOM操作にどのように関連しているかわかりません。動的コンテンツのイベントハンドラーを構築するときに関数クロージャーを作成しないため、この問題がメモリリークに関連しているとは思われません。どんな洞察も大歓迎です。

Answer 1

要素ノードを手動で作成していますか、それとも innerHTML を使用していますか? 確かではありませんが、IE には HTML ノードに関連する独自のメモリ リークがあるのではないかと疑っています。

jQuery を使用してテーブルに 187 行を追加するデモ ページを作成しました。jQuery.append() は巧妙な小さなトリックを使用して、文字列を一連のノードに変換すると思います。div を作成し、その div の innerHTML を文字列に設定し、その div のすべての子ノードを指定したノードに複製してから、作成した div を最終的に削除します。

http://www.andrewpeace.com/stackoverflow/rows/rows.html

IE8 では遅延は発生しませんが、使用しているバージョンでは遅延が発生する可能性があります。教えていただければ幸いです！多分私はもう少し助けることができます。

平和

Answer 2

私はporneLに同意します。1つのイベントハンドラーを<table>にアタッチし、バブリングが魔法のように機能するようにします。ほとんどのフレームワークは、元のイベントの原因となった要素（通常は「ターゲット」と呼ばれます）を見つける方法を提供します。

document.createElement（）を使用して多数の要素を作成している場合は、それらをDOMフラグメントに追加できます。フラグメントをページに追加すると、それに接続されているすべての子ノードが追加されます。この操作は、各ノードを一度に1つずつ追加するよりも高速です。John Resigは、DOMドキュメントフラグメントに関する優れた記事を掲載しています：http：//ejohn.org/blog/dom-documentfragments/

Answer 3

イベントバブリングを利用して、すべてのイベントハンドラーを1つだけに置き換えてみてください。

Answer 4

YUI (およびおそらく他の一般的な JavaScript ライブラリ) は自動リスナー クリーンアップを提供するため、IE の問題を最小限に抑えるために、この機能を備えた YUI または別のライブラリを使用することを強くお勧めします。ただし、メモリ リークの問題ではなく、単純な速度低下が発生しているようです。イベントハンドラーを一連の要素にアタッチしています。IE6 は最適化されていないことが知られているため、すべてをクリーンアップするには永遠にかかるかもしれません。

apace にも良い点があります。JQueryにはそれに対する修正があるようです。