지식공유 Archives - 47 중 19 번째 페이지

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

항상 이런 이슈는 퇴근쯔음 생긴다..-_- 싫다 정말..

여튼, 개편이후, PV가 갑자기 줄어서.. 확인해본결과..

문제는 이미지 태그의 src 이용해 리퀘스트를 날릴때, 그 리퀘스트가 중지되는 현상이 발견됐다.

Httpwatcher에서 확인해본결과..

아래와 같은 코드 사용시에..

(new Image()).src = “로그집계기록”

열에 2~3번은 aborted가 되고 있었다.

위와 같은 상황이라면 PV가 대략 20~30%는 하락할것이다..ㅎㅎ

여튼 수많은 삽질을 통해 대강의 원인을 찾아본결과..

아래와 같은 이유가 있었다. (이유는 3가진데.. 자세한건 아래 링크 참조)

그중에서 다운로드 중일때, 리퀘스트를 날리면 요청을 끊어버린다는 것!!

이게 가장 유력한 원인으로 파악되고 있다.

일단.. 내일 다시 테스트해봐야징.. 졸립넹..-_-

—–

최종정리~

위에서 발생한 문제는 최종적으로 가비지 콜렉션 문제로 정리됐다.

즉, 위와 같이 (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 이벤트가 발생했을때, 어떠한 처리를 따로 해주는것인데..

저렇게 아무런 의미없는 함수를 바인딩해둘필요는 없지 않을까?

그래서 전자로 처리했다.