jquery는 왜 이렇게 메모리가 많이 새요?
이것은 제가 지난 주에 올린 질문에 대한 일종의 후속 조치입니다.Internet Explorer에서 Simple jQuery Ajax 호출로 메모리 누수가 발생함
jquery 구문과 그 모든 기능이 마음에 드는데, 메모리 누설이 있는 ajax 호출을 통해 테이블 셀을 자동으로 업데이트하는 페이지에 문제가 있습니다.
그래서 저는 실험을 위해 두 개의 간단한 테스트 페이지를 만들었습니다.두 페이지 모두 0.1초마다 Ajax 콜을 수행합니다.Ajax 콜이 성공할 때마다 카운터가 증가하고 DOM이 갱신됩니다.스크립트는 1000 사이클 후에 정지합니다.
하나는 jquery를 사용하여 Ajax 콜과 DOM을 업데이트합니다.다른 하나는 Ajax에 Yahoo API를 사용하여 document.getElementById(...).inner를 실행합니다.HTML을 사용하여 DOM을 업데이트합니다.
jquery 버전에서는 메모리 누수가 심하다.(IE7이 탑재된 XP Home에서는) 9MB에서 시작하여 약 48MB로 종료되며, 메모리는 항상 선형적으로 증가합니다.DOM 을 갱신하는 행을 코멘트 아웃 하면, 32 MB 로 종료하기 때문에, 간단한 DOM 업데이트에서도 대량의 메모리가 새고 있는 것을 알 수 있습니다.쿼리가 아닌 버전은 DOM 업데이트 여부에 관계없이 약 9MB로 시작되고 종료됩니다.
왜 이렇게 물이 새는지 설명해주실 분 있나요?제가 뭔가 놓치고 있는 건가요?제가 모르는 순환 참조가 있나요?아니면 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. 순환 참조를 생성한다. 특히 IE에 좋지 않다.
b. 내부 오브젝트에 속성을 만듭니다.이 속성은 작성된 방법 및 DontDelete 속성의 설정으로 인해 삭제할 수 없습니다.상세한 것에 대하여는, http://perfectionkills.com/understanding-delete/ 를 참조해 주세요.
어느 쪽이든 가비지 콜렉터는 휴지통을 줍는 것을 막을 수 있습니다.그 결과, 특히 의심스러운 기능이 빈번하게 실행되고 있는 경우는, 메모리 누수가 발생할 수 있습니다.
언급URL : https://stackoverflow.com/questions/2450761/why-does-jquery-leak-memory-so-badly
'programing' 카테고리의 다른 글
| WordPress REST API v2를 사용하여 게시물을 검색하는 방법은 무엇입니까? (0) | 2023.03.29 |
|---|---|
| Oracle PLS-00363: 식 "을(를) 할당 대상으로 사용할 수 없습니다. (0) | 2023.03.29 |
| WordPress로 커스텀 쿼리를 작성하려면 어떻게 해야 하나요? (0) | 2023.03.29 |
| 사용자 지정 게시 유형 활성 메뉴 항목 (0) | 2023.03.29 |
| React에서 클래스의 컨스트럭터에서 setState() 함수를 사용하면 어떻게 됩니까?JS 또는 리액트 네이티브? (0) | 2023.03.29 |