Javascript没有清理浏览器中的旧图像
Posted
技术标签:
【中文标题】Javascript没有清理浏览器中的旧图像【英文标题】：Javascript not cleaning up old images in browser 【发布时间】：2011-05-14 23:27:52 【问题描述】：我有一个 html 页面，它从 WebSocket 获取 base64 图像数据，然后将其显示给用户。图像会定期更改（新的 base64 图像被推送到套接字上），因此必须对新图像进行解码然后显示给用户。
我目前的问题是图像更新后，以前的图像似乎永远不会从浏览器的内存中删除。如果我看一下 Chrome 的资源页面，我可以看到所有图像仍然位于浏览器内存中。如果图像文件足够大并且变化足够快，浏览器的内存将填满到崩溃的地步。
知道如何解决这个问题吗？我已经粘贴了下面代码的 sn-p。
<html>
<head>
<title>Presenter</title>
<style>
html,bodyfont:normal 0.9em arial,helvetica;text-align:center;
#dynamicImage margin:0px auto;
</style>
<script type="text/javascript">
function handleMessage(data)
switch(data.type)
case 'imageUpdate':
// replace the image
$('#dynamicImage').attr(
'src': "data:image/jpeg;base64," + data.image,
);
break;
</script>
</head>
<body>
<div id="dynamicImageWrapper">
<img id="dynamicImage" src="./WhitePixel45w.jpg" />
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：有两种方法可以快速解决此问题 - 第一种方法是让您的服务器过去发送带有无缓存或缓存过期标头的图像。这样，重新加载图像也总是将其重新加载到缓存中，而不是仅仅从缓存中获取它而不检查服务器的更新版本。
另一个选项需要的工作要少得多：不是获取图像“image.jpg”，而是获取图像“image.jpg?t=”，因为对于浏览器而言，这每次都是一个新 URL。
权衡是缓存泛滥 - 第一种方法是干净的，但需要在您的服务器上摆弄，甚至可能需要您使用服务器端语言编写图像服务脚本，其唯一职责是发送带有“nocache”或“过去的缓存过期”标题文本集。第二种方法可以立即实现并且非常非常容易，但是如果在用户在页面上多次更新此图像时，它也可能会填满用户的缓存。
【讨论】：
我很困惑你为什么提出一个涉及缓存泛滥的答案，因为这似乎正是我最初的问题所在。我实际上更喜欢缓存一个图像（或者可能是过去的 5 或 10 个图像），这样如果现有的缓存图像等于新图像，则不需要重新加载图像。这可能吗？ 实现这一点的唯一方法是在过去提供无缓存或缓存过期时间的图像，以便下次获取它时，原始缓存副本被覆盖。但是，请注意，如果您打开资源跟踪，正常的缓存规则将不再适用：因为您告诉它进行资源跟踪，即使没有缓存，它也会显示此资源，因为您表示您希望查看所有内容，包括可能已经被覆盖。我会为此使用图像服务脚本，例如以上是关于Javascript没有清理浏览器中的旧图像的主要内容，如果未能解决你的问题，请参考以下文章