4

経由var img=new Image()で画像を作成する場合、onloadハンドラーを追加して設定すると、画像が DOM ツリーに関連付けられていないにもかかわらず、img.src画像データが要求され、呼び出されます。onload例えば。

var img=new Image();
img.onload=function(){
    alert('Loaded!');
}
img.src='test.png';

この画像はいつ、どのようにガベージ コレクションされますか? JavaScript はonload、後で画像を解放するためにハンドラーが呼び出され、一度だけ呼び出されることを認識できますか? img.srcが設定されていない場合、JavaScript は通知するのでonload、呼び出されることはなく、imgすぐに解放できますか?

4

1 に答える 1

6

テストページを使用して質問への答えを見つけるためにいくつかの調査を行いました-JSで作成され、DOMツリーにアタッチされていないイベントハンドラーを持つ画像オブジェクトがガベージコレクションされる場合。

document.createElement("img")ページ内の JS コードは(同じように動作します)を介して 1000 個の画像を作成しnew Image()、2 つのイベント ハンドラー (ロードとエラー) をアタッチし、srcプロパティを設定します。すべての画像が読み込まれると、JSは最後の読み込みイベントで
明示的に呼び出して (= 同期的に) メモリを解放しようとし、すぐにこの画像の を別の URL に設定します。また、タイマーはメモリを解放するための 2 回目の試行を行うように設定されているため、後で非同期方式で行われます。gc()src

Chrome デベロッパー ツールのメモリ タイムラインは、最初の GC が最後のものを除くすべての画像を収集することを示しています。これは、新しい画像をロードしているため、最後の画像を GC できなかったと解釈します。2 回目の GC が発生すると、最後のイメージは既に読み込まれており、メモリからも削除されます。

メモリータイムライン


この実験からの私の結論:

  • ロード/エラー イベント ハンドラーが呼び出され、JS に画像オブジェクトへのリンクが存在しない場合のイベント、
  • 画像オブジェクトは、画像の読み込みプロセスが終了 (成功または失敗) したときにガベージ コレクションできます。

--js-flags="--expose-gc"
ソースコードhttp://pastebin.com/YZkGYmBCを使用して Chrome Canary 33.0.1733.2 でテスト済み

于 2013-12-10T13:03:54.157 に答える