Httpwatcher에서 이미지 요청시 Aborted 되는 현상

항상 이런 이슈는 퇴근쯔음 생긴다..-_- 싫다 정말..
여튼, 개편이후, PV가 갑자기 줄어서.. 확인해본결과..
문제는 이미지 태그의 src 이용해 리퀘스트를 날릴때, 그 리퀘스트가 중지되는 현상이 발견됐다.
Httpwatcher에서 확인해본결과.. 
아래와 같은 코드 사용시에..
(new Image()).src = “로그집계기록” 
열에 2~3번은 aborted가 되고 있었다. 
위와 같은 상황이라면 PV가 대략 20~30%는 하락할것이다..ㅎㅎ
여튼 수많은 삽질을 통해 대강의 원인을 찾아본결과..
아래와 같은 이유가 있었다.  (이유는 3가진데.. 자세한건 아래 링크 참조)

http://blog.httpwatch.com/2008/01/28/what-does-aborted-mean-in-httpwatch/

그중에서 다운로드 중일때, 리퀘스트를 날리면 요청을 끊어버린다는 것!!
이게 가장 유력한 원인으로 파악되고 있다. 
일단.. 내일 다시 테스트해봐야징.. 졸립넹..-_-
—–
최종정리~
위에서 발생한 문제는 최종적으로 가비지 콜렉션 문제로 정리됐다. 
즉, 위와 같이 (new Image()).src = “로그집계 기록”을 호출할경우..
요청에 대한 응답을 받기도 전에 이미지 객체가 가비지 콜렉션 되어 사라질수 있다. 
이럴경우, 응답은 취소가 된다. 
해결책은 간단하다. 가비지 콜렉션 되지 않도록 이미지의 참조 카운터를 누군가가 들고 있으면 된다. 아래와 같이 전역변수로 가지고 있어도 되고,
_gImg = [];
function 로그집계 = {
    var o = new Image(); 
    o.src = “로그집계”;
    _gImg.push(o);
}
로그집계();
혹은 아래와 같이 abort 이벤트에 대해서 이벤트를 바인딩 해둬도 된다 
function 로그집계 = {
    var o = new Image(); 
    o.src = “로그집계”;
    o.abort=function(){};
}
로그집계();
후자보다는 전자가 보다 명확한 방법이다. 
후자의 경우의 코드상의 의미는 abort 이벤트가 발생했을때, 어떠한 처리를 따로 해주는것인데..
저렇게 아무런 의미없는 함수를 바인딩해둘필요는 없지 않을까?
그래서 전자로 처리했다. 

FF 에서 강제로 한글 IME 변경하기..

imeMode 속성은, IE 전용 속성인데,
FF3 에서부터는 해당 속성을 지원해주는듯하다..
https://developer.mozilla.org/En/CSS/Ime-mode

하지만.. 테스트는 안해봤다. 테스트 해본 사람들에 의하면,..
아직 안된다고 하더라..ㅎㅎ

그래서 좀더 크로스 브라우징이 가능한 방법이 없을까?
생각하다가.. Flash 인터페이스를 이용하는건 어떨까 생각해봤다.
아래 링크를 참조하고..
http://kimkijeung.com/entry/IME-Input-Method-Editor

위 링크처럼 가능하다면, 플래시컨테이너 하나 로드해놓고,
인터페이스 함수만들어서, 자바스크립트로 해당 함수를 호출하면
간단히 해결될것같은데..

오늘 집에가서 한번 만들어봐야겠당..ㅋ

반대로, FF에서 한글을 입력 안하게 하는 방법도 있을수 있겠다
편법이지만..
http://blog.hooriza.com/1049

웹사이트 최적화 #1. 요청횟수 줄이기

앞으로 오픈베타까지 5일 남았다.
그동안 반 미친듯이 코드만 짜다가, 요즘은 막바지라 한결 여유를 찾은듯하다.
어제부터 코드 프리징을 위한 막바지 최적화 작업에 들어가고 있다.

오늘은 여유롭게, 그동안 못한 블로깅을 하면서, 얘들은 먼 얘기를 하고 있을까..
검색을 좀 해봤다. ㅎㅎ
많은 사람들이 기대반 우려반, 그리고 일단 까고보자 반, 아무생각없다 반인거 같다. ㅎㅎ
머 결국 어느정도 관심은 있다 정도로 정리가 되는군.
머 일단, 각설하고…

개편되는 메인페이지 로딩속도를 최적화하기 위해 고민한 것들을 공유해본다.

사용자에게 있어서 첫 페이지 로딩속도는 굉장히 크리티컬한 요소다.
그렇기 때문에 최적화 작업을 하면서, 가장 신경썼던 부분이 바로 요청회수 줄이기였다,

클라이언트 영역에서 요청횟수를 줄일수 있는 방법은 3가지로 볼수있겠다.
외부링크로 걸려있는 css 파일 갯수 줄이기..
외부링크로 걸려있는 js 파일 갯수 줄이기..
그리고, 이미지 갯수 줄이기..

하지만, 실상 요청횟수 줄이기가 만만치는 않았다.
특히, 이미지가 주가 되는 대부분의 포탈이나 웹사이트의 경우는 정말 불가항력에 가깝지 않을까?

그래도 뭐 어떻게든 요청횟수를 줄이기위해, CSS Sprite도 적용했지만, 접근성 문제로 인해,
전면적으로 CSS Sprite을 적용할수는 없었다.
“CSS Sprite은 의미없는 배경 이미지에만 적용할 것을 권한다.”
CSS Sprite은 검색을 해보면, 아마도 구글 코리아 메인 페이지의 애니메이션 효과를 예제로 들고 있는 글들을 쉽게 접할수 있다. 바로 구글 코리아가 적용한 애니메이션 효과가 대표적인 의미없는 배경이미지가 되겠다.
 
여기엔 단순히 접근성 문제만은 아니고, 대부분 캐시 서버에 이미지를 올려놓기때문에, 운영이슈도 함께 고려되어야한다. 이미지에 수정사항이 생기면, 전체 그리드 이미지를 새로 업로드하고, 경로를 수정해줘야한다. 안그럼 캐시된 사용자의 브라우저에선 제대로된 이미지를 볼수없을테니 말이다. 이럴때마다, 정말 구글과 같은 텍스트 기반의 웹사이트들이 어찌나 부럽뜬지..ㅎㅎ
그러나 , 여기는 한국이고, 구글이 우리회사도 아니다! ㅎㅎ

한편 모듈별로 작업하면서 크고작은 최종 js 파일의 갯수는 총 20개나 됐다.
물론, 배포툴을 이용해 파일을 2개로 합쳤고, 압축을 하지 않았을 경우, 대략 200KB 정도의 크기였다.  그리고 압축을하고, 아파치 gzip 모듈을 적용하면, 대략 40KB 정도의 크기가 나왔다.
요청횟수는 1/10로 줄였고, 파일크기는 대략 1/5 정도로 줄였다.

과연 이렇게 최적화한 결과는 어떠했을까?
FF3 의 FireBug 를 통해서, 대략적인 로딩 시간을 비교해봤다.

[그림으로 넣으려고 했으나.. 귀찮아서 생략하고 대략의 결과는 다음에…ㅋㅋㅋ]