Web sayfanızın toplam bellek kullanımını measurementUserAgentspecificMemory() ile izleyin

Regresyonları tespit etmek için üretimde web sayfanızın bellek kullanımını nasıl ölçeceğinizi öğrenin.

Brendan Kenny
Brendan Kenny
X GitHub
Ulan Degenbaev
Ulan Degenbaev
X GitHub

Tarayıcılar, web sayfalarının belleğini otomatik olarak yönetir. Bir web sayfası bir nesne oluşturduğunda, tarayıcı "gelişmiş" bellek parçasını ayırır - depolamanız gerekir. Bellek sınırlı bir kaynak olduğundan tarayıcı, atık toplama, bir nesneye artık ihtiyaç duyulmadığında bunu algılamak ve bir sistemdir.

Ancak tespit mükemmel değildir ve tespit edebildiğini kanıtlanmıştır. imkansız bir görevdir. Dolayısıyla, tarayıcılar "bir nesne" kavramını yaklaşık olarak gerekiyor" "erişilebilir bir nesne" kavramıyla başlar. Web sayfası değişkenleri ve diğer erişilebilir nesnelerin alanları aracılığıyla nesneye erişirken Ardından, tarayıcı nesneyi güvenli bir şekilde geri alabilir. Bu ikisi arasındaki fark, iki kavram, 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 olan b dizisi artık gerekli değildir, ancak tarayıcı geri çağırmada object.b aracılığıyla hâlâ ulaşılabilir olduğundan yeniden hak talebinde bulunun. Dolayısıyla, daha büyük dizinin belleği sızdırılmıştır.

Bellek sızıntıları Web'de yaygındır. Etkinlik işleyicinin kaydını iptal etmeyi unutarak kullanıcı kaydını kolayca tanıtabilirsiniz. yanlışlıkla iframe'den nesne yakalama yoluyla, bir çalışanı kapatmadan biriktirme gibi işlemler yapabilir. Bir web sayfasında bellek sızıntısı varsa bellek kullanımı zamanla artar ve web sayfası yavaş görünür kullanıcılara şişirilmişti.

Bu sorunu çözmenin ilk adımı problemi ölçmektir. Yeni performance.measureUserAgentSpecificMemory() API, geliştiricilerin şunları yapmasına olanak tanır: Üretim aşamasında web sayfalarının bellek kullanımını ölçebilir ve böylece kaçağı olabilir.

performance.measureUserAgentSpecificMemory() ile eski performance.memory API'si arasındaki fark nedir?

Mevcut standart olmayan performance.memory API hakkında bilginiz varsa yeni API'nin ondan farkını merak ediyor olabilirsiniz. Aralarındaki temel fark eski API, JavaScript yığınının boyutunu, yeni API ise web sayfası tarafından kullanılan belleği tahmin eder. Bu fark Chrome aynı yığını birden fazla web sayfasıyla paylaştığında önemlidir (veya aynı web sayfasının birden fazla örneğidir). Bu gibi durumlarda, eski kötüye kullanımın sonucu, API isteğe bağlı olarak devre dışı olabilir. Eski API "yığın" gibi uygulamaya özgü terimlerle birlikte düşünülebilir.

Diğer bir fark da yeni API'nin, orijinal sürümü kullanan her şeyi öğreteceğim. Bu, sonuçlardaki gürültüyü azaltır ancak işlemin tamamlanması için Bu da sonuçlar elde edilene kadar devam eder. Diğer tarayıcıların yeni API'yi atık toplamaya gerek kalmadan uygulayın.

Önerilen kullanım alanları

Bir web sayfasının bellek kullanımı, etkinliklerin zamanlamasına, kullanıcı işlemlerine ve konusunda emin olabilirsiniz. Bu nedenle bellek ölçüm API'si üretimdeki bellek kullanım verilerini topluyor. Ayrı ayrı aramaların sonuçları daha az faydalıdır. Kullanım alanı örnekleri:

  • 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 regresyon algılama.
  • Bellek üzerindeki etkisini değerlendirmek ve bellek sızıntılarını tespit etmek için yeni bir özelliğe A/B testi yapma.
  • Bellek sızıntısı olup olmadığını 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ı metrikleriyle ilişkilendirme.

Tarayıcı uyumluluğu

Tarayıcı Desteği

  • Chrome: 89..
  • Kenar: 89..
  • Firefox: Desteklenmez..
  • Safari: desteklenmez..

Kaynak

Chrome 89 sürümünden itibaren API şu anda yalnızca Chromium tabanlı tarayıcılarda desteklenmektedir. İlgili içeriği oluşturmak için kullanılan büyük ölçüde uygulamaya bağlıdır çünkü tarayıcılar, nesneleri bellekte göstermenin farklı yolları ve farklı tahmin ediyoruz. Tarayıcılar, ve uygun muhasebenin çok pahalı veya uygulanabilir olup olmadığını da hesaba katmaktır. Dolayısıyla, karşılaştırılamaz. Sadece her bir göreve aynı tarayıcı için aynı sonuçları gösterir.

