Omurga bir görünüm oluşturur, bir olay için bir işleyici ekler ve kullanıcı tanımlı bir sınıf oluşturur çok basit bir test çalışması yaptım. "Bu örnekte düğme, her şey bellek olmalı sızıntı yok. temizlenecek Kaldırmak tıklayarak inanıyorum

Kodu burada bir 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();

Ancak, Google Chrome bu aslında durumda olduğunu doğrulamak için profiler kullanmak için nasıl belirsiz duyuyorum. Yığın profiler anlık ortaya bir sürü şey var, ve iyi/kötü ne çözmek için nasıl hiçbir fikrim yok. Üzerinde şu ana kadar da sadece gördüğüm dersler bana "ya bana tüm profiler nasıl çalıştığı hakkında çok detaylı bir manifesto ver. profiler" anlık kullansın Sadece bir araç olarak profiler kullanmak mümkün, ya da gerçekten her şeyi üretildi nasıl anlamak gerekiyor?

DÜZENLEME:Bu gibi öğreticiler:

Gmail memory leak fixing

Using DevTools

Daha güçlü malzemeden biraz dışarıda temsil, gördüğüm kadarıyla. Ancak, kavramı tanıtan ötesinde3 Anlık TekniğiPratik bilgi açısından (benim gibi bir acemi için) çok az sundukları buluyorum. 'DevTools' eğitimi gerçek bir örnek üzerinden çalışmıyor, her şeyin belirsiz ve genel kavramsal açıklama aşırı yararlı değil yani. İçin 'örnek: . Gmail

Bir sızıntı bulundu. Şimdi ne olacak?

• Profilleri panelin alt yarısında sızan nesneleri tutma yolunu inceleyin

• Ayırma sitesini kolayca (yani olay dinleyicileri) olayla ilgisi olamaz:

• JS ile istinat nesnenin yapıcı kurtarmak için konsol araç tahsisleri için yığın izleme

• Kullanarak Kapatma? Bayrak (yani YouTube.mevcut uygun etkinleştir olaylar.Dinleyici.ENABLE_MONİTORİNG) inşaat sırasında creationStack özelliği ayarlamak için

Az değil kendim okuduktan sonra daha fazla kafam karışık. Ve yine sadece bana söylüyoryapınşeyler değilnasılbunları yapmak için. Benim bakış açıma göre, orada tüm bilgiler ya çok belirsiz ya da sadece bu süreci anlayan birisi için mantıklı olur.

Daha spesifik bazı konular @Jonathan Naguin's answer aşağıda yetişti.

Bellek sızıntıları bulmak için iyi bir iş akışıüç anlıktekniği, ilk Ezgileriyle Lee ve Gmail ekibi tarafından hafıza problemleri çözmek için kullanılır. Adımları, genel olarak

• Bir yığın fotoğrafını çeker.
• Bir şeyler yapın.
• Başka bir yığın fotoğrafını çeker.
• Aynı şeyleri tekrar ediyorum.
• Başka bir yığın fotoğrafını çeker.
• Filtre nesneleri Anlık Anlık 1 ve 2 arasında 3 "" görüntüleyin. Özet tahsis

Senin örneğin, kod Başlat düğmesinin click olayına kadar bu işlemi (here bulabilirsiniz) Omurga Görünüm oluşturma geciktirmek göstermek için uyarladım. Şimdi:

• HTML (yerel olarak address Bu kullanarak kaydedilmiş) çalıştırın ve bir anlık görüntü alabilir.
• Görünüm oluşturmaya Başlayın.
• Başka bir fotoğrafını çeker.
• Kaldır ' ı tıklatın.
• Başka bir fotoğrafını çeker.
• Filtre nesneleri Anlık Anlık 1 ve 2 arasında 3 "" görüntüleyin. Özet tahsis

Şimdi bellek sızıntıları bulmak için hazır!

Birkaç farklı renk düğümleri göreceksiniz. Kırmızı düğümleri için Javascript doğrudan başvurular yok, ama müstakil bir DOM ağacına bir parçası çünkü hayatta. Ağaç Javascript (kapatma ya da belki değişken olarak) başvurulan bir düğüm olabilir ama tesadüfen çöp toplanan tüm DOM ağacı engelliyor.

Sarı düğümleri ancak Javascript doğrudan başvurular var. Javascript referansları bulmak için aynı müstakil DOM ağacında sarı düğümler için bak. Özellikler öğesine DOM penceresinden önde gelen bir zincir olmalı.

Senin özellikle HTML bir Div öğesi kırmızı işaretli olarak görebilirsiniz. Eğer bir "" fonksiyonu. önbellek tarafından başvurulan göreceksiniz öğesini genişletin

Satırı seçin ve yazın konsolunda $0, gerçek işlevi ve konumu göreceksiniz:

>$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

Bu eleman başvuruluyor. Unfortunally yapabileceğin fazla bir şey yok, DV içsel bir mekanizmadır. Ama, sadece deneme amaçlı, işlevi ve yöntemi değiştirmek:

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

Şimdi bu işlemi tekrarlayın eğer herhangi bir kırmızı düğüm görmek :)

Belgeleri:

• Eliminating memory leaks in Gmail.
• Easing JavaScript Memory Profiling In Chrome DevTools.