jquery가 메모리를 너무 많이 누수하는 이유는 무엇입니까?
이것은 지난주에 게시 한 질문에 대한 일종의 후속 조치입니다. 간단한 jQuery Ajax 호출이 Internet Explorer에서 메모리 누수
나는 jquery 구문과 모든 멋진 기능을 좋아하지만 메모리 누수 ajax 호출을 통해 테이블 셀을 자동으로 업데이트하는 페이지에 문제가 있습니다.
그래서 실험을 위해 두 개의 간단한 테스트 페이지를 만들었습니다. 두 페이지 모두 .1 초마다 ajax 호출을 수행합니다. 각 성공적인 ajax 호출 후 카운터가 증가하고 DOM이 업데이트됩니다. 스크립트는 1000주기 후에 중지됩니다.
하나는 ajax 호출과 DOM 업데이트 모두에 jquery를 사용합니다. 다른 하나는 ajax 용 Yahoo API를 사용하고 DOM을 업데이트하기 위해 document.getElementById (...). innerHTML을 수행합니다.
jquery 버전에서 메모리 누수가 심하게 발생합니다. 드립으로 실행 (IE7이 설치된 XP Home에서), 9MB에서 시작하여 약 48MB에서 완료되며 메모리는 전체 시간 동안 선형 적으로 증가합니다. DOM을 업데이트하는 줄을 주석 처리해도 여전히 32MB로 끝나므로 간단한 DOM 업데이트에서도 상당한 양의 메모리가 누출됨을 알 수 있습니다. 비 jquery 버전은 DOM 업데이트 여부에 관계없이 약 9MB에서 시작하고 끝납니다.
누구든지 jquery가 그렇게 심하게 누출되는 원인에 대한 좋은 설명이 있습니까? 나는 명백한 것을 놓치고 있습니까? 내가 알지 못하는 순환 참조가 있습니까? 아니면 jquery에 심각한 메모리 문제가 있습니까?
다음은 누출 (jquery) 버전의 소스입니다.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
</script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
$.ajax({ url: '/html/delme.x',
type: 'GET',
success: incrementCounter
});
}
function incrementCounter(data) {
if (counter<1000) {
counter++;
$('#counter').text(counter);
setTimeout(leakTest,100);
}
else $('#counter').text('finished.');
}
</script>
</head>
<body>
<div>Why is memory usage going up?</div>
<div id="counter"></div>
</body>
</html>
그리고 여기에 비 누출 버전이 있습니다.
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection_core-min.js"></script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
YAHOO.util.Connect.asyncRequest('GET',
'/html/delme.x',
{success:incrementCounter});
}
function incrementCounter(o) {
if (counter<1000) {
counter++;
document.getElementById('counter').innerHTML = counter;
setTimeout(leakTest,100);
}
else document.getElementById('counter').innerHTML = 'finished.'
}
</script>
</head>
<body>
<div>Memory usage is stable, right?</div>
<div id="counter"></div>
</body>
</html>
내 초기 생각은 jquery ajax 방법 중 하나와 관련이 있다는 것입니다.
a. creates circular references, especially bad for IE
b. creates properties on internal objects which cannot be deleted due to the way they have been created and the setting of the DontDelete property. See this for more info: http://perfectionkills.com/understanding-delete/
Either way, the garbage collector would be prevented from picking up the trash, which would result in a runaway memory leak, especially if that suspect function is executing frequently.
참고URL : https://stackoverflow.com/questions/2450761/why-does-jquery-leak-memory-so-badly
'Program Tip' 카테고리의 다른 글
| five.grok에서 ZCML allowed_attributes 해당 메서드 (0) | 2020.11.25 |
|---|---|
| Jenkins + Play 1.2.4 : cobertura 잠금 파일 / 보고서 관련 문제 (0) | 2020.11.25 |
| 외부 primop에 대한 cmm 호출 형식 (integer-gmp 예) (0) | 2020.11.25 |
| 앱 * 및 * 웹 사이트에 대해 OAuth2로 인증 (0) | 2020.11.25 |
| 예를 들어 아래에 더 이상 콘텐츠가 없을 때 NestedScrollView & CollapsingToolbarLayout의 스크롤을 비활성화하는 방법은 무엇입니까? (0) | 2020.11.25 |