Performans verilerinizi extensibility API ile özelleştirin

Andrés Olivares

Sofia Emelianova

Genel Bakış

Uygulamanızın performansıyla ilgili olarak tarayıcının yerleşik metriklerinin ötesinde daha ayrıntılı analizler mi istiyorsunuz? Performans paneli artık kendi performans verilerinizi doğrudan zaman çizelgesine eklemenize olanak tanıyor. İster dahili süreçleri görselleştirmesi gereken bir çerçeve yazarı, ister kodunuzun etkisini izleyen bir kitaplık geliştiricisi olun, isterseniz de özel enstrümantasyonla karmaşık bir uygulama oluşturun, performans genişletilebilirlik API'si, arka planda neler olup bittiğini gerçekten kapsamlı bir şekilde anlamanızı sağlayacak araçlar sunar.

Özel ölçümlerinizi ve etkinliklerinizi ekleyerek, alışkın olduğunuz Performans panelinde özel görselleştirmeler oluşturabilirsiniz. Çerçevenizin bileşen yaşam döngüsü etkinliklerini standart tarayıcı performans metrikleriyle birlikte gördüğünüzü veya özel oluşturma motorunuzun yürütme akışını tarayıcının oluşturma ardışık düzeniyle mükemmel bir senkronizasyon içinde izlediğinizi düşünün.

Bu API, bunu sağlamak için iki yaklaşım sunar:

1. console.timeStamp API (Geliştirici Araçları için genişletilmiş)

Bu API, uygulamaları izlemek ve zamanlama verilerini yalnızca Geliştirici Araçları'ndaki Performans paneline aktarmak için yüksek performanslı bir yöntem sunar. Minimum çalışma zamanı ek yükü için tasarlanmıştır. Bu sayede, sık kullanılan yolları ve üretim derlemelerini izlemek için uygundur. Tarayıcının dahili performans zaman çizelgesine giriş eklemez.

2. Kullanıcı Zamanlamaları API'si (performance.mark ve performance.measure kullanılarak)

Bu API, mevcut Kullanıcı Zamanlamaları API'sini kullanır. Ayrıca, tarayıcının dahili performans zaman çizelgesine girişler ekleyerek daha fazla analiz ve diğer performans araçlarıyla entegrasyon sağlar.

Temel avantajlar

Her iki API de şunları sunar:

• Özel kanallar: Kodunuzun benzersiz performans özelliklerini temsil etmek için özel kanallar ve kanal grupları ekleyin.
• Girişler: Bu kanalları, önemli etkinlikleri veya belirli bir işlemin süresini net bir şekilde işaretleyen girişlerle doldurun.
• Renk Özelleştirme: Farklı etkinlik veya ölçüm türlerini görsel olarak bir bakışta ayırt etmek için renk kodlamasını kullanın.

İhtiyaçlarınıza uygun API'yi seçme:

• console.timeStamp API:

  • Özellikle üretim derlemelerinde, araçların performans üzerindeki etkisi birincil öneme sahiptir.
  • Ek meta verilere gerek kalmadan süreleri veya etkinlikleri işaretlemenin hızlı ve etkili bir yolunu arıyorsunuz.
  • Verilerin yalnızca Performans panelinde görselleştirilmesi gerekir.

• User Timings API (performance.mark, performance.measure):

  • Her girişle birlikte ek veri depolamanız gerektiğinde ve Kullanıcı Zamanlamaları API'sini zaten kullanıyorsanız bu yöntemi tercih edin.
  • Performans girişlerinizle zengin verileri (ipuçları, ayrıntılı özellikler) ilişkilendirmeniz gerekir.
  • Belirli anları vurgulamak için görsel işaretler eklemek istiyorsunuz.
  • Verilerin yalnızca Geliştirici Araçları'nda değil, daha kapsamlı analiz veya diğer araçlar için tarayıcının dahili performans zaman çizelgesinde de kullanılabilir olmasını istiyorsunuz.
  • Kullanıcı Zamanlamaları API'si hakkında bilginiz var veya bu API'yi kullanıyorsunuz.

Verilerinizi console.timeStamp ile besleyin

console.timeStamp API, özellikle Geliştirici Araçları bir iz kaydetmediğinde minimum ek yükle Performans panelinde özel zamanlama girişleri oluşturulmasına olanak tanıyacak şekilde genişletildi.

console.timeStamp(label: string, start?: string|number, end?: string|number, trackName?: string, trackGroup?: string, color?: DevToolsColor);

• label:

  Zamanlama girişinin etiketi.

• start (isteğe bağlı):

  • Dize olarak tanımlanırsa: Daha önce kaydedilmiş bir zaman damgasının adı (console.timeStamp(timeStampName) kullanılarak).

  • Sayı olarak tanımlanırsa: Zamanlama girişinin başlangıç zamanını temsil eden, Performance.timeOrigin'e göre milisaniye cinsinden bir zaman damgası (örneğin, performance.now() ile alınır).

  • Tanımlanmamışsa başlangıç zamanı olarak geçerli zaman kullanılır.

• end:

  • Dize olarak tanımlanırsa: Önceden kaydedilmiş bir zaman damgasının adı.

  • Sayı olarak tanımlanmışsa: Zamanlama girişinin bitiş zamanını temsil eden, Performance.timeOrigin'e göre milisaniye cinsinden bir zaman damgası (örneğin, performance.now() ile alınır).

  • Tanımlanmamışsa bitiş zamanı olarak geçerli saat kullanılır.

