Bellek > Profiller > Yığın anlık görüntüsü ile yığın anlık görüntülerini nasıl kaydedeceğinizi ve bellek sızıntılarını nasıl bulacağınızı öğrenin.
Yığın profil aracı, sayfanızın JavaScript nesnelerine 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ı başlıklı makaleye bakın.
Anlık görüntü al
Bellek yığınının anlık görüntüsünü almak için:
- Profil oluşturmak istediğiniz bir sayfada DevTools'u açıp Bellek paneline gidin.
- radio_button_checked Yığın anlık görüntüsü profil oluşturma türünü ve ardından bir JavaScript sanal makine örneği seçip 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 boyutunu gösterir.
Anlık görüntüler, bellek grafiğinde bulunan ve genel nesneden erişilebilen nesneleri gösterir. Anlık görüntü almanın ilk adımı her zaman çöp toplamadır.
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
Anlık görüntüleri farklı amaçlar doğrultusunda farklı açılardan incelemek için en ü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. | Türe göre nesneleri ve hafıza kullanımlarını bulmak için bu özelliği kullanabilirsiniz. DOM sızıntılarını izlemek için yararlıdır. |
Karşılaştırma | İki anlık görüntü arasındaki farklar. | Bir işlemden önceki ve sonraki iki (veya daha fazla) anlık görüntüyü karşılaştırmak için bu alanı kullanabilirsiniz. Boşan bellekte ve referans sayısında deltayı inceleyerek bellek sızıntısının varlığını ve nedenini onaylayın. |
Çevre | Yığın içerikleri | Nesne yapısının daha iyi bir görünümünü sağlar ve genel ad alanında (pencere) başvurulan nesnelerin, etraflarında kalmalarını sağlayan unsurları bulmak için analiz edilmesine yardımcı olur. Bu aracı kullanarak kapalı yerleri analiz edebilir ve nesneleri daha düşük seviyede inceleyebilirsiniz. |
İstatistikler | Bellek ayırma için pasta grafik | Kod, dizeler, JS dizileri, yazılan diziler ve sistem nesneleri için 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. Kurucuları, örnekledikleri nesneleri görmek için genişletebilirsiniz.
Alakasız kurucuları filtrelemek için Özet görünümünün üst tarafındaki Sınıf filtresine incelemek istediğiniz bir ad yazın.
Yapıcı adlarının yanındaki sayılar, kurucuyla oluşturulan nesnelerin toplam sayısını gösterir. Özet görünümü aşağıdaki sütunları da gösterir:
- Mesafe, düğümlerin en kısa basit 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, nesnenin kendisinin tuttuğu belleğin boyutudur. Genellikle diziler ve dizeler daha büyük sığ boyutlara sahiptir. Nesne boyutları bölümünü de inceleyin.
- Korunan boyut, aynı nesne grubu içinde tutulan maksimum boyutu gösterir. Tutulan boyut, bir nesneyi silerek ve bağımlı öğelerinin artık erişilebilir olmamasını sağlayarak yer açabileceğiniz bellek boyutudur. Nesne boyutları bölümünü de inceleyin.
Bir oluşturucuyu genişlettiğinizde, Özet görünümü, tüm örneklerini gösterir. Her örnek, ilgili sütunlarda yüzeysel ve korunmuş boyutlarının bir dökümünü alı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.
Özet'teki özel girişler
Özet görünümü, oluşturuculara göre gruplamanın yanı sıra 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 çeşitli dahili dizi benzeri nesneler 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 nesnelerindeki 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ırabilmek için ihtiyaç duyduğu dahili verileri içerir. Her işlev, 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ıştırılırsa V8, daha hızlı çalışabilmek için bu işlev için daha fazla bellek kullanır. Bir işlev bir süredir çalışmamışsa V8, söz konusu işlevin dahili verilerini silebilir.
(concatenated string)
V8 iki dizeyi birleştirdiğinde (örneğin JavaScript +
operatörüyle), sonucu dahili olarak Rope veri yapısı olarak da bilinen "birleştirilmiş dize" olarak temsil etmeyi seçebilir.
V8, iki kaynak dizedeki tüm karakterleri yeni bir dizeye kopyalamak yerine, iki kaynak dizeye işaret eden first
ve second
adlı dahili alanlara sahip küçük bir nesne ayırır. Bu, V8'in zamandan ve bellekten tasarruf etmesini sağlar. JavaScript kodu açısından bakıldığında bunlar normal dizelerdir ve diğer dizeler gibi davranırlar.
InternalNode
Bu kategori, Blink tarafından tanımlanan C++ nesneleri gibi V8 dışında ayrılmış 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 > onay kutusu Yığın anlık görüntülerinde dahili öğeleri gösterme seçeneğini göster'i etkinleştirin.
- 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 özgü ek ayrıntıları içerir) seçeneğini etkinleştirin.
InternalNode
öğesinin yüksek miktarda 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ı var.
(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ı özelliklere sahip aynı sırada olan birden çok nesne verimli bir şekilde temsil edilebilir. Bu kategori, system / Map
adlı gizli sınıfları (JavaScript Map
ile ilgili değildir) ve ilgili verileri içerir.
(sliced string)
JavaScript kodu String.prototype.substring()
çağrısı yaptığında V8'in bir alt dize alması gerektiğinde V8, orijinal dizedeki ilgili tüm karakterleri kopyalamak yerine dilimlenmiş dize nesnesi atamayı tercih edebilir. Bu yeni nesne, orijinal dizeye bir işaretçi içerir ve orijinal dizeden hangi karakter aralığının kullanılacağını açıklar.
JavaScript kodu açısından bakıldığında 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üzleştirmek" amacıyla bilinçli adımlar atılması yararlı olabilir.
system / Context
system / Context
türündeki dahili nesneler, iç içe yerleştirilmiş bir işlevin erişebileceği bir JavaScript kapsamı olan closure'taki 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ünür olmasa da bunlar üzerinde doğrudan kontrolünüz vardır.
(system)
Bu kategori, (henüz) daha anlamlı bir şekilde sınıflandırılmamış çeşitli dahili nesneler içerir.
Karşılaştırma görünümü
Karşılaştırma görünümü, birden çok anlık görüntüyü birbiriyle karşılaştırarak sızdırılan nesneleri bulmanızı sağlar. Örneğin, bir dokümanı açıp kapatmak gibi bir işlemi geri almak ve geri almak, geride fazladan nesneler bırakılmamalıdır.
Belirli bir işlemin sızıntı oluşturmadığı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, sızıntıya neden olabileceğini düşündüğünüz bir sayfayla etkileşimde bulunun.
- Ters işlem gerçekleştirin. Yani tam tersini yapın ve bu işlemi birkaç kez tekrarlayın.
- İkinci bir yığın anlık görüntüsü 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şi genişletirken, eklenen ve silinen nesne örnekleri gösterilir:
Kapsam görünümü
Kapsayıcı görünümü, uygulamanızın nesne yapısının "kuş bakışıdır". Bu API sayesinde işlev kapanışlarına göz atabilir, JavaScript nesnelerinizi oluşturan dahili sanal nesneleri gözlemleyebilir ve uygulamanızın çok düşük bir düzeyde ne kadar bellek kullandığını anlayabilirsiniz.
Görünümde birkaç giriş noktası sunulur:
- DOMWindow nesneleri. JavaScript kodu için global nesneler.
- GC kökleri. Sanal makinenin çöp toplayıcısı tarafından kullanılan GC kökleri. GC kökleri; yerleşik nesne haritaları, sembol tabloları, sanal makine iş parçacığı yığınları, derleme önbellekleri, işleyici kapsamları ve genel herkese açık kullanıcı adlarından oluşabilir.
- Yerel nesneler. Otomasyona olanak tanımak için JavaScript sanal makinesinin içine "aktarılan" tarayıcı nesneleri (ör. DOM düğümleri ve CSS kuralları).
Tutucular bölümü
Bellek panelinin alt kısmındaki Tutucular bölümünde, görünümde seçilen nesneyi işaret eden nesneler gösterilir. Bellek paneli, İstatistikler dışındaki görünümlerin herhangi birinde farklı bir nesne seçtiğinizde Tutucular bölümünü günceller.
Bu örnekte, seçilen dize, bir Item
örneğinin x
özelliği tarafından tutulur.
Tutucuları yoksay
Tutucuları gizleyerek seçilen nesneyi saklayan başka nesneler tespit edebilirsiniz. Bu seçenekle, önce bu tutucuyu koddan kaldırmanız ve yığın anlık görüntüsünü yeniden almanız 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ın yoksayılmasını durdurmak için üstteki işlem çubuğunda playlist_remove Yoksayılan tutucuları geri yükle seçeneğini tıklayın.
Belirli bir nesneyi bulma
Toplanan yığında nesne bulmak için Ctrl + F tuşlarını kullanarak arama yapabilir ve nesne kimliğini girebilirsiniz.
Kapanmaları ayırt etmek için işlevleri adlandırma
İşlevleri adlandırmak, anlık görüntüdeki kapanışları birbirinden ayırt edebilmeniz için ç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;
}
Bu örnekte:
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 profil oluşturucusu, 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 sayede, etrafta dolaşan unutulmuş ayrılmış DOM alt ağaçları nedeniyle başka görünmez sızıntılar ortaya çıkabilir.
DOM sızıntıları düşündüğünüzden daha büyük olabilir. Aşağıdaki örneği inceleyin. #tree
çöpleri ne zaman toplanır?
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
) ve yinelenecek şekilde #tree
değerine kadar bir referans tutar. Bu nedenle, yalnızca leafRef
geçersiz kılındığında #tree
altındaki tüm ağaç GC için bir aday olur.