Yığın anlık görüntülerini Bellek ile nasıl kaydedeceğinizi öğrenin > Profiller > Anlık görüntü toplayın 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ü alma
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.
- 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.
görürsünüz.Anlık görüntüleri temizle
Tüm anlık görüntüleri kaldırmak için
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 | Oluşturucu adlarına göre gruplandırılmış 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ı izleme için yararlı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. Kapsamı analiz etmek ve nesnelerinizi düşük düzeyde incelemek için kullanın. |
İ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şturdukları nesneleri görmek için kurucuları 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 kurucu tarafından oluşturulan tüm nesnelerin sığ 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 kurucuyu genişlettiğinizde Özet görünümünde tüm örnekleri gösterilir. İ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ıza olanak tanır.
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.- Etiketlerine göre gruplandırılmış HTML öğeleri (ör.
<div>
,<a>
,<img>
vb.). - 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 kategorideki bellek kullanımını otomatik olarak yönetir. Bir işlev çok kez çalıştırılırsa V8, daha hızlı çalışabilmesi için işlev için daha fazla bellek kullanır. Bir işlev uzun süredir çalışmıyorsa V8, ilgili işlevin dahili verilerini temizleyebilir.
(concatenated string)
V8, JavaScript +
operatöründe olduğu gibi iki dizeyi birleştirdiğinde sonucu dahili olarak "birleştirilmiş dize" olarak temsil etmeyi seçebilir. ip veri yapısı olarak da bilinir.
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 sayede V8 zaman ve bellek tasarrufu sağlar. JavaScript kodu açısından bunlar normal dizelerdir ve diğer dizelerle aynı şekilde çalışı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'ı etkinleştirin > Denemeler > Dahili öğeleri yığın anlık görüntülerinde gösterme seçeneğini göster.
- Bellek panelini açın, Yığın anlık görüntüsü'nü seçin ve 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, nesnelerin
InternalNode
yerine C++ sınıf adları vardır.
(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 işaret eden bir işaretçi içerir ve orijinal dizede hangi karakter aralığının kullanılacağını tanımlar.
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 "düzeltmek" için bilinçli adımlar atmaktan yararlanabilir. seçim yapar.
system / Context
system / Context
türündeki dahili nesneler, iç içe yerleştirilmiş bir işlevin erişebileceği bir JavaScript kapsamı olan kapatma 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 fotoğrafı çekin ve görünümünü Karşılaştırma olarak değiştirerek 1. Fotoğraf 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. Bir toplam girişi genişletildiğinde eklenen ve silinen nesne örnekleri gösterilir:
Çevre görünümü
Kapsam görünümü "kuş bakışı"dır iyi bir örnektir. İş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. Tarayıcı nesneleri "aktarıldı" .
Sabitleyiciler 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 bir Item
örneğinin x
özelliği tarafından saklanı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 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 öğesine (parentNode
) referans tutar ve yinelenen şekilde #tree
değerine kadar geçerlidir. Bu nedenle yalnızca
leafRef
geçersiz olduğunda, GC için bir aday olarak #tree
altındaki tüm ağacı ifade eder.