Chromeのキャッシュ（F12開発者ツールに溜まる[Resources]->[Frames]の中の[Images]）について

Question

現在、大量のサムネイル(imageファイル)をDataURL形式でHTMLの画面上に表示するWebページを作っています。

GoogleMap上にサムネイルを表示するのですが、動きとして、地図を動かすと表示された地域の画像を読み込み<img>タグで表示し、範囲外になるとその<img>タグはHTML上の要素から消えるという仕組みです。
消していく理由は、HTMLのページが重くなる為ですが、要素を消して行ってもページが重くなってしまいます。

どうやら原因はChromeのキャッシュ（というのか分かりませんが、F12開発者ツールに溜まる[Resources]->[Frames]の中の[Images]）が原因のようです。

<img>要素を消してもここには延々と画像が溜まっていっており、Chromeが重くなって行ってるようです。

どなたか、ここにImageが溜まらなくする、もしくは消す方法を御存知の方がおられましたら教えて頂きたいです！

ついでに、以下のようなMeta要素の指定では効かないようです。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

Answer 1

画像ならURLだけ残りますが、dataUrlはそのものが残っていってしまうので重くなっていくんですかね？

いったんデベロッパーツールを閉じると無くなりませんか？

###追試
dataUrl形式の画像をimgタグで書き込み、その要素を削除していくのを永遠に繰り返すスクリプトを使って試してみました。
Chromeのタスクマネージャで見ていると、デベロッパーツールのメモリーがどんどん増えていきます。
これが遅くなる原因じゃないでしょうか。

デベロッパーツールを開かずにやるか、重くなって来たら閉じるといいかもしれませんね。

Comments

[harufumi.abe]

遅れましたました^^;
確かに、閉じると大部分消えます！

溜まっていくデータには、以下の３つがあったのですが、
①AzureBlobへのjpeg取得用URL
②①で取得したjpeg
③②で取得したjpegをdataUrlに変換したデータ

この内②、③はF12開発者ツールを閉じると消えます
で、なぜか①だけが残ります。

これのせいか分かりませんが、ブラウザが重くなる事象は続いています。
ただ、質問の答えはだいたい出たので、閉じさせて頂きますｍ(_ _)ｍ

しかし、この再現環境をすぐ作ってしまうのはスゴいですね、、
あと、Chormeのタスクマネージャの存在は初めて知りました。

ありがとうございます！

Answer 2

.htaccessでファイルの拡張子を判定してキャッシュさせないというのはいかがでしょうか？
参考
http://butaryuu.web.fc2.com/htaccess_cache.html

Comments

[harufumi.abe]

回答ありがとうございます！

これですよね、、
<Files ~ "\.(html|php|jpe?g|gif|png)$">
Header set Pragma no-cache
Header set Cache-Control no-cache
</Files>

実は書いてみたのですが、有効になる以前に、ページが開かなくなったので諦めました、、
PHPで動かしているページなのですが、、環境に問題があるのか、、

あと、以下の指定と同じ事だと思えたのと、dataUrlは拡張子も何も無いという事もあり諦めたというのもあります^^;
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

（すみません、載せてる画像からは分からないですよね、、dataUrlの画像が溜まっていくんですorz）