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

Meggin Kearney

Sofia Emelianova

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:

1. Profilini oluşturmak istediğiniz sayfada Geliştirici Araçları'nı açıp Bellek paneline gidin.
2. 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.

İpucu: Tür ve örnek seçtikten sonra, art arda anlık görüntü almak için Cmd + E (MacOS) veya Ctrl + E (Windows veya Linux) tuşlarına basabilirsiniz.

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.

Amaç: Dağılıp nesnelerle ilgili bu demoyu deneyin. Dağılımlı nesneler oluştur'u tıklayın ve bir yığın anlık görüntüsü alın. Birkaç (Item) ayırma

görürsünüz.

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

Not: Tüm özellikler JavaScript yığınında depolanmaz. Yerel kodu yürüten alıcılar kullanılarak uygulanan özellikleri yakalamaz. Ayrıca, sayılar gibi dize olmayan değerler yakalanmaz.

Ö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 veya Object 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.

Deneysel: Chrome 123'te ayarlar Ayarlar'ı açın > Denemeler > check_box Yığın anlık görüntülerinde, yedek mağaza boyutunu içeren nesnenin bir parçası olarak ele alın. Bu seçenek, bu dahili dizilerin çoğunu içeren nesnenin parçasıymış gibi ele alarak sığ boyutları daha anlamlı hale getirir.

(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.

İpucu: Bir InternalNode çok fazla hafıza barındırıyorsa genel InternalNode yerine C++ sınıf adlarını görmek isteyebilirsiniz.

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'ı etkinleştirin > Denemeler > check_box Dahili öğeleri yığın anlık görüntülerinde gösterme seçeneğini göster.
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 özel ek ayrıntıları içerir) seçeneğini etkinleştirin.
3. InternalNode öğesinin çok fazla 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ı 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:

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 bir sayfayla, sızıntıya neden olabileceğini düşündüğünüz şekilde etkileşimde bulunun.
3. Ters bir işlem gerçekleştirin. Yani zıt etkileşimi yapın ve birkaç kez tekrarlayın.
4. İ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:

Amaç: Sızıntıları tespit etmek üzere anlık görüntü karşılaştırmasının nasıl kullanılacağı hakkında fikir edinmek için bu demo sayfasını deneyin.

Ç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 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;
}

Amaç: Kapanışların hafıza üzerindeki etkisini analiz etmek için kötülüğün neden kötü olduğunu gösteren bu örneği deneyin. Ardından, yığın tahsislerini kaydetme hakkında bilgi veren bu örneği inceleyebilirsiniz.

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.

Amaç: DOM düğümlerinin nereye sızdırabileceğini ve bunların nasıl tespit edileceğini anlamak için sızdıran DOM düğümleri örneğini deneyin. DOM sızıntılarının beklenenden daha büyük olması örneğine de göz atarak sorunu takip edebilirsiniz.