웹사이트를 돌아다니다 보면 가끔 IE에서 마우스를 욺직일 때 이미지들이 깜빡이는 현상을 보이는 곳들이 있습니다. 이러한 현상은 구조화된 html이나 디자인 요소를 css로 분리하면서 a 태그 hover 속성에서 배경이미지(background-image)를 다룰 경우 IE에서도 종종 나타나게 되는 현상으로 이미 잘 알려져있는 현상이기도 합니다.
다만 이러한 현상이 단순 깜빡임에 그친다면 다행이지만 실제 깜빡거림이 발생할 때마다 서버로 이미지 전송 요청을 하게 됩니다. 따라서 사용자에게는 인터넷이 느려~라는 느낌이 들게 할 뿐만 아니라 컴퓨터 리소스까지 불필요하게 잡아먹어 컴퓨터도 느려~ 라는 느낌을 받게 만듭니다. 그리고 서버 쪽에서는 불필요한 연결이 수업이 많아지게 되는 것이지요.
실제 개발을 진행하면서 IE를 실행하여 메뉴 목록 위로 마우스를 욺직이면 그 때마다 서버 쪽에 불필요한(SYN_RECV) 연결이 생기는 현상을 경험하기도 하였습니다. 이로 인해 서비스에 대한 응답속도도 늘어났구요.
개선 방법으로 Ext.js처럼 IE6에서만 실행되는 예외코드를 작성하거나
- // remove css image flicker
if(isIE && !isIE7){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}
브라우저 캐시를 이용하도록 서버에서 expire나 cache-control 헤더를 포함시키도록 설정하는 방법이 있습니다.
하지만 이러한 방법은 완전한 해결 방법도 아니고 예외코드의 경우는 IE6 서비스팩 1이전 사용자에게는 적용이 되지 않는다고 하니 가장 좋은 방법은 IE6를 사용하지 않는 것이겠지요(?)
개발자를 위해 IE7로 업그레이드 해주시거나 파이어폭스, 크롬 등으로 사용하시는 브라우저를 옮겨주세요. ㅎㅎㅎ