javascript - 使用 javascript 的 settimeout 加载图像时内存泄漏

Question

我已经建立了一种监控系统，相机每秒拍摄一张照片并将这张照片发送到服务器，在那里它会覆盖之前的照片。在客户端，我有一个简单的 javascriptsettimeout每秒加载此图像

$("img").attr("src", "http://mysite/image.jpg?randomString="+new Date().getTime());

但这会导致内存泄漏并最终导致页面崩溃。如何可能避免这种情况？在这里缓存问题吗？浏览器是否每秒缓存每个新图像，这就是内存泄漏的原因？

Answer 1

这可能是一个缓存问题，因为浏览器可能会缓存所有这些图像，因为它们每次都有新的图像名称（但这不应该导致崩溃）。

在这种情况下，在标头中设置这些缓存指令并查看它是否解决了问题：

<!-- disable caching on proxy servers -->
<meta http-equiv="pragma" content="no-cache">
<!-- set expiration date to "immediately" -->
<meta http-equiv="expires" content="0">
<!-- instruct the browser to not cache the webpage -->
<meta http-equiv="cache-control" content="no-cache" />

另一方面，可能是另一个问题是您的 javascript。如果服务器不能及时处理http请求，你会在浏览器中排队很多未解析的http请求。在这种情况下，尝试将超时设置为 5 秒（= 5000 毫秒）。

第三种可能的解决方案可能是使用纯 javascript 操作图像，以消除 jQuery 内存泄漏的可能性。

// cache the element once
var img = document.querySelector("img");

// use in setTimeout (Don't create a new Time Object on every call):
img.src = "/image.jpg?randomString="+Date.now();