Anpassen des Leistungsprofils mit Erweiterbarkeits-APIs

Ausführlicher Inhalt:

• Übersicht
• Hauptvorteile
  • Auswählen der richtigen API
• Einfügen Ihrer Daten mit console.timeStamp()
• Einfügen Ihrer Daten mit der Benutzersteuerungs-API
  • devtools Objekt
• Anzeigen ihrer benutzerdefinierten Daten im Leistungsprofil
• Codebeispiele
  • console.timeStamp() API-Beispiele
  • Api-Beispiele für Benutzerzeitsteuerungen
    • Hinzufügen von benutzerdefinierten Spuren und Einträgen zum Zeitleiste (performance.measure())
    • Hinzufügen von Markern zum Zeitsteuerungstrack (performance.mark())
• Siehe auch

Übersicht

Das Leistungstool kann zusätzlich zu den integrierten Metriken des Browsers auch eigene Leistungsdaten anzeigen. Das Anzeigen eigener benutzerdefinierter Leistungsdaten im Leistungstool kann in Folgenden Fällen nützlich sein:

• Beim Erstellen eines Frameworks müssen Sie interne Prozesse visualisieren.
• Wenn Sie eine Bibliothek entwickeln, möchten Sie die Auswirkungen Ihres Codes nachverfolgen.
• Erstellen einer komplexen Webanwendung mit viel clientseitiger Verarbeitung.

Die APIs zur Leistungserweiterbarkeit ermöglichen es, zu verstehen, was in Ihrem Code geschieht.

Durch Einfügen von benutzerdefinierten Messungen und Ereignissen können Sie maßgeschneiderte Visualisierungen im Leistungstool erstellen.

Die Leistungserweiterbarkeits-APIs sind zwei Ansätze, um dies zu erreichen:

1. Die console.timeStamp() API (erweitert für DevTools)

   Diese API bietet eine hochleistungsfähige Methode zum Instrumentieren von Anwendungen und zum Anzeigen von Zeitsteuerungsdaten ausschließlich für das Leistungstool in DevTools. Es ist für einen minimalen Laufzeitaufwand konzipiert und eignet sich daher für die Instrumentierung von heißen Pfaden und Produktionsbuilds. Es werden keine Einträge zur internen Leistung des Browsers Zeitleiste hinzugefügt.

2. Die Benutzersteuerungs-API (mit performance.mark() und performance.measure())

   Diese API nutzt die vorhandene Benutzerzeitsteuerungs-API. Es fügt auch Einträge zur internen Leistung Zeitleiste des Browsers hinzu, was eine weitere Analyse und Integration in andere Leistungstools ermöglicht. Weitere Informationen finden Sie unter Leistungs-APIs bei MDN.

Im obigen Screenshot wurden die folgenden Felder hinzugefügt, um die Ergebnisse hervorzuheben:

• Rotes Feld im Track "Timings ": performance.mark(). Die benutzerdefinierten Marker sind Filterung starten, Filterung abgeschlossen und Foto ausgewählt. Vertikale gestrichelte Linien erstrecken sich über alle Spuren.

• Blaues Feld im benutzerdefinierten Fotoerstellungspfad : performance.measure()

• Grünes Feld in der benutzerdefinierten Konsolenzeitstempel-Spur : console.timeStamp()

Hauptvorteile

Beide APIs bieten Folgendes:

• Benutzerdefinierte Spuren: Fügen Sie dedizierte Titel und Nachverfolgungsgruppen in einem Leistungsprofil hinzu, um die einzigartigen Leistungsaspekte Ihres Codes darzustellen.

• Einträge: Füllen Sie diese Spuren mit Einträgen auf, die wichtige Ereignisse oder die Dauer eines bestimmten Vorgangs eindeutig kennzeichnen.

• Farbanpassung: Verwenden Sie die Farbcodierung, um verschiedene Arten von Ereignissen oder Messungen auf einen Blick visuell zu unterscheiden.

Auswählen der richtigen API

Die console.timeStamp() API und die Api für Benutzerzeitsteuerungen erfüllen unterschiedliche Anforderungen.

Verwenden Sie die console.timeStamp() API in folgenden Fällen:

• Die Auswirkungen der Instrumentierung auf die Leistung sind ein hauptanliegend, insbesondere in Produktionsbuilds.

• Sie benötigen eine schnelle und effiziente Möglichkeit, Daueren oder Ereignisse ohne zusätzliche Metadaten zu markieren.

