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

Question

我建立了一种监视系统，摄像头每秒拍摄一张照片，并将该图像发送到服务器，该服务器将覆盖之前的图像。 在客户端，我有一个带有settimeout的简单javascript settimeout每秒加载此图像

$("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();