私は同じことを読み続けています:
「プロパティ値を DOM 要素に直接保存すると、メモリ リークの可能性があるため危険です。」
しかし、これらのリスクをもっと詳しく説明してくれる人はいますか?
ベストアンサー1
(属性とは、DOM 要素のプロパティを指しているものと想定します。)
DOM 要素のカスタム プロパティは安全ですか?
一部のブラウザでは、DOM 要素が破棄されたときに適切にクリーンアップされません。そのため、他の要素、同じ要素、または大量のデータへの参照が保持され、リークが発生します。この問題は、新しいブラウザではほぼ解決されていると思います。
いずれにせよ、要素に少量のデータを保存することは無害であり、非常に便利な場合もあるため、この警告は鵜呑みにしないでください。
jQuery を使用するのは.data()安全な代替手段でしょうか?
特にそうではありません。jQuery のカスタム データ ストアを使用してデータを保存すると、メモリ リークが発生する可能性がありますが、残念ながら、影響を受けるのは古いブラウザーだけではありません。
メモリリークを回避するには、.data()要素を破棄するときに必ず要素をクリーンアップする必要があります。jQueryを使用して要素を破棄する場合は自動的に行われますが、そうしないとメモリリークが発生し、すべてのブラウザ。
漏れの原因となる例にはどのようなものがありますか?
.data()要素にリンクされているものがたくさんあるとします#foo。jQuery メソッドを使用して要素を削除すれば安全です。
$("#foo").remove(); // associated .data() will be cleaned automatically
しかし、これを行うと、クロスブラウザ互換のリークが発生します。
var foo = document.getElementById("foo");
foo.parentNode.removeChild(foo);
または、#foojQuery を使用せずにコンテンツがクリアされる他の要素の子孫である場合、同じ問題が発生します。
otherElement.innerHTML = "";
どちらの場合も、 を削除するために jQuery が使用されなかった#fooため、 は.data()要素から永久に切り離され、アプリケーションにリークが発生します。
では、DOM API を直接使用しなければ安全でしょうか?
より安全ですが、複数の DOM 操作ライブラリをロードした場合にも、これが発生することがあります。次のコードで jQuery がこれを実現することを考慮してください。
var $jq = jQuery.noConflict();
これで、が または$を参照できるようになり、jQuery は によって参照されるようになりました。prototypejsmootools$jq
問題は、他のライブラリは jQuery によって設定されたデータを認識しないため、それをクリーンアップしないことです。
したがって、jQuery が に何らかのデータを保持しており#foo、mootoolsその要素を破棄するために使用される場合、メモリ リークが発生します。
jQuery を一度も使用しなかった場合はどうなるでしょうか.data()? そうすれば安全になりますか?
残念ながら、そうではありません。jQuery は、イベント ハンドラーなどの他のデータを格納するために同じ.data()メカニズムを使用します。したがって、カスタム データを要素に関連付けるために を呼び出したことがない場合でも.data()、上記の例によってメモリ リークが発生する可能性があります。
ほとんどの場合、リークに気付かないかもしれませんが、コードの性質によっては、最終的に問題になるほど大きくなる可能性があります。