• Die Daten müssen nur im Leistungstool visualisiert werden.

Verwenden Sie die Benutzersteuerungs-API (performance.mark() oder performance.measure()), wenn:

• Sie müssen zusätzliche Daten mit jedem Eintrag und speichern, wenn Sie bereits die Benutzerzeitsteuerungs-API verwenden.

• Sie müssen Ihren Leistungseinträgen umfangreiche Daten (QuickInfos, detaillierte Eigenschaften) zuordnen.

• Sie möchten visuelle Marker hinzufügen, um bestimmte Momente hervorzuheben.

• Sie müssen die Daten nicht nur in DevTools, sondern auch in der internen Leistung des Browsers Zeitleiste für eine umfassendere Analyse oder andere Tools verfügbar sein.

• Sie sind bereits mit der Benutzerzeitsteuerungs-API vertraut oder verwenden.

Die Fotogalerie-Demo veranschaulicht alle diese APIs.

Einfügen Ihrer Daten mit console.timeStamp()

Die console.timeStamp() API wurde erweitert, um die Erstellung von benutzerdefinierten Zeitsteuerungseinträgen im Leistungstool mit minimalem Mehraufwand zu ermöglichen, insbesondere wenn DevTools keine Ablaufverfolgung aufzeichnet.

Syntax:

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

• label:

  Die Bezeichnung für den Zeitsteuerungseintrag.

• start (optional):

  • Wenn als Zeichenfolge definiert: Der Name eines zuvor aufgezeichneten Zeitstempels (mit console.timeStamp(timeStampName)).

  • Bei Definition als Zahl: Ein Zeitstempel in Millisekunden relativ zu Performance.timeOrigin (z. B. mit performance.now()), der die Startzeit des Zeitsteuerungseintrags darstellt.

  • Wenn nicht definiert, wird die aktuelle Zeit als Startzeit verwendet.

• end:

  • Wenn als Zeichenfolge definiert: Der Name eines zuvor aufgezeichneten Zeitstempels.

  • Bei Definition als Zahl: Ein Zeitstempel in Millisekunden relativ zu Performance.timeOrigin (z. B. mit performance.now()), der die Endzeit des Zeitsteuerungseintrags darstellt.

  • Wenn nicht definiert, wird die aktuelle Zeit als Endzeit verwendet.

• trackName:

  Der Name des benutzerdefinierten Titels.

• trackGroup:

  Der Name der Titelgruppe.

• color:

  Die Farbe des Eintrags.

Siehe auch:

• Spezifikation für die console.timeStamp-Erweiterung : Version der Methode mit 6 Parametern.
  • console: statische timeStamp()-Methode – 1-Parameterversion der Methode.

Einfügen Ihrer Daten mit der Benutzersteuerungs-API

Um benutzerdefinierte Daten einzufügen, schließen Sie ein devtools -Objekt in die detail-Eigenschaft der performance.mark() -Methode oder in die Detaileigenschaft der performance.measure() -Methode ein. Die Struktur dieses devtools Objekts bestimmt, wie Ihre Daten im Leistungstool angezeigt werden.

• Verwenden Sie performance.mark(), um ein sofortiges Ereignis oder einen Zeitstempel im Zeitleiste aufzuzeichnen. Sie können den Anfang oder das Ende eines bestimmten Vorgangs oder eines beliebigen Point of Interest markieren, der keine Dauer hat. Wenn Sie ein devtools Objekt in die detail -Eigenschaft einschließen, zeigt das Leistungstool einen benutzerdefinierten Marker in der Zeitsteuerungsspur an.

• Verwenden Sie performance.measure(), um die Dauer eines Vorgangs oder Prozesses zu messen. Wenn Sie ein devtools -Objekt in die detail -Eigenschaft einschließen, zeigt das Leistungstool benutzerdefinierte Messeinträge im Zeitleiste in einer benutzerdefinierten Spur an. Wenn Sie als Referenzpunkt zum Erstellen eines performance.measure()verwendenperformance.mark(), müssen Sie das devtools -Objekt nicht in performance.mark() Aufrufe einschließen.

devtools Objekt

Diese Typen definieren die Struktur des devtools -Objekts für verschiedene Erweiterungsfeatures:

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
}

Anzeigen ihrer benutzerdefinierten Daten im Leistungsprofil

