Friday, November 13, 2015

WEB Browser Image Cache 원리

웹브라우저에서는 어떻게 해야 이미지를 캐쉬할수 있을까???? 

개발을 하다 보면 한번 불러온 이미지를 재 로딩하는데 큰 시간이 안걸린다는 것을 확인할수 있다. 다시 말하면 한번 불러온 이미지들은 Web에서 캐쉬를 쌓고 다시 불러올때 캐쉬에서 이미지를 확인한다.

가정 : 
한 화면에 2x2 의 이미지들이 있는데 next button을 누룰시 새로운 4장의 이미지들이 바뀐다.

이미지 캐쉬를 적용하지 않은 상태
next button -> 다음 이미지 가져오기 -> 이미지 4장 로딩

이미지 캐쉬를 적용한다면
최초 4장 이미지를 불러올때 그다음4장이미지 tag들을 미리 만들어준다.
ionic에서 사용하는 방법은  아래와 같다

Now, imagine if we had an image tag with an ng-src always pointed at the image url for Recommendations.queue[1] (aka the next song in the queue). We can make this image nearly invisible with CSS: 1px tall and 1px wide, with an opacity of 0.01 - yet the browser will still download it and place it in cache. Perfect!

Friday, November 6, 2015