웹브라우저는 이미지, 자바스크립트, 스타일시트 등의 파일들을 캐쉬 합니다.

그래서 같은 웹페이지 접속시 로컬에 캐쉬해둔 파일을 불러와서 네트워크 전송량을 줄여줍니다.

이 점은 사용자와 서버 모두에게 도움이 됩니다.

그런데 캐쉬 없이 파일을 갱신해야 하는 경우가 있기도 합니다.

예로 회원이 프로필 사진을 새로 업로드 했는데 URL이 똑같으면 캐쉬된 사진이 보여지는 경우가 있습니다.

이런 문제를 해결하기 위해 많이 알려진 방법으로는 이미지 URL 뒤에 쿼리를 덧붙이는 방법이 있습니다.

그런데 이 방법이 가진 단점(쿼리를 붙이는 방법에 따라 캐쉬가 무의미해 지거나 방법을 적용하기 위한 오버헤드가 발생할 수 있음) 때문에 쓰고 싶지 않은 상황도 있습니다.

그래서 또 다른 방법을 고민하던중 좋은 결과를 얻었습니다.

보이지 않는 <iframe>과 location.reload(true)를 사용하는 방법입니다.

html :
<iframe name="hidden" src="avatar.png"/>
javascript :
window['hidden'].location.reload(true);

위의 코드 처럼 <iframe>에 갱신하고 싶은 파일(URL)을 로드시킨후 자바스크립트로 리로드 시키면 캐쉬 파일 대신 서버의 파일을 가져옵니다. (이전 캐쉬 파일은 지워지고 새로 가져온 파일로 교체됨.)

이 방법도 단점은 있습니다. 당연히 웹페이지를 보고 있는 당사자에게만 파일이 갱신됩니다.

웹페이지를 이용하는 모든 사용자에게 동시에 갱신되어야 할 필요가 없는 경우(위에서 예를 든 프로필 사진 교체)에 적용하기 좋은 방법입니다.