Um Ihre benutzerdefinierten Daten in einem aufgezeichneten Leistungsprofil anzuzeigen, verwenden Sie im Leistungstool zuerst eine der Leistungserweiterungs-APIs, und zeichnen Sie dann ein Profil auf.

So zeichnen Sie ein Profil auf und zeigen die benutzerdefinierten Leistungsdaten der Fotogalerie-Demoseite an:

1. Öffnen Sie die Fotogalerie-Demowebseite in einem neuen Fenster oder einer neuen Registerkarte.

   Oder, um den Beispielcode ändern zu können:

   1. Klonen Sie das Repository "MicrosoftEdge/Demos", per Klonen Sie das Edge-Demos-Repository auf Ihr Laufwerk.
   2. Starten Sie einen localhost-Server im geklonten /demos/ Verzeichnis unter Starten des localhost-Servers unter Beispielcode für DevTools.
   3. Wechseln Sie im Browser in einem neuen Fenster oder einer neuen Registerkarte zu http://localhost:8080/photo-gallery/ oder zu einer entsprechenden.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Leistung () aus.

4. Klicken Sie im Leistungstool auf die Schaltfläche Einstellungen erfassen ( erfassen"), und stellen Sie dann sicher, dass das Kontrollkästchen Benutzerdefinierte Spuren anzeigen aktiviert ist:

   

5. Wählen Sie in der Dropdownliste CPU-Drosselung die Option 4x Verlangsamung – empfohlen aus.

   Der Registerkarte Leistung wird ein Drosselungswarnungsindikator hinzugefügt.

6. Aktualisieren Sie die Seite, um alle Auswahlen zu löschen.

7. Klicken Sie auf die Schaltfläche Datensatz ().

8. Wechseln Sie oben auf der Demoseite im Dropdownmenü Kamera () auf der linken Seite von Alle zu Apple iPhone 12.

9. Ändern Sie den Kamerafilter wieder in Alle.

10. Klicken Sie auf das erste Foto.

    Das Foto wird erweitert.

11. Klicken Sie in DevTools auf die Schaltfläche Beenden .

    Das Profil wird angezeigt.

12. Klicken Sie auf DevTools anpassen und steuern (), und wählen Sie dann neben Dockspeicherort die Option In separates Fenster ausocken (").

    DevTools ist in ein eigenes Fenster getrennt, sodass es einfacher ist, mehr Daten zu sehen.

13. Scrollen Sie nach unten zur Gruppe Benutzerdefinierte Leistungsdauern – Benutzerdefinierte Titelverfolgung , und erweitern Sie sie.

14. Erweitern Sie die benutzerdefinierten Spuren:

    • Fotoerstellung
    • Konsolenzeitstempelverfolgung

15. Verwenden Sie die Maus- und Pfeiltasten, um das Profil zu verschieben und zu vergrößern, um die benutzerdefinierten Leistungskennzahlen anzuzeigen:

    

16. Zeigen Sie auf einen Marker in einer benutzerdefinierten Spur, z. B. auf eine Lademarkierung im Ladepfad .

    Eine benutzerdefinierte QuickInfo wird angezeigt, einschließlich Dauer und Untertitel.

17. Wählen Sie einen Marker in einem benutzerdefinierten Titel aus.

    Auf der Registerkarte Zusammenfassung am unteren Rand des Leistungstools werden Details für den Marker angezeigt.

Der Code, der diese benutzerdefinierten Leistungskennzahlen definiert, wird unter Hinzufügen von benutzerdefinierten Spuren und Einträgen zum Zeitleiste (performance.measure()) unten gezeigt.

Codebeispiele

Im Folgenden finden Sie einige Beispiele für die Verwendung der API zum Hinzufügen eigener Daten zum Leistungstool mithilfe der einzelnen verfügbaren Mechanismen.

console.timeStamp() API-Beispiele

Beispielsweise definiert die loadPhoto() Funktion in photo-gallery/gallery.jsein startTime und endTime durch Aufruf performance.now()von und ruft dann aufconsole.timeStamp(), um die Zeit anzuzeigen, die zum Laden eines Fotos benötigt wird, nachdem auf dieses Foto geklickt wurde:

// Load a photo and return a promise that resolves when the photo is loaded.
function loadPhoto(fileName) {
  // Record the start time of the photo loading for performance tracking.
  const startTime = performance.now();

  return new Promise(resolve => {
    // Load the image by creating a new image element.
    const imageEl = document.createElement("img");
    imageEl.src = fileName;

    // Listen for the load event to resolve the promise when the image is loaded.
    imageEl.addEventListener('load', () => {
      // Record the end time of the photo loading.
      const endTime = performance.now();

      // Display the photo loading duration in the Performance tool, by using console.timeStamp.
      console.timeStamp("Loading photo",              // label
                        startTime,                    // start
                        endTime,                      // end
                        "Console timestamp track",    // trackName
                        "Custom performance timings", // trackGroup
                        "primary-dark");              // color

      resolve(imageEl);
    }, { once: true });
  });
}

So zeigen Sie das resultierende Profil an:

1. Führen Sie die Schritte unter Anzeigen Ihrer benutzerdefinierten Daten im Leistungsprofil weiter oben aus.

2. Scrollen Sie nach unten zur Gruppe Benutzerdefinierte Leistungsdauern – Benutzerdefinierte Titelverfolgung , und erweitern Sie sie.

3. Erweitern Sie die Konsolenzeitstempelspur.

4. Verwenden Sie die Maus- und Pfeiltasten, um das Profil zu verschieben und zu vergrößern, um die benutzerdefinierten Leistungskennzahlen anzuzeigen:

   

   Das Fotoereignis Loading wurde mit console.timeStamp()erstellt. Dieses Ereignis hat eine Dauer, da es mit einer Start- und einer Endzeit erstellt wird. Dieses Ereignis entspricht der Zeit, die zum Laden der Vollbildversion des Fotos benötigt wird, auf das Sie geklickt haben.

Siehe auch:

• Einfügen Ihrer Daten mit console.timeStamp() (oben) - Syntax.
• performance.now()

Api-Beispiele für Benutzerzeitsteuerungen

In den nächsten Abschnitten sehen Sie sich die Codebeispiele an, in denen veranschaulicht wird, wie Der Leistungs-Zeitleiste Folgendes hinzugefügt werden kann:

• Hinzufügen von benutzerdefinierten Spuren und Einträgen zum Zeitleiste (performance.measure())
• Hinzufügen von Markern zum Zeitsteuerungstrack (performance.mark())

Hinzufügen benutzerdefinierter Spuren und Einträge zum Zeitleiste (performance.measure())

Erstellen Sie benutzerdefinierte Titel, und füllen Sie sie mit Einträgen auf, um Ihre Leistungsdaten in einem benutzerdefinierten Titel zu visualisieren.

Beispielsweise definiert die populateGallery() Funktion in photo-gallery/gallery.jsein startTime und endTime durch Aufrufen performance.now()von und ruft dann aufperformance.measure(), um die Zeit anzuzeigen, die zum Erstellen eines Fotos im Katalog benötigt wird:

// Populate the gallery with the given images.
function populateGallery(images) {
  // Empty the existing gallery elements.
  galleryEl.innerHTML = '';

  // Iterate over the images.
  images.forEach(({ file, user, description, w, h, meta }) => {
    // Record the start time of this image creation for performance tracking.
    const startTime = performance.now();

    // Create the necessary DOM elements, and append them to the gallery.
    const liEl = createImageDOM(file, user, description, meta, w, h);
    galleryEl.appendChild(liEl);

    // Record the end time of this image creation.
    const endTime = performance.now();

    // Display the image creation duration in the Performance tool
    // by using the performance.measure API, with the devtools
    // object.
    performance.measure(`Image ${file} created`, {
      start: startTime,
      end: endTime,
      detail: {
        devtools: {
          dataType: "track-entry",
          color: "primary",
          trackGroup: "Custom performance timings",
          track: "Photo creation",
          properties: [
            ['File', file],
            ['Width', w],
            ['Height', h],
            ['User', user],
          ],
          tooltipText: `Image ${file} created`
        }
      },
    });
  });
}

So zeigen Sie das resultierende Profil an:

1. Führen Sie die Schritte unter Anzeigen Ihrer benutzerdefinierten Daten im Leistungsprofil weiter oben aus.

2. Scrollen Sie nach unten zur Gruppe Benutzerdefinierte Leistungsdauern – Benutzerdefinierte Titelverfolgung , und erweitern Sie sie.

3. Erweitern Sie den Fotoerstellungspfad .

4. Verwenden Sie die Maus- und Pfeiltasten, um das Profil zu verschieben und zu zoomen, um die benutzerdefinierten Leistungskennzahlen anzuzeigen.

   Dies führt zu dem folgenden benutzerdefinierten Titeleintrag in der Leistungs-Zeitleiste zusammen mit dem QuickInfo-Text und den Eigenschaften:

   

   Die Ereignisse, die von performance.measure() erstellt werden, haben eine kurze Dauer, sodass Sie vergrößern müssen, um sie im Profil anzuzeigen. Jedes dieser Ereignisse zeichnet die Erstellung eines Bilds auf, die geschieht, wenn Sie den Filterwert (Dropdownliste) ändern und die gesamte Katalogbenutzeroberfläche aktualisiert wird.

   Die Fotoerstellungsereignisse werden zwischen den Start filtering Leistungszeichen und Done filtering angezeigt, die sich aus performance.mark() ergeben (im nächsten Abschnitt behandelt):

   

Siehe auch:

• performance.measure()
• performance.now()

Hinzufügen von Markern zum Zeitsteuerungstrack (performance.mark())

Markieren Sie bestimmte Interessante Punkte im Zeitleiste visuell mit benutzerdefinierten Markern, die sich über alle Spuren erstrecken.

Beispielsweise verarbeitet input ein Ereignislistener in Fotogalerie/gallery.jsEreignisse in den Filterdroplisten der Demoseite. Der Ereignislistener ruft zweimal auf performance.mark() : bevor der neue Filter angewendet wird und nachdem der neue Filter angewendet wurde:

// Handle input events on the filter selects.
addEventListener('input', e => {
  // Check if the input event is from a filter select.
  // If not, return early.
  const filter = e.target.closest('.filter select');
  if (!filter) {
    return;
  }

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a filter will be applied.
  performance.mark("Start filtering", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "secondary",
        properties: [
          ['Filter Value', filter.value]
        ],
        tooltipText: "Start filtering"
      }
    }
  });

  // Reset the other filters.
  filterEl.querySelectorAll('.filter select').forEach(select => {
    if (select !== filter) {
      select.selectedIndex = 0;
    }
  });

  // Apply the filter based on the selected value.
  filterBy(filter);

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a filter was applied.
  performance.mark("Done filtering", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "tertiary",
        properties: [
          ['Filter Value', filter.value]
        ],
        tooltipText: "Done filtering"
      }
    }
  });
});