• trackName:

  Özel parçanın adı.

• trackGroup:

  Parça grubunun adı.

• color:

  Girişin rengi.

Kullanıcı Zamanlamaları API'si ile verilerinizi ekleme

Özel veriler eklemek için performance.mark ve performance.measure yöntemlerinin detail özelliğine bir devtools nesnesi ekleyin. Bu devtools nesnesinin yapısı, verilerinizin Performans panelinde nasıl görüntüleneceğini belirler.

• Anlık bir etkinliği veya zaman damgasını zaman çizelgesine kaydetmek için performance.mark simgesini kullanın. Belirli bir işlemin başlangıcını veya sonunu ya da süresi olmayan herhangi bir önemli yeri işaretleyebilirsiniz. devtools nesnesini detail özelliği içine eklediğinizde Performans panelindeki Zamanlamalar parçasında özel bir işaretçi gösterilir.

• Bir görevin veya sürecin süresini ölçmek için performance.measure kullanın. detail özelliğine bir devtools nesnesi eklediğinizde Performans panelinde, zaman çizelgesinde özel bir kanalda özel ölçüm girişleri gösterilir. performance.measure oluşturmak için referans noktası olarak performance.mark kullanıyorsanız performance.mark çağrılarına devtools nesnesini eklemeniz gerekmez.

devtools nesnesi

Bu türler, farklı uzantı özellikleri için devtools nesnesinin yapısını tanımlar:

type DevToolsColor =
  "primary" | "primary-light" | "primary-dark" |
  "secondary" | "secondary-light" | "secondary-dark" |
  "tertiary" | "tertiary-light" | "tertiary-dark" |
  "error";

interface ExtensionTrackEntryPayload {
  dataType?: "track-entry"; // Defaults to "track-entry"
  color?: DevToolsColor;    // Defaults to "primary"
  track: string;            // Required: Name of the custom track
  trackGroup?: string;      // Optional: Group for organizing tracks
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

interface ExtensionMarkerPayload {
  dataType: "marker";       // Required: Identifies as a marker
  color?: DevToolsColor;    // Defaults to "primary"
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

Verilerinizi zaman çizelgesinde görüntüleme

Zaman çizelgesinde özel verilerinizi görmek için Performans panelinde ayarın açık olduğundan emin olun: settings Ayarları yakala > check_box Özel izleri göster.

Bu demo sayfasında deneyin. Performans kaydı başlatın, demo sayfasında Add new Corgi'yi (Yeni Corgi ekle) tıklayın ve kaydı durdurun. İzde, özel ipuçları içeren etkinliklerin bulunduğu özel bir parça, Özet sekmesinde ayrıntılar ve iz özetinde özel parça grubu özetleri görürsünüz.

Kod örnekleri

Mevcut her mekanizmayı kullanarak kendi verilerinizi Performans paneline eklemek için API'yi nasıl kullanacağınızla ilgili birkaç örneği aşağıda bulabilirsiniz.

console.timeStamp API örnekleri:

// Take a start timestamp
const start = performance.now();

// Measure duration from start to now
console.timeStamp("measure 1", start, undefined, "My Track", "My Group", "primary-light");

// Take an end timestamp
const end = performance.now();

// Measure duration from start to end
console.timeStamp("measure 2", start, end, "My Track", "My Group", "secondary-dark");

Bu, performans zaman çizelgesinde aşağıdaki özel parça girişine neden olur:

Kullanıcı Zamanlamaları API'si Örnekleri:

Sonraki bölümlerde, performans zaman çizelgesine aşağıdakileri nasıl ekleyeceğinizi gösteren kod örneklerini bulabilirsiniz:

• Zaman çizelgesine özel nesne dosyaları ve girişler ekleme
• Zamanlama parçasına işaretçi ekleme

Özel kanallar ve girişler

Performans verilerinizi özel bir kanalda görselleştirmek için özel kanallar oluşturun ve bunları girişlerle doldurun. Örneğin:

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
  start: imageProcessinTimeStart,
  detail: {
    devtools: {
      dataType: "track-entry",
      track: "Image Processing Tasks",
      trackGroup: "My Tracks", // Group related tracks together
      color: "tertiary-dark",
      properties: [
        ["Filter Type", "Gaussian Blur"],
        ["Resize Dimensions", "500x300"]
      ],
      tooltipText: "Image processed successfully"
    }
  }
});

Bu, performans zaman çizelgesinde aşağıdaki özel parça girişinin yanı sıra ipucu metni ve özellikleriyle sonuçlanır:

İşaretçiler

Tüm parçalara yayılan özel işaretçilerle zaman çizelgesindeki belirli ilgi alanlarını görsel olarak vurgulayın. Örneğin:

// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
  detail: {
    devtools: {
      dataType: "marker",
      color: "secondary",
      properties: [
        ["Image Size", "2.5MB"],
        ["Upload Destination", "Cloud Storage"]
      ],
      tooltipText: "Processed image uploaded"
    }
  }
});

Bu işlem, Zamanlamalar kanalında aşağıdaki işaretçinin yanı sıra ipucu metni ve özelliklerini oluşturur: