Ajax의 쓰임이 많아지면서 IE의 memory leak에 대한 문제가 점점 불거져 나오고 있다.
JavaScript 엔진에 결함(?)이라고 할까..
예전에는 브라우저를 장시간 띄여놓고 쓰는일이 거의 없었지만 요즘엔 Dynamic한 페이지들이 속속 등장하면서 갑자기 브라우저가 죽는 등의 버그가 발생하고 있다.
Imon이라는 모니터링 시스템은 실시간 웹서비스를 관찰하는 프로세스이다.
모니터링 툴로써 24시간 이상 브라우저를 열어놓는 경우가 많은데, Memory leak이 발생하는 것을 발견했다.
Imon의 메모리 누수 원인과 해결방법에 대해 조사해 봤다.
1. 원인은?
Understanding and Solving Internet Explorer Leak Patterns를 참고해 보면 순환참조 부분이 가장 의심이 되었다.
Ajax를 편하게 쓰기 위해 XMLHttpRequest를 생성해주는 function을 만들어 두고 필요할때 불러서 쓰곤 했는데, 이 부분에서 문제가 있는 듯 했다.
local variable은 function이 종결되면 가비지컬렉터에 의해 삭제되어야 하는데, parameter로 다른 function에 참조되어 있을 경우- 이런 경우를 순환참조라고 하는 것 같다 - 는 leak의 원인이 된다고 한다. (어설픈 해석이다. 대충 이런 뜻인 것 같다)
.... It isn't immediately obvious that parent function parameters and local variables will be frozen in time, referenced, and held until the closure itself is released. .... Because we've added a closure, a second reference is made, and that second reference won't be released until the closure is also released. .....
정확한 내용은 Reference의 Closures부분을 참조할 것
그래서 지역변수로 선언된 XMLHttpRequest를 전역변수로 빼고 비교해 보기로 했다.
2. 진짜 그런지 테스트 해보기
Process Explorer를 이용해 진단해 보았다.
아래 그림을 보면,
figure1은 XMLHttpRequest가 local변수로 정의되어 있는 경우이다. 계단형식으로 점점 메모리가 증가하는 모습을 볼 수 있다.
이에 반해 figure2는 시간이 지남에 따라 거의 메모리 이용율이 비슷함을 볼 수 있다.
figure3은 Imon에서 실제 해당 function을 수정한 후 적용한 모습이다.
ajax를 이용해 많은 스크립트들을 동적으로 구현해 UI를 만들기 때문에, CPU사용량은 많지만 Momory는 거의 비슷한 모습으로 사용되고 있다.
시간에 따른 메모리 이용률을 수치로 보면 더 확실히 눈에 보일 것 같다.
|
|
|
|
|
|
|
|
|
|
|
|
Local XMLHttpRequest |
9.9 |
13.2 |
16.0 |
19.4 |
22.4 |
27.1 |
|
|
|
|
Global XMLHttpRequest |
9.8 |
10.3 |
10.4 |
10.3 |
10.5 |
10.3 |
|
|
|
3. 결론
함수가 종결되더라도 순환참조된 상태에선 메모리 누수가 발생할 수 있다.
페이지 속성상 짧은시간 머무르는 페이지라면 크게 신경쓸 필요가 없지만 동적으로 페이지가 구성되고 장시간 머물 페이지라면 memory leak의 원인을 판단해 해결해 줘야 하겠다.
4. Reference
Understanding and Solving Internet Explorer Leak Patterns : Memory Leak 이 발생하는 4가지 패턴 설명
Diagnosing JavaScript Memory Leaks in IE : Memory Leak 진단 방법 소개
진단툴 : Process Explorer
댓글