Yığın anlık görüntüleri kaydet

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:

1. Profil oluşturmak istediğiniz bir sayfada DevTools'u açıp Bellek paneline gidin.
2. 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 veya Object 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:

1. 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.
2. 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.
3. InternalNode öğesinin yüksek miktarda bellek saklamasına neden olan sorunu yeniden oluşturun.
4. 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:

1. Bir işlem gerçekleştirmeden önce yığın anlık görüntüsü alın.
2. Bir işlem gerçekleştirin. Yani, sızıntıya neden olabileceğini düşündüğünüz bir sayfayla etkileşimde bulunun.
3. Ters işlem gerçekleştirin. Yani tam tersini yapın ve bu işlemi birkaç kez tekrarlayın.
4. İ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.

Bu örnekte, seçilen dize, bir Item örneğinin x özelliği tarafından tutulur.

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.