// Handle click events on photos.
addEventListener('click', e => {
  const clickedPhoto = e.target.tagName === 'IMG' && e.target.closest('.photo');
  if (!clickedPhoto) {
    return;
  }

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a photo was clicked.
  performance.mark("Photo selected", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "secondary-dark",
        properties: [
          ['photo', clickedPhoto.src]
        ],
        tooltipText: "Photo selected"
      }
    }
  });

  selectPhoto(clickedPhoto);
});

So zeigen Sie das resultierende Profil an:

1. Führen Sie die Schritte unter Anzeigen Ihrer benutzerdefinierten Daten im Leistungsprofil weiter oben aus.

2. Verwenden Sie die Maus- und Pfeiltasten, um das Profil zu verschieben und zu zoomen, um die benutzerdefinierten Leistungskennzahlen anzuzeigen.

   Im Zeitsteuerungs-Track werden Filterung starten, Filterung abgeschlossen und ausgewählte benutzerdefinierte Marker für Foto angezeigt:

   

   Die von performance.mark() erstellten Ereignisse (Marker) weisen keine Dauer auf. Sie markieren nur einige interessante Ereignisse in einem Profil: den Anfang und das Ende einer Filteränderung (mithilfe der Dropdownmenüs der Demoseite) und den Moment, zu dem ein Foto ausgewählt wurde (die Markierung Foto ausgewählt ).

Siehe auch:

• Leistung: mark()-Methode

Siehe auch

MDN:

• Spezifikation für die console.timeStamp-Erweiterung : Version der Methode mit 6 Parametern.
  • console: statische timeStamp()-Methode – 1-Parameterversion der Methode.
• Leistungs-APIs
  • Benutzersteuerung in Web-APIs > Leistungs-APIs.
• Leistung: mark()-Methode
• Leistung: measure()-Methode
• Leistung: now()-Methode
• Leistung: timeOrigin-Eigenschaft

Demos:

• Fotogalerie : Die ausgeführte Web-App.
  • photo-gallery/gallery.js : Quellcode.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wird von Andrés Olivares und Sofia Emelianova geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.