AttachEvent 사용시 브라우저 Memory Leak 문제점

자바스크립트에서 이벤트 처리시에 브라우저의 문제(garbage collection의 결합)로 인하여 알게 모르게 브라우저에서 메모리 손실이 발생합니다.

attachEvent의 경우는 사용 후에 detachEvent을 안해주면 참조하고 있는 element 을 자동으로 Garbage Colleciton이 회수를 해 주지 못하기 때문에 해당 객체의 크기만큼 메모리 손실이 발생하게 됩니다. 문제는 페이지를 갱신해도 회수가 되지 않는다는 것입니다.

prototype.js 등과 같은 javascript Framework 에서는 이미 대부분 이 문제를 처리하고 있습니다.

가.Memory Leak 발생

아래의 Sample 코드를 실행하게 되면 첨부한 이미지 처럼 브라우저에서 Memory Leak 이 발생하여 메모리 사용량이 증가하는 것을 보실 수 있습니다. 브라우저를 종료할때 회수되는 것을 볼 수 있습니다.

memoryleak.html

Memory Leak

나.솔루션

Attachevent.html

function GridX2Event(){
this.Pool = [];
}

GridX2Event.prototype.add = function(obj,evt,listener){
  if (obj.addEventListener){
   obj.addEventListener(evt,listener, false);
  } else if (obj.attachEvent){
   obj.attachEvent(evt, listener);   // IE용, Gird ActiveX 의 경우 해당 함수만 작용이 됨. 이유 모르겠슴.
  }
  this.Pool.push([obj,evt,listener]);
}

GridX2Event.prototype.removeGrid = function(obj,evt,listener){
this.remove(obj,evt,listener);
}

GridX2Event.prototype.remove = function(obj,evt,listener){
  if (obj.removeEventListener){
   obj.removeEventListener(evt,listener, false);
  } else if (obj.detachEvent){
   obj.detachEvent(evt, listener);
  }
}

// IE, Firefox Memory Leak 처리
//
// http://support.microsoft.com/kb/830555
// http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp

GridX2Event.prototype.cleanUp = function(){
  var _poolsize = GridX2Event.Pool.length;
  if(_poolsize>0){
   var el = null;
   for(var i=0;i<_poolsize;i++){
    el = GridX2Event.Pool.pop();
    GridX2Event.remove.apply(GridX2Event,el);
   }
  }
}

var GridX2Event = new GridX2Event();
GridX2Event.add(window,"onunload",GridX2Event.cleanUp);

window.onload=function(evt){
var element = document.getElementById("my-element");
var fnc=function(){ alert("Clicked: " + element.innerHTML); };

GridX2Event.add(element,"onclick",fnc);

/*Make sure we see the leak*/
element.bigString = new Array(10000).join(new Array(200).join("XXXXX"));
};
</script>
</head>
<body>
<div id="my-element">click me</div>
</body>
</html>

다.참고