Sayfanın bellek kullanımını bulmak için jQuery veya javascript

Bir web sayfası veya jquery uygulamam tarafından ne kadar bellek kullanıldığını öğrenmenin bir yolu var mı?

Durumum şu:

Bir jquery ön ucu ve JSON'da veri sunan dinlendirici bir arka uç kullanarak veri ağırlıklı bir web uygulaması oluşturuyorum. Sayfa bir kez yüklenir ve ardından her şey ajax aracılığıyla gerçekleşir.

Kullanıcı arayüzü, kullanıcılara kullanıcı arayüzünde birden çok sekme oluşturmanın bir yolunu sağlar ve her sekme çok sayıda veri içerebilir. Oluşturabilecekleri sekme sayısını sınırlamayı düşünüyorum, ancak bunları yalnızca bellek kullanımı belirli bir eşiğin üzerine çıktığında sınırlamanın iyi olacağını düşünüyordum.

Cevaplara dayanarak, bazı açıklamalar yapmak istiyorum:

• Bir çalışma zamanı çözümü arıyorum (yalnızca geliştirici araçları değil), böylece uygulamam bir kullanıcının tarayıcısındaki bellek kullanımına dayalı eylemleri belirleyebilir.
• DOM öğelerini veya belge boyutunu saymak iyi bir tahmin olabilir, ancak olay bağlamayı, verileri (), eklentileri ve diğer bellek içi veri yapılarını içermediği için oldukça yanlış olabilir.

2015 Güncellemesi

2012 yılında, kullanımda olan tüm büyük tarayıcıları desteklemek istiyorsanız, bu mümkün değildi. Ne yazık ki, şu anda bu hala yalnızca Chrome özelliğidir (standart dışı bir uzantısı window.performance).

window.performance.memory

Tarayıcı desteği: Chrome 6+

2012 Cevap

Bir web sayfası veya jquery uygulamam tarafından ne kadar bellek kullanıldığını öğrenmenin bir yolu var mı? Bir çalışma zamanı çözümü arıyorum (sadece geliştirici araçları değil), böylece uygulamam bir kullanıcının tarayıcısındaki bellek kullanımına dayalı eylemleri belirleyebilir.

Basit ama doğru cevap hayır . Tüm tarayıcılar bu tür verileri size açıklamaz. Ve bence bu fikri bırakmalısınız çünkü "el yapımı" bir çözümün karmaşıklığı ve yanlışlığı, çözdüğünden daha fazla sorun ortaya çıkarabilir.

DOM öğelerini veya belge boyutunu saymak iyi bir tahmin olabilir, ancak olay bağlamayı, verileri (), eklentileri ve diğer bellek içi veri yapılarını içermediği için oldukça yanlış olabilir.

Fikrinize gerçekten bağlı kalmak istiyorsanız, sabit ve dinamik içeriği ayırmalısınız.

Sabit içerik, kullanıcı eylemlerine (komut dosyaları, eklentiler, vb. Tarafından kullanılan bellek) bağlı değildir. Diğer
her şey dinamik olarak kabul edilir ve sınırınızı belirlerken ana odak noktanız olmalıdır.

Ancak bunları özetlemenin kolay bir yolu yok. Tüm bu bilgileri toplayan bir izleme sistemi uygulayabilirsiniz . Tüm işlemler uygun izleme yöntemlerini çağırmalıdır. Örneğin:

İzleme sistemini veri ayırmalarınız hakkında jQuery.databilgilendirmek için sarma veya üzerine yazma yöntemi .

İçerik ekleme veya çıkarma da izlenecek şekilde html işlemlerini sarın ( innerHTML.lengthen iyi tahmindir).

Büyük bellek içi nesneleri tutarsanız, bunlar da izlenmelidir.

Olay bağlamaya gelince, olay yetkilendirmesini kullanmalısınız ve daha sonra bu biraz sabit bir faktör olarak da düşünülebilir.

Bellek gereksinimlerinizi doğru bir şekilde tahmin etmeyi zorlaştıran bir başka husus, farklı tarayıcıların belleği farklı şekilde tahsis edebilmesidir (Javascript nesneleri ve DOM öğeleri için).

Navigasyon Zamanlama API'sini kullanabilirsiniz .

Gezinme Zamanlaması, web'deki performansı doğru şekilde ölçmek için bir JavaScript API'sidir. API, sayfada gezinme ve yükleme etkinlikleri için yerel olarak doğru ve ayrıntılı zamanlama istatistikleri elde etmenin basit bir yolunu sağlar.

window.performance.memory JavaScript bellek kullanım verilerine erişim sağlar.

Önerilen Kaynaklar

• Gezinme Zamanlaması ile sayfa yükleme hızını ölçme

