Bellek sızıntıları, bellek şişmesi ve sık sık yapılan çöp toplama işlemleri dahil olmak üzere sayfa performansını etkileyen bellek sorunlarını bulmak için Chrome ve Geliştirici Araçları'nı nasıl kullanacağınızı öğrenin.
Özet
- Chrome Görev Yöneticisi'ni kullanarak sayfanızın ne kadar bellek kullandığını öğrenin.
- Zaman çizelgesi kayıtlarıyla bellek kullanımını zaman içinde görselleştirme
- Yığın anlık görüntüleri ile ayrılmış DOM ağaçlarını (bellek sızıntılarının yaygın bir nedeni) belirleyin.
- Ayırma Zaman Çizelgesi kayıtlarıyla JS yığınınıza ne zaman yeni bellek ayrıldığını öğrenin.
- JavaScript referansı tarafından saklanan ayrılmış öğeleri belirleme
Genel Bakış
RAIL performans modelinin ruhuna uygun olarak, performans çalışmalarınızın odak noktası kullanıcılarınız olmalıdır.
Bellek sorunları, genellikle kullanıcılar tarafından fark edilebildiği için önemlidir. Kullanıcılar bellek sorunlarını şu şekillerde algılayabilir:
- Bir sayfanın performansı zaman içinde giderek kötüleşiyor. Bu durum, bellek sızıntısının belirtisi olabilir. Bellek sızıntısı, sayfadaki bir hatanın sayfanın zaman içinde giderek daha fazla bellek kullanmasına neden olmasıdır.
- Bir sayfanın performansı sürekli olarak kötüyse Bu durum, bellek şişmesinin bir belirtisi olabilir. Bellek şişmesi, bir sayfanın optimum sayfa hızı için gerekenden daha fazla bellek kullanmasıdır.
- Bir sayfanın performansı gecikmeli veya sık sık duraklatılıyor gibi görünüyor. Bu durum, sık sık çöp toplama işlemi yapılmasından kaynaklanabilir. Çöp toplama, tarayıcının belleği geri kazanmasıdır. Bunun ne zaman olacağına tarayıcı karar verir. Toplama sırasında tüm komut dosyası yürütme işlemleri duraklatılır. Tarayıcı çok fazla çöp toplama işlemi yapıyorsa komut dosyası yürütme işlemi de sık sık duraklatılır.
Bellek şişmesi: "Çok fazla" ne kadar?
Bellek sızıntısını tanımlamak kolaydır. Bir site giderek daha fazla bellek kullanıyorsa sızıntı var demektir. Ancak bellek şişmesini tespit etmek biraz daha zordur. "Çok fazla bellek kullanma" ne anlama gelir?
Farklı cihazlar ve tarayıcılar farklı özelliklere sahip olduğundan burada kesin sayılar yoktur. Üst düzey bir akıllı telefonda sorunsuz çalışan bir sayfa, düşük özellikli bir akıllı telefonda kilitlenebilir.
Burada önemli olan, RAIL modelini kullanmak ve kullanıcılarınıza odaklanmaktır. Kullanıcılarınız arasında hangi cihazların popüler olduğunu öğrenin ve sayfanızı bu cihazlarda test edin. Deneyim sürekli olarak kötüyse sayfa, bu cihazların bellek kapasitesini aşıyor olabilir.
Chrome Görev Yöneticisi ile bellek kullanımını anlık olarak izleme
Bellek sorunu incelemenize başlangıç noktası olarak Chrome Görev Yöneticisi'ni kullanın. Görev Yöneticisi, bir sayfanın ne kadar bellek kullandığını gösteren gerçek zamanlı bir izleme aracıdır.
Üst Karakter+Esc tuşlarına basın veya Chrome ana menüsüne gidip Diğer araçlar > Görev yöneticisi'ni seçerek Görev Yöneticisi'ni açın.
Görev Yöneticisi'nin tablo başlığını sağ tıklayın ve JavaScript belleği'ni etkinleştirin.
Bu iki sütun, sayfanızın belleği nasıl kullandığı hakkında farklı bilgiler verir:
- Bellekte kaplanan yer sütunu, işletim sistemi belleğini temsil eder. DOM düğümleri, işletim sistemi belleğinde depolanır. Bu değer artıyorsa DOM düğümleri oluşturuluyor demektir.
JavaScript Belleği sütunu, JS yığınını temsil eder. Bu sütunda iki değer bulunur. İlgilendiğiniz değer, canlı sayıdır (parantez içindeki sayı). Canlı sayısı, sayfanızdaki erişilebilir nesnelerin ne kadar bellek kullandığını gösterir. Bu sayı artıyorsa yeni nesneler oluşturuluyor veya mevcut nesneler büyüyor demektir.
Performans kayıtlarıyla bellek sızıntılarını görselleştirme
İncelemenizde başka bir başlangıç noktası olarak Performans panelini de kullanabilirsiniz. Performans paneli, bir sayfanın zaman içindeki bellek kullanımını görselleştirmenize yardımcı olur.
- Geliştirici Araçları'nda Performans panelini açın.
- Hafıza onay kutusunu işaretleyin.
- Kayıt yapma
Performans bellek kayıtlarını göstermek için aşağıdaki kodu inceleyin:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
Kodda referans verilen düğmeye her basıldığında, doküman gövdesine on bin div düğümü eklenir ve x dizisine bir milyon x karakterlik bir dize gönderilir.
Bu kod çalıştırıldığında aşağıdaki ekran görüntüsüne benzer bir Zaman Çizelgesi kaydı oluşturulur:
Öncelikle kullanıcı arayüzünü açıklayalım. Genel bakış panelindeki (NET'in altında) HEAP grafiği, JS yığınını temsil eder. Genel Bakış panelinin altında Sayaç paneli bulunur. Burada, bellek kullanımının JS yığını (Genel Bakış panelindeki YIĞIN grafiğiyle aynı), dokümanlar, DOM düğümleri, dinleyiciler ve GPU belleğine göre dökümünü görebilirsiniz. Devre dışı bırakılan onay kutuları grafikte gizlenir.
Şimdi kodun ekran görüntüsüyle karşılaştırmalı analizini inceleyelim. Düğüm sayacına (yeşil grafik) bakarsanız kodla tam olarak eşleştiğini görebilirsiniz. Düğüm sayısı ayrı adımlarla artar. Düğüm sayısındaki her artışın grow() çağrısı olduğunu varsayabilirsiniz. JS yığın grafiği (mavi grafik) o kadar basit değildir. En iyi uygulamalara uygun olarak, ilk düşüş aslında zorunlu bir çöp toplamadır (çöp topla düğmesine basılarak gerçekleştirilir). Kayıt devam ederken JS yığın boyutunun arttığını görebilirsiniz. Bu doğal ve beklenen bir durumdur: JavaScript kodu, her düğme tıklamasında DOM düğümlerini oluşturur ve bir milyon karakterlik dizeyi oluştururken çok fazla işlem yapar. Burada önemli olan, JS yığınının başladığından daha yüksek bir değerle bitmesidir (buradaki "başlangıç", zorunlu çöp toplama işleminden sonraki noktadır). Gerçek dünyada, JS yığın boyutunun veya düğüm boyutunun arttığı bu kalıbı görürseniz bu durum, bellek sızıntısı olduğu anlamına gelebilir.
Yığın anlık görüntüleriyle ayrılmış DOM ağacı bellek sızıntılarını keşfetme
Bir DOM düğümü, yalnızca sayfanın DOM ağacından veya JavaScript kodundan kendisine referans olmadığında çöp olarak toplanabilir. Bir düğüm, DOM ağacından kaldırıldığında ancak bazı JavaScript'ler hâlâ bu düğüme referans verdiğinde"ayrılmış" olarak kabul edilir. Ayrılmış DOM düğümleri, bellek sızıntılarının yaygın bir nedenidir. Bu bölümde, ayrılmış düğümleri tanımlamak için Geliştirici Araçları'nın yığın profili oluşturucularını nasıl kullanacağınızı öğreneceksiniz.
Ayrılmış DOM düğümlerine basit bir örnek:
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
Kodda referans verilen düğme tıklandığında on li alt öğesi olan bir ul düğümü oluşturulur. Bu düğümlere kod tarafından referans verilir ancak DOM ağacında bulunmadıkları için ayrılırlar.
Yığın anlık görüntüleri, ayrılmış düğümleri tanımlamanın bir yoludur. Adından da anlaşılacağı gibi yığın anlık görüntüleri, anlık görüntünün alındığı anda sayfanızın JS nesneleri ve DOM düğümleri arasında belleğin nasıl dağıtıldığını gösterir.
Anlık görüntü oluşturmak için Geliştirici Araçları'nı açıp Bellek paneline gidin, Yığın Anlık Görüntüsü radyo düğmesini seçin ve ardından Anlık görüntü al düğmesine basın.
Anlık görüntünün işlenmesi ve yüklenmesi biraz zaman alabilir. İşlem tamamlandığında sol panelden (Yığın anlık görüntüleri adını taşır) seçin.
Bağlantısı kesilmiş DOM ağaçlarını aramak için Sınıf filtresi giriş kutusuna Detached yazın.
Bağımsız bir ağacı incelemek için şeritleri genişletin.
Daha ayrıntılı incelemek için bir düğümü tıklayın. Nesneler panelinde, nesneye referans veren kod hakkında daha fazla bilgi görebilirsiniz. Örneğin, aşağıdaki ekran görüntüsünde detachedTree değişkeninin düğüme referans verdiğini görebilirsiniz. Bu bellek sızıntısını düzeltmek için detachedTree kullanan kodu inceleyip artık ihtiyaç duyulmadığında düğüm referansını kaldırdığından emin olmanız gerekir.
Tahsis zaman çizelgeleriyle JS yığın bellek sızıntılarını belirleme
Ayırma Zaman Çizelgesi, JS yığınınızdaki bellek sızıntılarını izlemenize yardımcı olabilecek başka bir araçtır.
Tahsis Zaman Çizelgesi'ni göstermek için aşağıdaki kodu inceleyin:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
Kodda referans verilen düğmeye her basıldığında x dizisine bir milyon karakterlik bir dize eklenir.
Ayırma Zaman Çizelgesi kaydetmek için Geliştirici Araçları'nı açın, Bellek paneline gidin, Zaman çizelgesindeki ayırmalar radyo düğmesini seçin, Kaydet düğmesine basın, bellek sızıntısına neden olduğunu düşündüğünüz işlemi gerçekleştirin ve ardından işiniz bittiğinde Kaydı durdur düğmesine basın.
Kaydı durdur düğmesine basın.Kayıt sırasında, aşağıdaki ekran görüntüsünde olduğu gibi Tahsis Zaman Çizelgesi'nde mavi çubuklar gösterilip gösterilmediğine dikkat edin.
Mavi çubuklar yeni bellek ayırmalarını gösterir. Bu yeni bellek ayırmaları, bellek sızıntısı için adaylarınızdır. Oluşturucu bölmesini yalnızca belirtilen zaman aralığında ayrılan nesneleri gösterecek şekilde filtrelemek için bir çubuğu yakınlaştırabilirsiniz.
Nesneyi genişletin ve Nesne bölmesinde nesneyle ilgili daha fazla ayrıntı görüntülemek için değerini tıklayın. Örneğin, aşağıdaki ekran görüntüsünde yeni tahsis edilen nesnenin ayrıntılarını görüntüleyerek nesnenin Window kapsamındaki x değişkenine tahsis edildiğini görebilirsiniz.
Bellek ayırmayı işleve göre inceleme
JavaScript işlevine göre bellek ayırmayı görüntülemek için Bellek panelindeki Ayırma örnekleme profil türünü kullanın.
- Tahsis örneklemesi radyo düğmesini seçin. Sayfada bir çalışan varsa JavaScript VM örneğini seçin penceresinden bunu profil oluşturma hedefi olarak seçebilirsiniz.
- Başlat düğmesine basın.
- Sayfada incelemek istediğiniz işlemleri gerçekleştirin.
- Tüm işlemlerinizi tamamladığınızda Durdur düğmesine basın.
Geliştirici Araçları, bellek ayırmanın işleve göre dökümünü gösterir. Varsayılan görünüm, en çok bellek ayıran işlevleri en üstte gösteren Yoğun (Aşağıdan Yukarıya) görünümüdür.
JS referansı tarafından saklanan nesneleri tanımlama
Ayrılmış öğeler profili, JavaScript kodu tarafından referans verildiği için kalıcı olan ayrılmış öğeleri gösterir.
Tam HTML düğümlerini ve düğüm sayısını görüntülemek için Bağlantısı kesilmiş öğeler profilini kaydedin.
Sık yapılan atık toplama işlemlerini tespit etme
Sayfanız sık sık duraklıyorsa çöp toplama sorunlarınız olabilir.
Sık gerçekleşen çöp toplama işlemlerini tespit etmek için Chrome Görev Yöneticisi'ni veya Zaman Çizelgesi bellek kayıtlarını kullanabilirsiniz. Görev Yöneticisi'nde sık sık yükselip düşen Bellek veya JavaScript Belleği değerleri, sık sık çöp toplama işlemi yapıldığını gösterir. Zaman çizelgesi kayıtlarında, sık sık yükselip düşen JS yığın veya düğüm sayısı grafikleri, sık sık çöp toplama işlemleri yapıldığını gösterir.
Sorunu belirledikten sonra, belleğin nerede tahsis edildiğini ve hangi işlevlerin tahsislere neden olduğunu öğrenmek için bir Tahsis Zaman Çizelgesi kaydı kullanabilirsiniz.