chromeのDevTools > Application > Frames > Imagesに大量に登録されてしまう

Question

起きている問題

JavaScript内で画像を差し替える処理を書いていたところ、差し替えのたびに DevTools上の Application > Frames > Images が増えていくことに気づきました

コード

下記は問題が起きる部分だけのコードです

const imageObj = new Image();
imageObj.src = "i";
const base64h = "data:image/png;base64,"; //未使用

for (let index = 0; index < 100; index++) {
  imageObj.src = "for_" + index.toString();
}

let cnt = 0;
const teiki = () => {
  imageObj.src = "teiki_" + (cnt++).toString();
  if (cnt >= 20) clearInterval(intervalId);
};
const intervalId = setInterval(teiki, 100);

上記のJavaScriptを実行後、DevTools > Application > Frames > Images を確認すると
for_99が1つ、teiki_0からteiki_19までが20個 確認できます
これは.srcを差し替える度に増えていくものなのでしょうか？
コードを変えればimageObj.srcとImagesの表示を1:1にできるのでしょうか？

実際に作成したいプログラムでは、canvasの画像を定期的に更新するような処理の度にImagesが増えていってしまっています

Answer 1

これは.srcを差し替える度に増えていくものなのでしょうか？

はい、このリストは読み込んだ画像を表示するものです。使わなくなっても削除はされません。

Comments

[Hr_ppm]

ありがとうございます。
調べても見当がつかなかったので助かりました。