JavaScript 이미지 객체가 브라우저 캐시와 어떻게 상호 작용합니까?

Question

그래서 나는과 같이, 이미지 객체를 포장하고로드 할 때 추적하는 간단한 객체를 사용하고 있습니다 : 이미지,로드가 완료 preloader.loaded있다

은

 
var preloader = { 
    loaded: false, 
    image: new Image() 
} 
preloader.image.onload = function() { 
    preloader.loaded = true; 
} 
preloader.image.src = 'http://www.example.com/image.jpg'; 

true로 설정됩니다. 그건 모두 잘 작동합니다.

내 질문은 브라우저 캐시가 많이 소모 된 이러한 개체가 너무 많고 많은 이미지가있는 경우 어떻게됩니까? 결국 이미지가 충분히로드되면 브라우저는 캐시에서 이전 이미지를 덤프하기 시작합니다. 이 경우에는 loaded = true이지만 JavaScript 파일로 끝나지는 않지만 실제로 이미지 파일이 더 이상 캐시되지 않습니다.

어느 시점에서 어떤 이미지가 캐시에 있고 어떤 이미지가 아닌지를 알 수 없기 때문에 테스트하기가 어렵습니다.

Answer 1

웹 페이지에서 이미지를로드하면 해당 이미지는 캐시에서 사용되지 않습니다. 브라우저 페이지 수명 동안 브라우저 페이지 메모리에 실제로 있거나이 JS 객체를 제거 할 때까지 가비지 수집 될 수 있습니다.

캐시는 페이지에로드 된 이미지를 저장하는 데 사용되지 않습니다. 캐시는 다음에이 이미지의로드가 요청 될 때 훨씬 빨리로드 될 수 있도록하기 위해 사용됩니다. 캐시 저장 용량을 초과하여 너무 많은 이미지를로드하는 경우 페이지 독립 시간 동안 브라우저 메모리에있는 것처럼 (캐시와 독립적으로) 이미로드 한 이미지에는 아무런 변화가 없습니다. 그러면로드 한 이미지 중 일부는 더 이상 캐시에 저장되지 않으므로 다음 번에 일부 브라우저 페이지에서로드하려고하면 캐시에 저장되지 않으므로 원래 웹 사이트에서 가져와야합니다 인터넷을 통해.

Answer 2

어제 나는 지난 몇 개월 동안 구축 한 인터넷 캐시 800MB를 삭제했습니다. 간단히 말해 사용자가 정말로 오래된 머신을 가지고 있지 않거나 너무 많은 이미지를 미리로드하지 않는 한 브라우저 캐시가 고갈 될 수 있다고 생각하지 않습니다.