Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

切り離されたDOM要素がJavaScriptでメモリリークを引き起こすにはどうすればよいですか？

切り離されたDom要素

切り離されたDOM要素は、DOMから削除された要素ですが、JavaScriptのためにそれらのメモリは引き続き保持されます。これは、要素が任意の変数またはオブジェクトへの参照をどこかに持っている限り、DOMから破棄された後でもガベージコレクションされないことを意味します。

DOMは二重リンクされたツリーのようなものです。つまり、ツリー内のノードへの参照により、ツリー全体がガベージコレクションから停止されます。

javascriptでDOM要素を作成する例を見てみましょう。要素を作成した後、それを破棄しますが、それを保持している変数を削除するのを忘れてください。このシナリオでは、特定のDOM要素だけでなく、ツリー全体への参照を持つ分離DOMが発生します。

例

次の例では、DOMから削除された後でも、「someText」はグローバルな「value」オブジェクトに参照を保持します。これが、ガベージコレクタから削除できず、メモリを消費し続ける理由です。これにより、メモリリークが発生します。 

<html>
<body>
<script>
   var example = document.createElement("p");
   example.id = "someText";
   document.body.appendChild(example);
   var value = {
    text: document.getElementById('someText')
   };
   function createFun() {
      value.text.innerHTML = "Javascript is not Java";
   }
   createFun();
   function deleteFun() {
      document.body.removeChild(document.getElementById('someText'));
   }
   deleteFun();
</script>
</body>
</html>

メモリリークの回避

メモリリークを回避するためのベストプラクティスは、varの例をリスナー内に配置することです。これにより、ローカル変数になります。 var exampleを削除すると、オブジェクトのパスが切断され、ガベージコレクターがメモリを解放できるようになります。


  1. Internet ExplorerでJavaScriptをデバッグするにはどうすればよいですか？

    エラーを追跡する最も基本的な方法は、ブラウザでエラー情報をオンにすることです。デフォルトでは、ページでエラーが発生すると、InternetExplorerのステータスバーにエラーアイコンが表示されます。 このアイコンをダブルクリックすると、発生した特定のエラーに関する情報を示すダイアログボックスが表示されます。このアイコンは見落としやすいため、Internet Explorerには、エラーが発生するたびに[エラー]ダイアログボックスを自動的に表示するオプションがあります。 このオプションを有効にするには、[ツール]→[インターネットオプション]を選択します →[詳細設定]タブ 。最後に、

  2. JavaScriptでボタンクリックでli要素を削除するにはどうすればよいですか？

    以下が順不同リスト（ul）であるとしましょう- <ul>    <li class="subjectName">JavaScript <button>Remove</button></li>    <br>    <li class="subjectName">MySQL <button>Remove</button></li>    <br>