[javascript] Chrome으로 자바 스크립트 메모리 누수 찾기

백본 뷰를 만들고 처리기를 이벤트에 연결하고 사용자 정의 클래스를 인스턴스화하는 매우 간단한 테스트 사례를 만들었습니다. 이 샘플에서 “제거”버튼을 클릭하면 모든 것이 정리되고 메모리 누수가 없어야합니다.

코드에 대한 jsfiddle은 다음과 같습니다. http://jsfiddle.net/4QhR2/

// scope everything to a function
function main() {

    function MyWrapper() {
        this.element = null;
    }
    MyWrapper.prototype.set = function(elem) {
        this.element = elem;
    }
    MyWrapper.prototype.get = function() {
        return this.element;
    }

    var MyView = Backbone.View.extend({
        tagName : "div",
        id : "view",
        events : {
            "click #button" : "onButton",
        },
        initialize : function(options) {
            // done for demo purposes only, should be using templates
            this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";
            this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
        },
        render : function() {
            this.$el.html(this.html_text);

            this.wrapper = new MyWrapper();
            this.wrapper.set(this.$("#textbox"));
            this.wrapper.get().val("placeholder");

            return this;
        },
        onButton : function() {
            // assume this gets .remove() called on subviews (if they existed)
            this.trigger("cleanup");
            this.remove();
        }
    });

    var view = new MyView();
    $("#content").append(view.render().el);
}

main();

그러나 Chrome 프로필러를 사용하여 이것이 사실인지 확인하는 방법을 잘 모르겠습니다. 힙 프로파일 러 스냅 샷에 표시되는 내용이 많으며, 무엇이 좋은지 나쁜지를 해독하는 방법을 모릅니다. 지금까지 살펴본 튜토리얼은 “스냅 샷 프로파일 러 사용”을 지시하거나 전체 프로파일 러의 작동 방식에 대해 매우 자세하게 설명합니다. 프로파일 러를 도구로 사용하는 것이 가능합니까? 아니면 전체가 어떻게 설계되었는지 이해해야합니까?

편집 : 다음과 같은 자습서 :

Gmail 메모리 누수 수정

DevTools 사용

내가 본 것 중에서 더 강력한 자료를 대표합니다. 그러나 3 Snapshot Technique 의 개념을 소개하는 것 외에도 실용적인 지식 (나 같은 초보자에게)에 대해서는 거의 제공하지 않습니다. ‘DevTools 사용하기’튜토리얼은 실제 예제를 통해 작동하지 않으므로, 모호하고 일반적인 개념적인 개념 설명은 그다지 도움이되지 않습니다. ‘Gmail’예는 다음과 같습니다.

누수가 발견되었습니다. 이제 뭐?

• 프로파일 패널의 아래쪽 절반에서 누출 된 객체의 유지 경로를 검사합니다.

• 할당 사이트를 쉽게 유추 할 수없는 경우 (예 : 이벤트 리스너) :

• JS 콘솔을 통해 보유 객체의 생성자를 계측하여 할당을위한 스택 추적을 저장합니다.

• 클로저를 사용하십니까? 적절한 기존 플래그 (예 : goog.events.Listener.ENABLE_MONITORING)를 활성화하여 생성 중에 creationStack 속성을 설정하십시오

나는 그것을 읽은 후에 더 혼란스러워합니다. 그리고 다시, 그냥 말해 것은 할 수 할 수 없는 상황을 어떻게 그들이 할 수 있습니다. 내 관점에서 볼 때 모든 정보는 모호하거나 이미 프로세스를 이해 한 사람에게만 의미가 있습니다.

이보다 구체적인 문제 중 일부는 아래 @Jonathan Naguin의 답변 에서 제기되었습니다 .

답변

>$0
function cache( key, value ) {
        // Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
        if ( keys.push( key += " " ) > Expr.cacheLength ) {
            // Only keep the most recent entries
            delete cache[ keys.shift() ];
        }
        return (cache[ key ] = value);
    }                                                     jquery-2.0.2.js:1166

function cache( key, value ) {
    return value;
}