Performans verilerinizi extensibility API ile özelleştirin

Andrés Olivares

Sofia Emelianova

Genel Bakış

Performans paneli, performans genişletilebilirlik API'sini destekleyerek performans zaman çizelgesine özel verilerin eklenmesini sağlar. Bu sayede ölçümlerinizi ve etkinliklerinizi doğrudan performans zaman çizelgesine özel parça olarak veya Zamanlamalar parçasına ekleyebilirsiniz. Bu, performansı daha kapsamlı bir şekilde anlamak isteyen, özel enstrümasyona sahip çerçeve, kitaplık ve karmaşık uygulama geliştiricileri için yararlı olabilir.

Bu API iki farklı mekanizma sunar:

1. User Timings API (performance.mark ve performance.measure kullanılarak)

Bu API, mevcut User Timings API'den yararlanır. Ayrıca, tarayıcıya dahili performans zaman çizelgesi girişleri ekleyerek daha fazla analiz ve diğer performans araçlarıyla entegrasyon sağlar.

2. console.timeStamp API'si (Geliştirme Araçları için genişletilmiş)

Bu API, uygulamaların enstrümante edilmesi ve zamanlama verilerinin yalnızca DevTools'daki Performans panelinde gösterilmesi için yüksek performanslı bir yöntem sağlar. Minimum çalışma zamanı yükü için tasarlandığından, yoğun yollar ve üretim derlemeleri için enstrümantasyona uygundur. Tarayıcıya dahili performans zaman çizelgesi girişleri eklenmez.

Temel özellikler

Her iki API de şunları sunar:

• Özel Parçalar: Özel parçalara ve parça gruplarına giriş ekleyin.
• Girişler: Parçaları, etkinlikleri veya ölçümleri temsil eden girişlerle doldurun.
• Renk Özelleştirme: Görsel ayrım için girişleri renk koduyla işaretleme.

Önemli Farklılıklar ve her API'nin ne zaman kullanılacağı:

• User Timings API (performance.mark, performance.measure):
  • Hem Performans paneline hem de tarayıcının dahili performans zaman çizelgesine girişler ekler.
  • İpuçları ve ayrıntılı özellikler gibi zengin verilere olanak tanır.
  • İşaretçi eklemenize olanak tanır: Zaman çizelgesindeki belirli anları görsel işaretçilerle vurgulayın.
  • Ayrıntılı performans analizi için ve diğer performans araçlarıyla entegrasyon gerektiğinde uygundur.
  • Her girişle birlikte ek veri depolamanız gerektiğinde ve zaten User Timings API'yi kullanıyorsanız kullanın.
• console.timeStamp API:
  • Girişleri yalnızca Performans paneline ekler.
  • Özellikle üretim ortamlarında önemli ölçüde daha yüksek performans sunar.
  • Yoğun kullanılan yollar ve performans açısından kritik kodları ayarlamak için idealdir.
  • İpucu veya özellik gibi ek veriler eklenemez.
  • Performans yükü birincil endişeniz olduğunda ve kodu hızlı bir şekilde enstrümante etmeniz gerektiğinde kullanın.

Verilerinizi User Timings API ile ekleme

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

• Zaman çizelgesinde anlık bir etkinlik veya zaman damgası kaydetmek için performance.mark simgesini kullanın. Belirli bir işlemin veya süresi olmayan herhangi bir önemli yerin başlangıcını ya da sonunu işaretleyebilirsiniz. detail mülküne bir devtools nesnesi eklediğinizde Performans panelinde Zamanlamalar kanalı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 mülküne bir devtools nesnesi eklediğinizde Performans paneli, zaman çizelgesinde özel bir kanalda özel ölçüm girişlerini gösterir. 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 console.timeStamp ile ekleme

console.timeStamp API, Performans panelinde en az ek yük ile özel zamanlama girişleri oluşturulmasına olanak tanıyacak şekilde genişletildi.

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

• label: Zamanlama girişinin etiketi.
• start: Daha önce kaydedilmiş bir zaman damgasının adı (console.timeStamp(timeStampName) kullanılarak). Tanımlanmamışsa mevcut saat kullanılır.
• end: Daha önce kaydedilmiş bir zaman damgasının adı. Tanımlanmamışsa geçerli saat kullanılır.
• trackName: Özel kanalın adı.
• trackGroup: Parça grubunun adı.
• color: Girişin rengi.

Verilerinizi zaman çizelgesinde görüntüleme

Zaman çizelgesinde özel verilerinizi görmek için Performans panelinde ayarlar Kayıt ayarları > onay_kutusu Uzatma verileri'ni etkinleştirin.

Bu demo sayfasında deneyin. Uzantı verileri'ni etkinleştirin, performans kaydı başlatın, demo sayfasında Yeni Corgi ekle'yi tıklayın ve ardından kaydı durdurun. İzlemede, Özet sekmesinde özel ipuçları ve ayrıntılar içeren etkinlikler içeren özel bir kanal görürsünüz.

Kod örnekleri

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

User Timings API örnekleri:

Sonraki bölümlerde, performans zaman çizelgesine aşağıdakilerin nasıl ekleneceğini gösteren kod örneklerini görebilirsiniz:

• Zaman çizelgesine özel parçalar ve girişler
• Zamanlamalar kanalındaki işaretçiler

Ö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
performance.mark("Image Processing Start");

// ... 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: "Image Processing Start",
  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 işlem, performans zaman çizelgesinde, ipucu metni ve özellikleriyle birlikte aşağıdaki özel kanal girişini oluşturur:

İşaretçiler

Tüm parçaları kapsayan özel işaretçilerle zaman çizelgesinde belirli önemli noktaları 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 parçasında, ipucu metni ve özellikleriyle birlikte aşağıdaki işaretçiyi oluşturur:

console.timeStamp API Örnekleri:

// Record a start timestamp
console.timeStamp("start");

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

// Record an end timestamp
console.timeStamp("end");

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

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