Aşağıdakiler 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. bellek sızıntıları, bellek şişmesi ve sık atık toplama işlemleri.
Ö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 modelinin amacı doğrultusunda, performans çalışmalarınızın odak noktası ne kadar iyi karşıladığını görebileceksiniz.
Bellek sorunları, genellikle kullanıcılar tarafından algılanabileceğinden önemlidir. Kullanıcılar hafızayı algılayabilir aşağıdaki şekillerde kontrol edebilirsiniz:
- Sayfaların performansı zaman içinde kademeli olarak düşer. Bu muhtemelen bir belirti olabilir. Bellek sızıntısı, sayfadaki bir hatanın sayfada kademeli olarak daha fazla ve zamanla daha fazla bellek elde edebilir.
- Bir sayfanın performansı sürekli olarak kötüyse. Bu muhtemelen hafızada şişkinlik belirtisidir. Hafıza Şişkinlik, 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 büyük olasılıkla sık sık çöp toplamaya başladı. Çöp toplama, tarayıcının belleği geri kazanmasıdır. Tarayıcı ve bunun ne zaman olacağına karar verir. Koleksiyonlar sırasında tüm komut dosyası yürütme işlemi duraklatılır. Tarayıcı çok fazla çöp biriktirmeye neden oluyorsa, komut dosyası yürütme çok duraklayacaktı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 bir sızıntı oluştu. 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. Hangi cihazların popüler olduğunu öğrenin test edebilir ve sayfanızı bu cihazlarda test edebilirsiniz. Deneyim tutarlı bir şekilde 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.
Üst Karakter+Esc tuşlarına basın veya Chrome ana menüsüne gidip Diğer araçlar > seçeneğini belirleyin Görev yöneticisi'nden 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ığıyla ilgili farklı bilgiler verir:
- Bellek sütunu, yerel belleği temsil eder. DOM düğümleri yerel bellekte depolanır. Bu değeri artıyor, DOM düğümleri oluşturuluyor.
- JavaScript Belleği sütunu, JS yığınını temsil eder. Bu sütunda iki değer yer alır. İlgili içeriği oluşturmak için kullanılan ilgili değer, yayındaki numaradır (parantez içindeki sayı). Yayındaki numara sayfanızdaki erişilebilir nesnelerin ne kadar bellek kullandığını gösterir. Bu numara ya yeni nesneler oluşturuluyor ya da mevcut nesneler büyüyor.
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çerisindeki 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 on bin div düğüm eklenir
doküman gövdesine 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 HEAP grafiği (aşağıda NET), JS yığınını temsil eder. Overview (Genel bakış) bölmesinin altında Sayaç bölmesi bulunur. Burada şunları yapabilirsiniz: JS yığınına göre ayrılmış bellek kullanımını görebilirsiniz (Genel Bakış bölmesindeki HEAP grafiğinde olduğu gibi), DOM düğümleri, işleyiciler ve GPU belleğine dahil edilir. 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 bakarsanız
kodla sorunsuz bir şekilde eşleştiğini görebilirsiniz. Düğüm sayısı şu kadar süre içinde artar:
zaman alabilir. 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 uygulamalar doğrultusunda, ilk atılım
aslında zorlanan bir atık toplama işlemidir (çöp toplama düğmesine basılarak gerçekleştirilir). Farklı
JS yığın boyutunun yükseldiğini görebilirsiniz. Bu doğal ve beklenen bir durumdur:
JavaScript kodu, her düğme tıklandığında DOM düğümleri oluşturuyor ve her düğme tıklandığında
bir milyon karakterden oluşan bir dize oluşturur. Buradaki en önemli nokta, JS yığınının
daha yüksek olmasını sağlayın ("başlangıç", zorunlu atık toplama işleminden sonraki noktadır). İçinde
JS yığın boyutunu veya düğüm boyutunu büyütme kalıbını görseniz bile,
bellek sızıntısı anlamına gelebilir.
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ı veya JavaScript kodu. Bir düğümün "ayrılmış" olduğu söylenir kaldırılacağından emin olun. bazı JavaScript kodları buna başvuruda bulunmaya devam ediyor. Ayrılan DOM düğümleri, bellek sızıntılarının yaygın nedenlerinden biridir. Bu Bu bölümde, Geliştirici Araçları'nın yığın profil oluşturucuları kullanı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. Bu düğümler
kod tarafından referans verilen ancak DOM ağacında mevcut olmayan referanslar bu nedenle ayrılı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, sırasında belleğin, sayfanızın JS nesneleri ve DOM düğümleri arasında nasıl dağıtıldığını anlık görüntü.
Anlık görüntü oluşturmak için Geliştirici Araçları'nı açın ve Bellek paneline gidip Yığın Genel Görünüm radyo düğmesine 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. Tamamlandığında sol taraftan seçin panelinde yer alır (HEAP ANLIK GÖRÜNTÜLEME olarak adlandırılır).
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. Düğümler vurgulanıyor kırmızının doğrudan referansı yoktur. Bunlar yalnızca sarı düğümün parçası oldukları için ağacı. Genel olarak sarı düğümlere odaklanmanız gerekir. Sarı düğümün çalışmaması için kodunuzu düzeltin gerekenden daha uzun süre aktif kalır ve aynı zamanda kanalın parçası olan kırmızı düğümleri sarı düğümün ağacı.
Daha ayrıntılı incelemek için sarı düğümden birini tıklayın. Nesneler bölmesinde daha fazla
kodla ilgili bilgileri içerir. Örneğin, aşağıdaki ekran görüntüsünde
detachedTree değişkeninin düğüme başvurduğunu gösterir. Bu bellek sızıntısını düzeltmek için
detachedTree kullanan kodu inceler ve düğüme referansını kaldırdığından emin olur.
gerektiğinde de kullanabilirsiniz.
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 tıklandığında bir milyon karakterden oluşan bir dize
x dizisine eklendi.
Ayırma Zaman Çizelgesi kaydetmek için Geliştirici Araçları'nı açın, Profiller paneline gidip Kaydet
Ayırma Zaman Çizelgesi radyo düğmesine basın, Başlat düğmesine basın ve şüphelendiğiniz işlemi gerçekleştirin
bellek sızıntısına neden oluyorsa ve kaydı durdur düğmesine basın
(
) şu olduğunda
yardımcı oluyorsunuz.
Kayıt sırasında, ayırma zaman çizelgesinde aşağıdaki ekran görüntüsünü inceleyebilirsiniz.
Bu mavi çubuklar, yeni bellek ayırmalarını gösterir. Bu yeni bellek ayırmaları sizin adaylarınızdır olabilir. Oluşturucu bölmesini filtrelemek için çubuğu yakınlaştırarak yalnızca tahsis edilmiş olabilir.
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,
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çebilir.
- 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 (Alt Yukarı), en fazla belleği 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 kullanılan çöpleri tespit etmek için Chrome Görev Yöneticisi veya Zaman Çizelgesi bellek kayıtlarını kullanabilirsiniz koleksiyonlar oluşturun. Görev Yöneticisi'nde sık sık Bellek veya JavaScript Bellek yükselişi ve düşüş değerleri sık sık çöp koleksiyonlarını temsil eder. Zaman Çizelgesi kayıtlarında sıklıkla artış ve düşüş JS yığın veya düğüm sayısı grafikleri sık sık çöp koleksiyonlarını gösterir.
Sorunu tanımladıktan sonra, ayırma zaman çizelgesi kaydını kullanarak sorunun nerede olduğunu öğrenebilirsiniz. bellek ayrıldığı ve ayırmalara hangi işlevlerin neden olduğu belirtilir.