Question

我有一个HTML页面，它从WebSocket获取base64图像数据，然后将其显示给用户。图像会定期更改（在套接字上推送新的base64图像），因此必须解码新图像然后再显示给用户。

我目前的问题是，在更新图像后，似乎以前的图像永远不会从浏览器的内存中删除。如果我查看Chrome的资源页面，我可以看到所有图片仍然位于浏览器内存中。如果图像文件足够大并且变化足够快，浏览器的内存将填满它崩溃的程度。

关于如何解决这个问题的任何想法？我已经粘贴了以下代码的片段。

<html>
<head>
<title>Presenter</title>

<style>
 html,body{font: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>

Answer 1

有两种方法可以快速解决这个问题 - 第一种方法依赖于您使服务器在过去发送带有无缓存或缓存过期标头的图像。这样重新加载图像总是将它重新加载到缓存中，而不是仅从缓存中获取它而不检查服务器的较新版本。

另一个选项需要更少的工作：不是获取图像“image.jpg”，而是获取图像“image.jpg？t =”，因为就浏览器而言，每次都是一个新的URL。

权衡是缓存泛滥 - 第一种方法是干净的，但需要在你的服务器上摆弄，甚至可能要求你用服务器端语言编写一个图像服务脚本，它的唯一责任是发送一个图像。 “nocache”或“过去的缓存过期”标题文本集。第二种方法是可立即实现的，非常非常简单，但如果用户在页面上多次更新此图像，它也可能会填满用户的缓存。

Javascript没有在浏览器中清理旧图像

1 个答案: