Javascript가 브라우저에서 오래된 이미지를 정리하지 않습니다.

WebSocket에서 base64 이미지 데이터를 가져 와서 사용자에게 표시하는 HTML 페이지가 있습니다. 이미지는 주기적으로 변경되며 (새 base64 이미지가 소켓을 통해 푸시 됨) 새 이미지를 디코딩 한 다음 사용자에게 표시해야합니다.Javascript가 브라우저에서 오래된 이미지를 정리하지 않습니다.

현재 문제는 이미지를 업데이트 한 후에 이전 이미지가 브라우저의 메모리에서 삭제되지 않는 것입니다. 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>

출처

2011-05-14 BSchlinker

는 신속하게 해결하기 위해 두 가지 방법이 있습니다 - 첫번째는 서버를 만들기에 의존하는 과거의 노 캐시 또는 캐시 만료 헤더로 이미지를 전송할 수 있습니다. 그런 식으로 이미지를 다시로드하면 서버에서 최신 버전을 확인하지 않고 캐시에서 가져 오는 것이 아니라 항상 캐시에 다시로드됩니다.

다른 옵션을 사용하면 이미지 "image.jpg"를 가져 오는 대신 이미지가 "image.jpg? t ="가됩니다. 브라우저에 관한 한 매번 새로운 URL이기 때문에 가능합니다.

캐시 플러딩과의 단점은 첫 번째 방법은 깨끗하지만 서버를 부지런히 사용해야하며 서버 측 언어로 이미지 제공 스크립트를 작성해야 할 수도 있습니다. "nocache"또는 "과거의 캐시 만료"헤더 텍스트 세트. 두 번째 접근법은 즉시 구현 가능하며 매우 쉽지만 사용자가 페이지에있는 동안이 이미지가 여러 번 업데이트되는 경우 사용자의 캐시를 채울 수도 있습니다.

출처

2011-05-14 23:35:00

캐시 침수와 관련된 답변을 제안한 이유에 대해 혼란 스럽습니다. 정확히 처음 문제가 무엇인지 알기 때문입니다. 기존의 캐시 된 이미지가 새 이미지와 같으면 이미지를 다시로드 할 필요가 없도록 한 이미지 (또는 아마도 과거 5 또는 10 이미지)를 캐시하는 것을 선호합니다. 이것이 가능한가? – BSchlinker

이 작업을 수행하는 유일한 방법은 이전에 no-cache 또는 cache expiration time으로 이미지를 제공하여 다음 번에 가져올 때 원래의 캐시 된 복사본을 덮어 쓰게하는 것입니다. 그러나 리소스 추적을 설정하면 일반 캐시 규칙이 더 이상 적용되지 않습니다. 리소스 추적을 수행 했으므로 캐시가없는 경우에도이 리소스가 표시됩니다. 덮어 쓸 수 있습니다. 나는 이것을 위해 imageservice 스크립트를 사용한다. ", false) });

Javascript가 브라우저에서 오래된 이미지를 정리하지 않습니다.

답변

관련 문제