Утечка памяти при загрузке изображений с помощью javascript's settimeout

Question

Я создал систему видеонаблюдения, где камера снимает фото каждую секунду и отправляет это изображение на сервер, где он перезаписывает предыдущий. На стороне клиента У меня есть простой 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();