Bu soru 5 yaşında ve hem javascript hem de tarayıcılar bu süre içinde inanılmaz bir şekilde gelişti. Bu artık mümkün olduğundan (en azından bazı tarayıcılarda) ve bu soru Google'ın "javascript hafıza kullanımını göster" in ilk sonucu olduğundan, modern bir çözüm sunabileceğimi düşündüm.

memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master

Bu komut dosyası (herhangi bir sayfada istediğiniz zaman çalıştırabilirsiniz) sayfanın mevcut bellek kullanımını gösterecektir:

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

Tarayıcı tarafından gerçekten ne kadar bellek kullanıldığını bulmanın bir yolunu bilmiyorum, ancak sayfadaki öğelerin sayısına bağlı olarak bir buluşsal yöntem kullanabilirsiniz. Uinsg jQuery, yapabilirsiniz $('*').lengthve bu size DOM öğelerinin sayısını verecektir. Dürüst olmak gerekirse, bazı kullanılabilirlik testleri yapmak ve desteklemek için sabit sayıda sekme bulmak muhtemelen daha kolaydır.

Kullanım Krom Öbek Anlık aracı

MemoryBug adında bir Firebug aracı da var ama henüz olgunlaşmamış gibi görünüyor.

Yalnızca test için görmek istiyorsanız, Chrome'da geliştirici sayfası aracılığıyla bellek kullanımını izlemenin bir yolu vardır, ancak bunu doğrudan javascript'te nasıl yapacağınızdan emin değilsiniz.

Diğer cevaplardan tamamen farklı bir çözüm önermek istiyorum, yani uygulamanızın hızını gözlemlemek ve tanımlı seviyelerin altına düştüğünde ya kullanıcıya sekmeleri kapatmak için ipuçları göster ya da yeni sekmelerin açılmasını devre dışı bırakmak. Bu tür bilgileri sağlayan basit bir sınıf örneğin https://github.com/mrdoob/stats.js'dir . Bunun dışında, bu kadar yoğun bir uygulamanın tüm sekmeleri ilk etapta bellekte tutması akıllıca olmayabilir. Örneğin, yalnızca kullanıcı durumunu korumak (kaydırma) ve son iki sekme hariç her seferinde tüm verileri yüklemek daha güvenli bir seçenek olabilir.

Son olarak, webkit geliştiricileri javascript'e bellek bilgisi eklemeyi tartışıyorlar, ancak neyin açığa çıkarılmaması gerektiği konusunda bir dizi tartışmaya girdiler. Her iki durumda da, bu tür bilgilerin birkaç yıl içinde mevcut olması pek olası değildir (ancak bu bilgi şu anda çok yararlı değildir).

Benzer bir projeye başlarken benim için mükemmel soru zamanlaması!

Daha yüksek düzeyde ayrıcalıklar gerektireceğinden uygulama içi JS bellek kullanımını izlemenin kesin bir yolu yoktur. Yorumlarda belirtildiği gibi, tüm öğelerin sayısını vb. Kontrol etmek, bağlı olayları vb. Görmezden geldiği için zaman kaybı olur.

Bellek sızıntıları görünürse veya kullanılmayan öğeler devam ederse bu bir mimari sorun olabilir. Kapalı sekmelerin içeriğinin olay işleyicileri vb. Kalmadan tamamen silindiğinden emin olmak mükemmel olur; Bittiğini varsayarsak, bir tarayıcıda yoğun kullanımı simüle edebilir ve sonuçları bellek izlemeden çıkarabilirsin ( about: adres çubuğuna bellek yazın )

İpucu: Aynı sayfayı IE, FF, Safari ... ve Chrome'da açarsanız; ve about: Chrome'daki memory'ye gitmek yerine, diğer tüm tarayıcılarda bellek kullanımını raporlayacaktır . Düzgün!

Yapmak isteyebileceğiniz şey, sunucunun o oturum için bant genişliğini takip etmesini sağlamaktır (onlara kaç bayt veri gönderildi). Sınırı aştıklarında, ajax aracılığıyla veri göndermek yerine, sunucu, kullanıcıya çok fazla veri kullandığını söylemek için javascript'in kullanacağı bir hata kodu göndermelidir.

Document.documentElement.innerHTML dosyasını alabilir ve uzunluğunu kontrol edebilirsiniz. Size web sayfanız tarafından kullanılan bayt sayısını verecektir.

Bu, tüm tarayıcılarda çalışmayabilir. Böylece tüm vücut öğelerinizi dev bir div içine alabilir ve bu div'de innerhtml'yi çağırabilirsiniz. Gibi bir şey<body><div id="giantDiv">...</div></body>