Bellek > Profiller > Yığın anlık görüntüsü ile yığın anlık görüntülerini nasıl kaydedeceğinizi öğrenin ve bellek sızıntılarını bulun.
Yığın profili oluşturucu, sayfanızın JavaScript nesneleri ve ilgili DOM düğümlerine göre bellek dağılımını gösterir. JS yığın anlık görüntülerini almak, bellek grafiklerini analiz etmek, anlık görüntüleri karşılaştırmak ve bellek sızıntılarını bulmak için bunu kullanın. Daha fazla bilgi için Nesne tutma ağacı bölümüne bakın.
Anlık görüntü al
Yığın anlık görüntüsü almak için:
- Profilini oluşturmak istediğiniz sayfada Geliştirici Araçları'nı açıp Bellek paneline gidin.
- radio_button_checked Yığın anlık görüntüsü profil oluşturma türünü seçin, ardından bir JavaScript sanal makine örneği seçin ve Anlık görüntü al'ı tıklayın.
Bellek paneli, anlık görüntüyü yükleyip ayrıştırdığında HEAP SNAPSHOTS bölümündeki anlık görüntü başlığının altında ulaşılabilir JavaScript nesnelerinin toplam boyutu gösterilir.
Anlık görüntüler yalnızca bellek grafiğinde bulunan ve genel nesneden erişilebilen nesneleri gösterir. Anlık görüntü alma işlemi her zaman atık toplama ile başlar.
Anlık görüntüleri temizle
Tüm anlık görüntüleri kaldırmak için engelle Tüm profilleri temizle'yi tıklayın:
Anlık görüntüleri görüntüle
Farklı amaçlar için farklı perspektiflerden anlık görüntüleri incelemek için üstteki açılır menüden görünümlerden birini seçin:
Göster | İçerik | Amaç |
---|---|---|
Özet | Yapıcı adlarına göre gruplandırılan nesneler. | Nesneleri ve türe göre bellek kullanımlarını tespit etmek için bu aracı kullanın. DOM sızıntılarını izlemek için kullanışlıdır. |
Karşılaştırma | İki anlık görüntü arasındaki farklar. | Bir işlem öncesinde ve sonrasında iki (veya daha fazla) anlık görüntüyü karşılaştırmak için bunu kullanın. Boş bellek ve referans sayısındaki deltayı inceleyerek bellek sızıntısının varlığını ve nedenini onaylayın. |
Kapsam | Yığın içerikleri | Nesne yapısının daha iyi bir görünümünü sunar ve genel ad alanında (pencere) başvurulan nesneleri analiz ederek onları nerede tutacaklarını bulmaya yardımcı olur. Kapanışları analiz etmek ve nesneleri ayrıntılı bir şekilde incelemek için kullanabilirsiniz. |
İstatistikler | Bellek ayırmanın pasta grafiği | Koda, dizelere, JS dizilerine, yazılan dizilere ve sistem nesnelerine ayrılmış bellek parçalarının gerçek boyutlarını görün. |
Özet görünümü
Başlangıçta, Özet görünümünde, Oluşturucular'ın bir sütunda listelendiği bir yığın anlık görüntüsü açılır. Oluşturucuları örneklendirdikleri nesneleri görmek için genişletebilirsiniz.
Alakasız oluşturucuları filtrelemek için Özet görünümünün üst kısmındaki Sınıf filtresi'ne incelemek istediğiniz bir ad yazın.
Yapıcı adlarının yanındaki sayılar, kurucuyla oluşturulan toplam nesne sayısını gösterir. Özet görünümü aşağıdaki sütunları da gösterir:
- Mesafe, en kısa basit düğüm yolunu kullanarak köke olan mesafeyi gösterir.
- Sığ boyut, belirli bir oluşturucu tarafından oluşturulan tüm nesnelerin yüzeysel boyutlarının toplamını gösterir. Sığ boyut, bir nesnenin kendisinin tuttuğu belleğin boyutudur. Genellikle dizi ve dizelerin sığ boyutları daha büyüktür. Ayrıca Nesne boyutları bölümüne de bakın.
- Korunan boyut, aynı nesne grubu içinde tutulan maksimum boyutu gösterir. Tutulan boyut, bir nesneyi silerek ve bağımlılarını artık erişilemez hale getirerek serbest bırakabileceğiniz bellek boyutudur. Ayrıca Nesne boyutları bölümüne de bakın.
Bir oluşturucuyu genişlettiğinizde, Özet görünümü onun tüm örneklerini gösterir. İlgili sütunlarda her örnek için sığ ve tutulan boyutların dökümü alınır. @
karakterinden sonraki sayı, nesnenin benzersiz kimliğidir. Yığın anlık görüntülerini nesne bazında karşılaştırmanızı sağlar.
Oluşturucu filtreleri
Özet görünümü, verimsiz bellek kullanımının sık karşılaşılan durumlarına göre kurucuları filtrelemenize olanak tanır.
Bu filtreleri kullanmak için işlem çubuğunun en sağındaki açılır menüden aşağıdaki seçeneklerden birini belirleyin:
- Tüm nesneler: Geçerli anlık görüntü tarafından yakalanan tüm nesneler. Varsayılan olarak ayarlanır.
- Anlık görüntü 1'den önce ayrılan nesneler: İlk anlık görüntü alınmadan önce oluşturulan ve bellekte kalan nesneler.
- Anlık Görüntü 1 ile Anlık Görüntü 2 arasında ayrılan nesneler: En son anlık görüntü ile önceki anlık görüntü arasındaki nesneler arasındaki farkı görüntüleyin. Her yeni anlık görüntü, açılır listeye bu filtrenin bir parçasını ekler.
- Yinelenen dizeler: Bellekte birden çok kez depolanan dize değerleri.
- Ayrılan düğümler tarafından tutulan nesneler: Ayrı bir DOM düğümüne referans verdiği için aktif kalan nesneler.
- Geliştirici Araçları konsolu tarafından saklanan nesneler: Geliştirici Araçları konsolu üzerinden değerlendirildiği veya etkileşimde bulunduğu için bellekte tutulan nesneler.
Özette özel girişler
Özet görünümü, kuruculara göre gruplandırmaya ek olarak nesneleri aşağıdakilere göre de gruplandırır:
Array
veyaObject
gibi yerleşik işlevler.- Kodunuzda tanımladığınız işlevler.
- Oluşturuculara dayalı olmayan özel kategoriler.
(array)
Bu kategori, JavaScript'te görünen nesnelere doğrudan karşılık gelmeyen dizi benzeri çeşitli dahili nesneleri içerir.
Örneğin, JavaScript Array
nesnelerinin içeriği, yeniden boyutlandırmayı kolaylaştırmak için (object elements)[]
adlı ikincil bir dahili nesnede depolanır. Benzer şekilde, JavaScript nesnelerinde adlandırılmış özellikler genellikle (array)
kategorisinde de listelenen (object properties)[]
adlı ikincil dahili nesnelerde depolanır.
(compiled code)
Bu kategori, V8'in JavaScript veya WebAssembly tarafından tanımlanan işlevleri çalıştırabilmesi için ihtiyaç duyduğu dahili verileri içerir. Her fonksiyon, küçük ve yavaştan büyük ve hızlıya kadar çeşitli şekillerde temsil edilebilir.
V8, bu kategoride bellek kullanımını otomatik olarak yönetir. Bir işlev birçok kez çalışırsa V8, daha hızlı çalışabilmesi amacıyla o işlev için daha fazla bellek kullanır. Bir işlev bir süredir çalışmamışsa V8, bu işlevin dahili verilerini temizleyebilir.
(concatenated string)
V8 iki dizeyi birleştirdiğinde (ör. JavaScript +
operatöründe), sonucu dahili olarak "birleştirilmiş dize" olarak (Rope veri yapısı olarak da bilinir) temsil edebilir.
V8, iki kaynak dizenin tüm karakterlerini yeni bir dizeye kopyalamak yerine, first
ve second
adlı dahili alanlara sahip olan ve iki kaynak dizeyi işaret eden küçük bir nesneyi ayırır. Bu, V8'in zamandan ve bellekten tasarruf etmesini sağlar. JavaScript kodu açısından bunlar normal dizelerdir ve diğer dizeler gibi davranırlar.
InternalNode
Bu kategori, V8 dışında ayrılmış nesneleri (ör. Blink tarafından tanımlanan C++ nesneleri) temsil eder.
C++ sınıf adlarını görmek için Chrome for Testing'i kullanın ve aşağıdakileri yapın:
- Geliştirici Araçları'nı açın ve ayarlar Ayarlar > Denemeler > check_box Yığın anlık görüntülerinde dahili öğeleri gösterme seçeneğini göster'i açın.
- Bellek panelini açın, radio_button_checked Yığın anlık görüntüsü'nü seçin ve radio_button_checked Dahili öğeleri göster (uygulamaya özel ek ayrıntıları içerir) seçeneğini etkinleştirin.
InternalNode
öğesinin çok fazla bellek saklamasına neden olan sorunu yeniden oluşturun.- Yığın anlık görüntüsü alın. Bu anlık görüntüde, nesneler
InternalNode
yerine C++ sınıf adlarına sahip.
(object shape)
V8'deki Hızlı Özellikler bölümünde açıklandığı gibi, V8 gizli sınıfları (veya şekilleri) izler. Böylece, aynı sırada aynı özelliklere sahip birden çok nesne verimli bir şekilde gösterilebilir. Bu kategoride, system / Map
adlı gizli sınıflar (Map
JavaScript ile ilgili olmayan) ve ilgili veriler yer alır.
(sliced string)
V8'in bir alt dize alması gerektiğinde (ör. JavaScript kodunun String.prototype.substring()
çağrısında) geçmesi gerektiğinde V8, orijinal dizedeki tüm ilgili karakterleri kopyalamak yerine dilimlenmiş dize nesnesi ayırmayı tercih edebilir. Bu yeni nesne, orijinal dizeye bir işaretçi içerir ve orijinal dizedeki hangi karakter aralığının kullanılacağını açıklar.
JavaScript kodu açısından bunlar normal dizelerdir ve diğer dizeler gibi davranırlar. Dilimlenmiş bir dize çok fazla bellek tutuyorsa program Sorun 2869'u tetiklemiş olabilir ve dilimlenmiş dizeyi "düzeltmek" için bilinçli adımlar atmaktan yararlanabilir.
system / Context
system / Context
türündeki dahili nesneler, iç içe yerleştirilmiş bir işlevin erişebileceği bir JavaScript kapsamı olan close içindeki yerel değişkenleri içerir.
Her işlev örneği, çalıştırıldığı Context
öğesine yönelik dahili bir işaretçi içerir. Böylece bu değişkenlere erişebilir. Context
nesneleri JavaScript'ten doğrudan görülemese de bunlar üzerinde doğrudan kontrole sahip olursunuz.
(system)
Bu kategori, (henüz) daha anlamlı bir şekilde sınıflandırılmamış çeşitli dahili nesneleri içerir.
Karşılaştırma görünümü
Karşılaştırma görünümü, birden fazla anlık görüntüyü birbiriyle karşılaştırarak sızdırılan nesneleri bulmanıza olanak tanır. Örneğin bir işlem yapıp bunu tersine çevirmek (örneğin, bir belgeyi açıp kapatmak) geride fazladan nesne bırakmamalıdır.
Belirli bir işlemin sızıntılara yol açmadığını doğrulamak için:
- Bir işlem gerçekleştirmeden önce yığın anlık görüntüsü alın.
- Bir işlem gerçekleştirin. Yani bir sayfayla, sızıntıya neden olabileceğini düşündüğünüz şekilde etkileşimde bulunun.
- Ters bir işlem gerçekleştirin. Yani zıt etkileşimi yapın ve birkaç kez tekrarlayın.
- İkinci bir yığın anlık görüntüsünü alın ve görünümünü Karşılaştırma olarak değiştirip Anlık Görüntü 1 ile karşılaştırın.
Karşılaştırma görünümü, iki anlık görüntü arasındaki farkı gösterir. Toplam giriş genişletilirken eklenen ve silinen nesne örnekleri gösterilir:
Çevre görünümü
Kapsam görünümü, uygulamanızın nesne yapısının "kuş bakışı görünümü"dür. İşlev kapanışlarına göz atmanızı, JavaScript nesnelerinizi oluşturan sanal makine dahili nesnelerini gözlemlemenizi ve uygulamanızın çok düşük bir düzeyde ne kadar bellek kullandığını anlamanıza olanak tanır.
Görünümde çeşitli giriş noktaları bulunur:
- DOMWindow nesneleri. JavaScript kodu için genel nesneler.
- GC kökleri. Sanal makinenin atık toplayıcısı tarafından kullanılan GC kökleri. GC kökleri; yerleşik nesne eşlemeleri, simge tabloları, sanal makine iş parçacığı yığınları, derleme önbellekleri, herkese açık kullanıcı adı kapsamları ve genel herkese açık kullanıcı adlarından oluşabilir.
- Yerel nesneler. Otomasyona olanak tanımak için tarayıcı nesneleri (ör. DOM düğümleri ve CSS kuralları) JavaScript sanal makinesine "aktarılır".
Tutucular bölümü
Bellek panelinin altındaki Tutucular bölümü, görünümde seçilen nesneyi işaret eden nesneleri gösterir. İstatistikler dışındaki görünümlerin herhangi birinde farklı bir nesne seçtiğinizde Bellek paneli, Retainers (Tutucular) bölümünü günceller.
Bu örnekte, seçilen dize Item
örneğinin x
özelliği tarafından korunmaktadır.
Tutucuları yoksay
Tutucuları gizleyerek diğer nesneler arasından seçilenleri koruyabilirsiniz. Bu seçenekle, önce bu tutucuyu koddan kaldırmanız ve ardından yığın anlık görüntüsünü yeniden çekmeniz gerekmez.
Bir tutucuyu gizlemek için sağ tıklayın ve Bu tutucuyu yoksay'ı seçin. Yok sayılan tutucular, Mesafe sütununda ignored
olarak işaretlenir. Tüm tutucuları yoksaymayı durdurmak için üst kısımdaki işlem çubuğunda playlist_remove Yoksayılan tutucuları geri yükle seçeneğini tıklayın.
Belirli bir nesneyi bulma
Toplanan yığındaki bir nesneyi bulmak için Ctrl + F tuşlarını kullanarak arama yapabilir ve nesne kimliğini girebilirsiniz.
Kapanışları ayırt etmek için işlevleri adlandırma
Anlık görüntüde kapanışları ayırt edebilmeniz için işlevlerin adlandırılmasında çok yardımcı olur.
Örneğin, aşağıdaki kod adlandırılmış işlevleri kullanmaz:
function createLargeClosure() {
var largeStr = new Array(1000000).join('x');
var lC = function() { // this is NOT a named function
return largeStr;
};
return lC;
}
Ancak bu örnektekiler:
function createLargeClosure() {
var largeStr = new Array(1000000).join('x');
var lC = function lC() { // this IS a named function
return largeStr;
};
return lC;
}
DOM sızıntılarını ortaya çıkarma
Yığın profili oluşturucu, tarayıcıda yerel nesneler (DOM düğümleri ve CSS kuralları) ile JavaScript nesneleri arasındaki çift yönlü bağımlılıkları yansıtabilir. Bu, etrafta dolaşan unutulmuş ayrılmış DOM alt ağaçları nedeniyle ortaya çıkan, aksi takdirde görünmez sızıntıların keşfedilmesine yardımcı olur.
DOM sızıntıları düşündüğünüzden daha büyük olabilir. Aşağıdaki örneği inceleyin. #tree
atıkları ne zaman toplanıyor?
var select = document.querySelector;
var treeRef = select("#tree");
var leafRef = select("#leaf");
var body = select("body");
body.removeChild(treeRef);
//#tree can't be GC yet due to treeRef
treeRef = null;
//#tree can't be GC yet due to indirect
//reference from leafRef
leafRef = null;
//#NOW #tree can be garbage collected
#leaf
, üst öğesi (parentNode
) için referans tutar ve yinelenen şekilde #tree
değerine kadar başvurur. Bu nedenle, leafRef
geçersiz kılındığında yalnızca #tree
altındaki tüm ağacı, GC için bir aday olur.