performance.measureUserAgentSpecificMemory() kullanılıyor

Özellik algılama

performance.measureUserAgentSpecificMemory işlevi kullanılamayacak veya yürütme ortamının koşullarını karşılamazsa SecurityError ile başarısız olabilir. kaynaklar arası bilgi sızıntılarını önlemeye yönelik güvenlik gereksinimleri. Bir web sayfasının etkinleştirebileceği çapraz kaynak izolasyonuna dayanır COOP+COEP başlıklarını ayarlayarak daha fazla bilgi edinebilirsiniz.

Destek, çalışma zamanında algılanabilir:

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, atık toplama sırasında bellek ölçümünü gerçekleştirir. Bu durumda, API'nin sonuç vaadini hemen çözümlemediğini ve bunun yerine emin olmanız gerekir.

API'nin çağrılması, bir zaman aşımı sonrasında bir atık toplamayı zorlar. şu anda 20 saniye olarak ayarlanmış olsa da daha erken gerçekleşebilir. Chrome'u --enable-blink-features='ForceEagerMeasureMemory' komut satırı işareti küçültülüyor zaman aşımını sıfıra ayarlar ve yerel hata ayıklama ve test işlemleri için yararlıdır.

Örnek

API'nin önerilen kullanımı, tüm web sayfasının bellek kullanımından örnekler toplar ve sonuçları bir sunucuya gönderir kullanmaya başlıyorsunuz. En basit yol düzenli olarak örnekleme yapmaktır. örnek her M dakikada bir. Ancak bu durum verilerde yanlılığa yol açar çünkü örnekler arasında bellekte zirve noktaları görülebilir.

Aşağıdaki örnekte, Poisson işlemi kullanarak tarafsız bellek ölçümleri yapabilir Örneklerin herhangi bir zamanda eşit sıklıkta gerçekleşme olasılığını garanti eder (demo, kaynak).

İlk olarak, bir sonraki bellek ölçümünü planlayan bir fonksiyon tanımlamak için Rastgele bir aralıkla setTimeout().

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 https://web.dev/coop-coep/ 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);
}

measurementInterval() işlevi, milisaniye cinsinden rastgele bir aralık hesaplar Yani ortalama olarak her beş dakikada bir ölçüm yapılır. Bkz. Üstel dağılımı'nı seçin.

function measurementInterval() {
  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
}

Son olarak, eşzamansız performMeasurement() işlevi API'yi çağırır, 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çüme 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ında döndürülür. Bu değer büyük ölçüde uygulamaya bağlıdır ve tarayıcılar arasında karşılaştırılamaz. Bu ve aynı tarayıcının farklı sürümleri arasında geçiş bile yapabilirsiniz. Değer şunları içerir: Tüm iframe'lerin, ilgili pencerelerin ve web çalışanlarının JavaScript ve DOM belleği devam etmesi gerekir.

breakdown listesi, kullanılan bellek hakkında daha fazla bilgi sağlar. Her biri Belleğin bir bölümünü tanımlar ve bunu bir dizi pencereler, iframe'ler ve çalışanlar için geçerlidir. types alanındaki listeler bellekle ilişkili uygulamaya özel bellek türleridir.

Tüm listeleri genel bir şekilde ele almak ve sabit kodlama yapmak önemlidir. çeşitli varsayımlarda bulunmaktır. Örneğin, bazı tarayıcılarda boş bir breakdown veya boş bir attribution döndürün. Diğer tarayıcılar attribution işlevinde, ayırt edemediğini gösteren birden fazla giriş döndürüyor belleğe sahip olduğunu belirler.

Geri bildirim

Web Performansı Topluluğu Grubu ve Chrome ekibi, düşüncelerinizi ve tecrübelerinizi performance.measureUserAgentSpecificMemory().

Bize API tasarımı hakkında bilgi verin

API'de beklendiği gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan özellikler eksik mi? Şurada spesifikasyon sorunu bildir: performance.measureUserAgentSpecificMemory() GitHub deposu veya aklınızdan çıkarabilirsiniz.

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa ve spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Şunları yaptığınızdan emin olun: mümkün olduğunca fazla ayrıntı ekleyin, yeniden üretmek için basit talimatlar verin hatasını giderin ve Bileşenler'i Blink>PerformanceAPIs olarak ayarlayın. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

Desteğinizi gösterin

performance.measureUserAgentSpecificMemory() kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçilerine onu desteklemek çok önemli. @ChromiumDev adresine tweet gönderin ve nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür

API tasarımı incelemelerinde Domenic Denicola, Yoav Weiss, Mathias Bynens ve ve kod incelemeleri için Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz seçeneğini tıklayın. Ayrıca, Per Parker, Philipp Weis, Olga Belomestnykh, Matthew Bolohan ve Neil Mckay API'yi iyileştirdi.

Harrison Broadbent'ten Unsplash'teki hero resim