Chrome ve Geliştirici Araçları'nı kullanarak bellek sızıntıları, bellek patlaması ve sık atık toplama gibi sayfa performansını etkileyen bellek sorunlarını nasıl bulacağınızı öğrenin.
Özet
- Chrome Görev Yöneticisi ile sayfanızın şu anda ne kadar bellek kullandığını öğrenin.
- Zaman Çizelgesi kayıtları ile zaman içindeki bellek kullanımını 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) tanımlayın.
- Ayırma Zaman Çizelgesi kayıtları ile JS yığınınıza ne zaman yeni bellek ayrıldığını öğrenin.
Genel bakış
RAIL performans modeline göre, performans çalışmalarınızın odak noktası kullanıcılarınız olmalıdır.
Bellek sorunları, genellikle kullanıcılar tarafından algılanabileceğinden önemlidir. Kullanıcılar bellek sorunlarını şu şekillerde algılayabilir:
- Sayfaların performansı zaman içinde kademeli olarak düşer. Bu muhtemelen bir bellek sızıntısı belirtisidir. Bellek sızıntısı, sayfadaki bir hatanın sayfanın zaman içinde kademeli olarak daha fazla bellek kullanmasına neden olması anlamına gelir.
- Bir sayfanın performansı sürekli olarak kötüyse. Bu muhtemelen hafızada şişkinlik belirtisidir. Bellek şişmesi, bir sayfanın optimum sayfa hızı için gerekenden daha fazla bellek kullanmasıdır.
- Bir sayfanın performansı gecikiyor veya sık sık duraklıyor. Bu muhtemelen sık sık çöplerin toplanmasından kaynaklanabilir. Çöp toplama, tarayıcının belleği geri kazanmasıdır. Bunun ne zaman olacağına tarayıcı karar verir. Koleksiyonlar sırasında tüm komut dosyası yürütme işlemi duraklatılır. Dolayısıyla, tarayıcı çok fazla çöp topluyorsa komut dosyası çalıştırma işlemi çok fazla 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 hafıza yetersizliğini sabitlemek biraz daha zordur. Neler "çok fazla bellek kullanımı" kapsamına girer?
Farklı cihazlar ve tarayıcılar farklı becerilere sahip olduğundan, burada kesin bir sayı yoktur. İleri teknoloji akıllı telefonlarda sorunsuz çalışan aynı sayfa, gelişmiş teknoloji akıllı telefonlarda 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 özelliklerini aşıyor olabilir.
Chrome Görev Yöneticisi ile bellek kullanımını gerçek zamanlı olarak izleyin
Bellek sorunuyla ilgili araştırmanızda başlangıç noktası olarak Chrome Görev Yöneticisi'ni kullanın. Görev Yöneticisi, bir sayfanın şu anda ne kadar bellek kullandığını gösteren gerçek zamanlı bir izleyicidir.
Görev Yöneticisi'ni açmak için ÜstKrktr+Esc tuşlarına basın veya Chrome ana menüsüne gidip Diğer araçlar > Görev yöneticisi'ni seçin.
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ığıyla ilgili farklı bilgiler verir:
- Bellek sütunu, yerel belleği temsil eder. DOM düğümleri yerel bellekte depolanır. Bu değer artıyorsa DOM düğümleri oluşturulmaktadır.
- JavaScript Belleği sütunu, JS yığınını temsil eder. Bu sütunda iki değer yer alır. İlgilendiğiniz değer, yayındaki sayıdır (parantez içindeki sayı). Yayındaki sayı, sayfanızdaki erişilebilir nesnelerin ne kadar bellek kullandığını gösterir. Bu sayı artıyorsa yeni nesneler oluşturulmakta veya mevcut nesneler büyümektedir.
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.
- Bellek onay kutusunu etkinleştirin.
- Kayıt yapma
Performans belleği 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 başvurulan düğmeye her basıldığında belge gövdesine on bin div düğüm eklenir ve x dizisine bir milyon x karakterden oluşan bir dize aktarılır.
Bu kodu çalıştırdığınızda aşağıdaki ekran görüntüsüne benzer bir Zaman Çizelgesi kaydı oluşturulur:
İlki, kullanıcı arayüzünün bir açıklaması. Genel Bakış bölmesindeki (NET'in altında) HEAP grafiği, JS yığınını temsil eder. Overview (Genel bakış) bölmesinin altında Sayaç bölmesi bulunur. JS yığınına (Genel Bakış bölmesindeki HEAP grafiğinde olduğu gibi), dokümanlara, DOM düğümlerine, işleyicilere ve GPU belleğine göre ayrılmış bellek kullanımını görebilirsiniz. Bir onay kutusu devre dışı bırakıldığında grafikte gizlenir.
Şimdi, ekran görüntüsü ile kodun bir analizine geçelim. Düğüm sayacına (yeşil grafik) bakarsanız kodla sorunsuz bir şekilde eşleştiğini görebilirsiniz. Düğüm sayısı ayrı adımlarda artar. Düğüm sayısındaki her artışın grow() için bir çağrı olduğunu varsayabilirsiniz. JS yığın grafiği (mavi grafik) o kadar kolay değildir. En iyi uygulamalara uygun olarak, ilk düşüş aslında bir zorla çöp toplama işlemidir (çöp toplama düğmesine basılarak gerçekleştirilir). Kayıt ilerledikçe JS yığın boyutunun yükseldiğini görebilirsiniz. Bu doğal ve beklenen bir durumdur. JavaScript kodu, her düğme tıklamasında DOM düğümleri oluşturur ve bir milyon karakterden oluşan dize oluşturduğunda çok fazla iş yapar. Buradaki en önemli nokta, JS yığınının başlangıcından daha yüksek bir şekilde bitmesidir (buradaki "başlangıç", zorunlu atık toplama işleminden sonraki noktadır). Gerçek dünyada JS yığın veya düğüm boyutunun bu şekilde arttığını görürseniz bu durum muhtemelen bellek sızıntısı olduğu anlamına gelir.
Yığın Anlık Görüntüleri ile ayrılmış DOM ağacı bellek sızıntılarını keşfedin
Bir DOM düğümü yalnızca sayfanın DOM ağacından veya JavaScript kodundan kendisine referans verilmediğinde atık toplanabilir. Bir düğümün DOM ağacından kaldırılması "ayrılmış" olarak kabul edilir, ancak bazı JavaScript'ler bu düğüme referansta bulunmaya devam eder. Ayrılan DOM düğümleri, bellek sızıntılarının yaygın nedenlerinden biridir. Bu bölümde, ayrılan düğümleri tanımlamak için Geliştirici Araçları'nın yığın profil araçlarını nasıl kullanacağınız açıklanmaktadır.
Aşağıda, çıkarılan DOM düğümlerine ilişkin basit bir örnek verilmiştir.
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 başvurulan düğme tıklandığında, on li alt öğesi olan bir ul düğümü oluşturulur. Kod tarafından referans verilen bu düğümler, DOM ağacında mevcut olmadığından ayrılmış bir düğümdür.
Yığın anlık görüntüleri, ayrılan 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ü sırasında belleğin JS nesneleri ve DOM düğümleri arasında nasıl dağıtıldığını gösterir.
Anlık görüntü oluşturmak için Geliştirici Araçları'nı açın ve Bellek paneline gidin, Yığın Anlık Görüntüsü radyo düğmesini seçin ve 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ıktan sonra soldaki panelden (HEAP SNAPSHOTS olarak adlandırılır) seçin.
Ayrılan DOM ağaçlarını aramak için Sınıf filtresi metin kutusuna Detached yazın.
Ayrılan ağacı araştırmak için karatları genişletin.
Sarıyla vurgulanan düğümler, JavaScript kodundan bunlara doğrudan referans veriyor. Kırmızıyla vurgulanan düğümlerin doğrudan referansı yoktur. Sadece sarı düğümün ağacının bir parçası oldukları için canlıdırlar. Genel olarak sarı düğümlere odaklanmanız gerekir. Sarı düğümün olması gerekenden daha uzun süre yayında kalması için kodunuzu düzeltin. Böylece, sarı düğüm ağacının parçası olan kırmızı düğümlerden de kurtulmuş olursunuz.
Daha ayrıntılı incelemek için sarı düğümden birini tıklayın. Nesneler bölmesinde, buna 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 başvurduğunu görebilirsiniz. Bu bellek sızıntısını düzeltmek için detachedTree kullanan kodu incelemeniz ve artık gerekli olmadığında düğüme olan referansı kaldırmasını sağlamanız gerekir.
Ayırma Zaman Çizelgeleri ile 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.
Ayırma Zaman Çizelgesini 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 başvurulan düğme her aktarıldığında x dizisine bir milyon karakterden oluşan bir dize eklenir.
Ayırma Zaman Çizelgesi kaydetmek için Geliştirici Araçları'nı açın, Profiller paneline gidin, Ayırma Zaman Çizelgesini Kaydet radyo düğmesini seçin, Başlat düğmesine basın ve bellek sızıntısına neden olduğundan şüphelendiğiniz işlemi gerçekleştirin ve işiniz bittiğinde kaydı durdur düğmesine (
Kayıt sırasında, aşağıdaki ekran görüntüsündeki gibi Ayırma Zaman Çizelgesi'nde mavi çubuklar olup olmadığına dikkat edin.
Bu mavi çubuklar, yeni bellek ayırmalarını gösterir. Bu yeni bellek ayırmaları, bellek sızıntıları için adaylardır. Oluşturucu bölmesini filtrelemek için çubuğu yakınlaştırarak yalnızca belirtilen zaman aralığında ayrılan nesneleri gösterin.
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 ayrılan nesnenin ayrıntılarını görüntüleyerek, nesnenin Window kapsamındaki x değişkenine ayrıldığını görebilirsiniz.
İşleve göre bellek ayırmayı inceleme
JavaScript işlevine göre bellek ayırmayı görüntülemek için Bellek panelinde Ayırma Örneklemesi türünü kullanın.
- Atama Örneklemesi radyo düğmesini seçin. Sayfada bir çalışan varsa Başlat düğmesinin yanındaki açılır menüyü kullanarak 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ı, işleve göre ayrılmış bellek dökümünü gösterir. Varsayılan görünüm Yoğun (Aşağıdan Yukarı), en çok bellek ayıran işlevleri en üstte gösterir.
Sık kullanılan çöp toplama işlemlerini bulun
Sayfanız sık sık duraklıyor gibi görünüyorsa atık toplamayla ilgili sorun yaşıyor olabilirsiniz.
Sık atık toplama işlemlerini tespit etmek için Chrome Görev Yöneticisi veya Zaman Çizelgesi bellek kayıtlarını kullanabilirsiniz. Görev Yöneticisi'nde sıklıkla yükseliş ve düşüş gösteren Bellek veya JavaScript Bellek değerleri, sık çöp koleksiyonlarını temsil eder. Zaman Çizelgesi kayıtlarında, sıklıkla yükseliş ve düşüş gösteren JS yığın veya düğüm sayısı grafikleri, sık sık çöp koleksiyonlarını gösterir.
Sorunu belirledikten sonra, belleğin nerede ayrıldığını ve hangi işlevlerin ayırmalara neden olduğunu öğrenmek için Ayırma Zaman Çizelgesi kaydını kullanabilirsiniz.