使用Chrome查找JavaScript內存洩漏



Answers

下面是一個關於jsfiddle內存分析的技巧:使用以下URL隔離您的jsfiddle結果,它會刪除所有jsfiddle框架並僅加載結果。

http://jsfiddle.net/4QhR2/show/

在我閱讀以下文檔之前,我始終無法弄清楚如何使用Timeline和Profiler來追踪內存洩漏。 閱讀標題為“對象分配跟踪器”的部分後,我可以使用“記錄堆分配”工具,並跟踪一些分離的DOM節點。

我通過從jQuery事件綁定切換到使用Backbone事件委託來解決問題。 我的理解是,如果您調用View.remove() ,Backbone的新版本將自動為您解除綁定事件。 自己執行一些演示程序,它們會設置內存洩漏以供您識別。 如果在學習本文檔後仍然沒有得到答案,請隨時提問。

https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling

Question

我創建了一個非常簡單的測試用例,它創建了一個Backbone視圖,將一個處理程序附加到一個事件,並實例化一個用戶定義的類。 我相信通過單擊此示例中的“刪除”按鈕,所有內容都將被清除,並且不應該有內存洩漏。

代碼的jsfiddle在這裡: http://jsfiddle.net/4QhR2/ : 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();

但是,我不清楚如何使用Google Chrome的分析器來驗證事實是否如此。 堆分析器快照中顯示了一些巨大的事情,我不知道如何解碼好/壞的東西。 到目前為止我看到的教程要么告訴我“使用快照分析器”,要么給我一個非常詳細的關於整個分析器工作原理的說明。 是否有可能只使用探查器作為工具,還是我真的需要了解整個事情是如何設計的?

編輯:像這樣的教程:

Gmail內存洩漏修復

使用DevTools

從我所看到的,代表一些更強大的材料。 然而,除了引入3快照技術的概念之外,我發現它們在實踐知識(對於像我這樣的初學者)方面提供的很少。 '使用DevTools'教程並不是一個真正的例子,所以它對事物的模糊和一般的概念性描述並不太有幫助。 至於'Gmail'的例子:

所以你發現了洩漏。 怎麼辦?

  • 檢查“配置”面板下半部分洩漏對象的保留路徑

  • 如果分配網站不容易推斷(即事件監聽):

  • 通過JS控制台監視保留對象的構造函數以保存分配的堆棧軌跡

  • 使用閉包? 啟用適當的現有標誌(即goog.events.Listener.ENABLE_MONITORING)在施工期間設置creationStack屬性

閱讀後我發現自己更加困惑,而不是更少。 而且,這只是告訴我要做 ,而不是如何去做。 從我的角度來看,所有的信息要么太模糊,要么只對已經了解過程的人有意義。

下面@Jonathan Naguin的答案提出了一些更具體的問題。







您還可以查看開發人員工具中的時間軸選項卡。 記錄您的應用程序的使用情況,並關注DOM節點和事件偵聽器計數。

如果內存圖確實會指示內存洩漏,那麼可以使用分析器來確定洩漏的內容。




Links