Tarayıcılar, web sayfalarının hafızasını otomatik olarak yönetir. Bir web sayfası bir nesne oluşturduğunda, tarayıcı nesneyi depolamak için “başlık altında” bir bellek parçası ayırır. Bellek sınırlı bir kaynak olduğundan, tarayıcı bir nesneye artık gerek kalmadığını algılamak ve temeldeki bellek yığınını boşaltmak için çöp toplama işlemi gerçekleştirir.
Algılama yine de mükemmel değildir ve kanıtlandı mükemmel algılama imkansız bir görevdir. Bu nedenle, tarayıcılar “bir nesneye ihtiyaç vardır” kavramını “bir nesneye ulaşılabilir” kavramına yaklaştırırlar. Web sayfası, değişkenleri ve erişilebilir diğer nesnelerin alanları aracılığıyla bir nesneye ulaşamıyorsa, tarayıcı nesneyi güvenli bir şekilde geri alabilir. Bu iki kavram arasındaki fark, aşağıdaki örnekte gösterildiği gibi bellek sızıntılarına yol açar.
const object = {a: new Array(1000), b: new Array(2000)};
setInterval(() => console.log(object.a), 1000);
Burada daha büyük dizi b artık gerekli değil, ancak tarayıcı üzerinden hala erişilebilir olduğu için tarayıcı onu geri almıyor object.b geri aramada. Böylece daha büyük dizinin belleği sızdırılmış olur.
Bellek sızıntıları Web’de yaygın. Bir olay dinleyicisinin kaydını silmeyi unutarak, yanlışlıkla bir iframe’den nesneleri yakalayarak, bir çalışanı kapatmayarak, nesneleri dizilerde biriktirerek vb. Bir web sayfasında bellek sızıntısı varsa, bellek kullanımı zamanla artar ve web sayfası kullanıcılara yavaş ve şişkin görünür.
Bu sorunu çözmenin ilk adımı onu ölçmektir. Yeni performance.measureUserAgentSpecificMemory() API geliştiricilerin üretimdeki web sayfalarının bellek kullanımını ölçmelerine ve böylece yerel testlerden kaçan bellek sızıntılarını tespit etmelerine olanak tanır.
Nasıl performance.measureUserAgentSpecificMemory() mirastan farklı performance.memory API? #
Mevcut standart olmayanlara aşina iseniz performance.memory API, yeni API’nin ondan nasıl farklı olduğunu merak ediyor olabilirsiniz. Temel fark, eski API’nin JavaScript yığınının boyutunu döndürmesi, yeni API’nin ise web sayfası tarafından kullanılan belleği tahmin etmesidir. Bu fark, Chrome aynı yığını birden çok web sayfasıyla (veya aynı web sayfasının birden çok örneğiyle) paylaştığında önemli hale gelir. Bu gibi durumlarda, eski API’nin sonucu keyfi olarak kapalı olabilir. Eski API, “yığın” gibi uygulamaya özgü terimlerle tanımlandığından, onu standartlaştırmak umutsuzdur.
Diğer bir fark, yeni API’nin çöp toplama sırasında bellek ölçümü gerçekleştirmesidir. Bu, sonuçlardaki gürültüyü azaltır, ancak sonuçların üretilmesi biraz zaman alabilir. Diğer tarayıcıların, çöp toplamaya güvenmeden yeni API’yi uygulamaya karar verebileceğini unutmayın.
Önerilen kullanım örnekleri #
Bir web sayfasının bellek kullanımı, olayların zamanlamasına, kullanıcı eylemlerine ve çöp toplama işlemlerine bağlıdır. Bu nedenle, bellek ölçüm API’si üretimden bellek kullanım verilerini toplamaya yöneliktir. Bireysel aramaların sonuçları daha az kullanışlıdır. Örnek kullanım durumları:
- Yeni bellek sızıntılarını yakalamak için web sayfasının yeni bir sürümünün kullanıma sunulması sırasında gerileme tespiti.
- A/B, bellek etkisini değerlendirmek ve bellek sızıntılarını saptamak için yeni bir özelliği test ediyor.
- Bellek sızıntılarının varlığını veya yokluğunu doğrulamak için bellek kullanımını oturum süresiyle ilişkilendirme.
- Bellek kullanımının genel etkisini anlamak için bellek kullanımını kullanıcı ölçümleriyle ilişkilendirme.
Tarayıcı Uyumluluğu #
- Chrome 89, Desteklenir 89
- Firefox, desteklenmiyor
- Kenar 89, Desteklenen 89
- Safari, desteklenmiyor
Şu anda API, Chrome 89’dan başlayarak yalnızca Chromium tabanlı tarayıcılarda desteklenmektedir. Tarayıcıların bellekteki nesneleri temsil etmenin farklı yolları ve bellek kullanımını tahmin etmenin farklı yolları olduğundan, API’nin sonucu büyük ölçüde uygulamaya bağlıdır. Doğru hesaplama çok pahalıysa veya mümkün değilse, tarayıcılar bazı bellek bölgelerini hesaplamanın dışında tutabilir. Bu nedenle, sonuçlar tarayıcılar arasında karşılaştırılamaz. Yalnızca aynı tarayıcı için sonuçları karşılaştırmak anlamlıdır.
kullanma performance.measureUserAgentSpecificMemory() #
Özellik algılama #
bu performance.measureUserAgentSpecificMemory işlev kullanılamayacak veya bir hatayla başarısız olabilir. Güvenlik hatası yürütme ortamı, kaynaklar arası bilgi sızıntılarını önlemek için güvenlik gereksinimlerini karşılamıyorsa. buna dayanır kökenler arası izolasyonbir web sayfasının COOP+COEP başlıklarını ayarlayarak etkinleştirebileceği.
Destek çalışma zamanında tespit edilebilir:
if (!window.crossOriginIsolated) {
console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
} else if (!performance.measureUserAgentSpecificMemory) {
console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
} else {
let result;
try {
result = await performance.measureUserAgentSpecificMemory();
} catch (error) {
if (error instanceof DOMException && error.name === 'SecurityError') {
console.log('The context is not secure.');
} else {
throw error;
}
}
console.log(result);
}
Yerel test #
Chrome, bellek ölçümünü çöp toplama sırasında gerçekleştirir; bu, API’nin sonuç sözünü hemen çözmediği ve bunun yerine bir sonraki çöp toplamayı beklediği anlamına gelir.
API’yi çağırmak, şu anda 20 saniyeye ayarlı olan bir zaman aşımından sonra bir çöp toplamaya zorlar, ancak daha erken olabilir. Chrome’u şununla başlatma --enable-blink-features="ForceEagerMeasureMemory" komut satırı bayrağı, zaman aşımını sıfıra indirir ve yerel hata ayıklama ve test etme için kullanışlıdır.
Örnek #
API’nin önerilen kullanımı, tüm web sayfasının bellek kullanımını örnekleyen ve sonuçları toplama ve analiz için bir sunucuya gönderen genel bir bellek izleyicisi tanımlamaktır. En basit yol, periyodik olarak numune almaktır, örneğin her M dakika. Bununla birlikte, örnekler arasında bellek zirveleri oluşabileceğinden bu, verilere önyargı getirir.
Aşağıdaki örnek, tarafsız bellek ölçümlerinin nasıl yapılacağını gösterir. Poisson süreciörneklerin herhangi bir zamanda meydana gelme olasılığının eşit olduğunu garanti eder (gösteri, kaynak).
İlk olarak, kullanarak bir sonraki hafıza ölçümünü planlayan bir fonksiyon tanımlayın. setTimeout() rastgele bir aralık ile.
function scheduleMeasurement() {
// Check measurement API is available.
if (!window.crossOriginIsolated) {
console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
console.log('See to learn more')
return;
}
if (!performance.measureUserAgentSpecificMemory) {
console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
return;
}
const interval = measurementInterval();
console.log(`Running next memory measurement in ${Math.round(interval / 1000)} seconds`);
setTimeout(performMeasurement, interval);
}
bu measurementInterval() işlevi, ortalama olarak her beş dakikada bir ölçüm olacak şekilde milisaniye cinsinden rastgele bir aralık hesaplar. Görmek üstel dağılım işlevin arkasındaki matematikle ilgileniyorsanız.
function measurementInterval() {
const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
}
Son olarak, zaman uyumsuz performMeasurement() işlevi API’yi çağırır, sonucu kaydeder ve bir sonraki ölçümü planlar.
async function performMeasurement() {
// 1. Invoke performance.measureUserAgentSpecificMemory().
let result;
try {
result = await performance.measureUserAgentSpecificMemory();
} catch (error) {
if (error instanceof DOMException && error.name === 'SecurityError') {
console.log('The context is not secure.');
return;
}
// Rethrow other errors.
throw error;
}
// 2. Record the result.
console.log('Memory usage:', result);
// 3. Schedule the next measurement.
scheduleMeasurement();
}
Son olarak, ölçmeye başlayın.
// Start measurements.
scheduleMeasurement();
Sonuç aşağıdaki gibi görünebilir:
// Console output:
{
bytes: 60_100_000,
breakdown: [
{
bytes: 40_000_000,
attribution: [{
url: 'https://example.com/',
scope: 'Window',
}],
types: ['JavaScript']
},{
bytes: 20_000_000,
attribution: [{
url: 'https://example.com/iframe',
container: {
id: 'iframe-id-attribute',
src: '/iframe',
},
scope: 'Window',
}],
types: ['JavaScript']
},
{
bytes: 100_000,
attribution: [],
types: ['DOM']
},
],
}
Toplam bellek kullanım tahmini, bytes alan. Bu değer büyük ölçüde uygulamaya bağlıdır ve tarayıcılar arasında karşılaştırılamaz. Aynı tarayıcının farklı sürümleri arasında bile değişiklik gösterebilir. Değer, geçerli süreçteki tüm iframe’lerin, ilgili pencerelerin ve web çalışanlarının JavaScript ve DOM belleğini içerir.
bu breakdown listesi, kullanılan bellek hakkında daha fazla bilgi sağlar. Her giriş, belleğin bir bölümünü tanımlar ve onu URL ile tanımlanan bir dizi pencere, iframe ve çalışanla ilişkilendirir. bu types alanı, bellekle ilişkili uygulamaya özgü bellek türlerini listeler.
Tüm listeleri genel bir şekilde ele almak ve varsayımları belirli bir tarayıcıya dayalı olarak kodlamamak önemlidir. Örneğin, bazı tarayıcılar boş bir breakdown ya da boş attribution. Diğer tarayıcılar birden fazla giriş döndürebilir. attribution bu girişlerden hangisinin hafızaya sahip olduğunu ayırt edemediklerini belirtir.
Geri bildirim #
bu Web Performansı Topluluk Grubu ve Chrome ekibi, düşüncelerinizi ve deneyimlerinizi duymaktan memnuniyet duyacaktır. performance.measureUserAgentSpecificMemory().
Bize API tasarımından bahsedin #
API’de beklendiği gibi çalışmayan bir şey mi var? Veya fikrinizi uygulamak için ihtiyaç duyduğunuz eksik özellikler var mı? Şurada bir özellik sorunu bildirin: Performance.measureUserAgentSpecificMemory() GitHub deposu veya düşüncelerinizi mevcut bir soruna ekleyin.
Uygulamayla ilgili bir sorun bildirin #
Chrome’un uygulamasında bir hata mı buldunuz? Yoksa uygulama spesifikasyondan farklı mı? Şu adrese bir hata bildirin: yeni.crbug.com. Olabildiğince fazla ayrıntı eklediğinizden, hatayı yeniden oluşturmak için basit talimatlar sağladığınızdan ve Bileşenler ayarlanır Blink>PerformanceAPIs. Kusur hızlı ve kolay çoğaltmaları paylaşmak için harika çalışıyor.
destek göster #
kullanmayı planlıyor musun performance.measureUserAgentSpecificMemory()? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bunları desteklemenin ne kadar önemli olduğunu gösterir. Şuraya bir tweet gönder: @ChromiumDev ve onu nerede ve nasıl kullandığınızı bize bildirin.
Faydalı Bağlantılar #
teşekkürler #
API tasarım incelemeleri için Domenic Denicola, Yoav Weiss, Mathias Bynens’e ve Chrome’da kod incelemeleri için Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz’a çok teşekkürler. API’yi büyük ölçüde geliştiren değerli kullanıcı geri bildirimleri sağladıkları için Per Parker, Philipp Weis, Olga Belomestnykh, Matthew Bolohan ve Neil Mckay’e de teşekkür ederim.
Kahraman resmi ile Harrison Broadbent Açık Unsplash