메모리 누수_YUI.Ext 관련 문제를 해결하는 간단한 세 가지 단계

원본 주소: http://www.jackslocum.com/blog/2006/10/02/3-easy-steps-to-avoid-javascript-memory-leaks/

당신이 탐색하는 대부분의 js 웹사이트가 메모리 누수를 일으킨다는 사실을 모를 수도 있습니다. 조금 과장된 것 같지만 사실입니다.
누수 모니터

누출 모니터

이것은 편리한 FireFox 확장 프로그램으로, 페이지를 떠날 때 JavsScript 개체를 가리키며, 누출이 발생하면 세부 정보를 표시하는 창이 나타나서 어떤 개체나 함수가 문제를 일으켰는지 알려줍니다. 새다.
http://script.aculo.us/를 떠날 때
이것은 아마도 제가 가장 자주 누출하는 프로토타입.js의 74:3행입니다

도장 메일 예시 페이지
심각한 누수로 창이 두 개나 동시에 떴습니다(스크롤바 주의!).

워드프레스
이건 더욱 어이가 없습니다. 워드프레스 작성을 마칠 때마다 나타나게 됩니다!

일반 사이트를 방문해보면 대부분의 사이트에서 이런 문제가 발생한다는 것을 알 수 있습니다. 실제로 일부 웹사이트가 이러한 테스트를 거치지 않았다면 다소 충격적일 수 있습니다. 몇 가지 사소한 변경을 통해 이 문제가 발생하지 않도록 할 수 있었습니다.
이 웹사이트(Jack'sBlog, 예제)는 모두 JavaScript이지만, 유출 위험에 대해서는 걱정하지 않으셔도 됩니다.

다음은 세 가지 간단한 단계입니다.
1. 완료되면 XMLHttpRequest onreadystatechange 핸들러를 null로 설정합니다.
저는 XHR 연결에 YAHOO.util.Connect를 사용합니다. 왜냐하면 YAHOO.util.Connect는 XHR 연결 대신 폴링 메커니즘을 사용하기 때문입니다. readstate이므로 수동으로 null을 설정할 필요가 없습니다. 가능하다면 YAHOO.util.Connect(또는 그 위에 구축된 YAHOO.ext.UpdateManager)를 사용하는 것이 좋습니다.
2. unload 이벤트에서 참조할 수 있는 모든 DOM 이벤트 핸들러 객체를 지웁니다(Refence).
도서관에 해달라고 할 수 있다면 마음대로 하지 마세요! 이벤트 메커니즘의 경우 YAHOO.util.Event를 사용하여 처리합니다. 다른 라이브러리(프로토타입, dojo 등)에도 이를 처리하는 자체 해당 메커니즘이 있습니다. --그들이 얼마나 효율적으로 그곳으로 가는지는 모르겠지만. 위 스크린샷을 잘 살펴보면 위의 유출된 코드가 이들 라이브러리와 연관되어 있음을 알 수 있습니다. (사고의 원인을 증명하기 위해 사실을 활용, Frank의 메모)
3. 몇 가지 기본 유형의 데이터 외에 기본 값(String, Number), DOM 확장 또는 속성에 다른 어떤 것도 넣지 마세요. 물론, 시간 내에 클리어할 수 있는 경우에는 예외가 있습니다.
이것이 가장 중요한 황금률입니다. DOM 확장에 무언가를 넣은 다음 $()를 사용하여 가져오는 것이 편리할 수 있지만 절대 이렇게 하지 마십시오. 정말로, 나는 당신이 무슨 생각을 하는지 알고 있습니다. 이제 나는 유선이고 편집증적이라는 것을 인정했습니다. 예, JS 객체는 여러 경우에 DOM 확장에 들어가고 아무 일도 일어나지 않습니다. . . . 이 상황은 감지하기 쉽지 않습니다! (예: 폐쇄 폐쇄) 따라서 발생 가능한 상황을 피하기 위해 이 규칙만 따르겠습니다.

요약

이 문제를 해결하는 것은 그리 어렵지 않습니다. 기술이나 경험이 필요하지 않습니다. 위의 사항에 주의를 기울이면 초보자도 누출을 방지하는 방법을 알게 될 것입니다.
나(또는 다른 사람들)가 메모리 누수 없이 페이지를 탐색할 수 있도록 일부 대형 사이트(새로운 Yahoo Mail!?!? 포함)에서 약간의 시간과 노력을 투자하시기 바랍니다.