Personalización del perfil de rendimiento con api de extensibilidad

Contenido detallado:

• Información general
• Ventajas principales
  • Elección de la API adecuada
• Inyección de datos con console.timeStamp()
• Inyección de datos con la API de tiempos de usuario
  • devtools objeto
• Visualización de los datos personalizados en el perfil de rendimiento
• Ejemplos de código
  • console.timeStamp() Ejemplos de API
  • Ejemplos de API de control de tiempo de usuario
    • Agregar pistas y entradas personalizadas a la escala de tiempo (performance.measure())
    • Agregar marcadores a la pista De tiempos (performance.mark())
• Ver también

Información general

La herramienta Rendimiento puede mostrar sus propios datos de rendimiento, además de las métricas integradas del explorador. Mostrar sus propios datos de rendimiento personalizados en la herramienta Rendimiento puede ser útil en casos como cuando se encuentra:

• Crear un marco de trabajo y debe visualizar los procesos internos.
• Desarrollar una biblioteca y desea realizar un seguimiento del impacto del código.
• Creación de una aplicación web compleja con una gran cantidad de procesamiento del lado cliente.

Las API de extensibilidad de rendimiento permiten comprender lo que sucede en el código.

Al insertar medidas y eventos personalizados, puede crear visualizaciones personalizadas dentro de la herramienta Rendimiento .

Las API de extensibilidad de rendimiento son dos enfoques para lograr esto:

1. La console.timeStamp() API (extendida para DevTools)

   Esta API proporciona un método de alto rendimiento para instrumentar aplicaciones y navegar datos de tiempo exclusivamente a la herramienta performance en DevTools. Está diseñado para una sobrecarga mínima en tiempo de ejecución, lo que la hace adecuada para instrumentar rutas de acceso frecuentes y compilaciones de producción. No agrega entradas a la escala de tiempo de rendimiento interna del explorador.

2. Api de control de tiempo de usuario (mediante performance.mark() y performance.measure())

   Esta API aprovecha la API de tiempos de usuario existente. También agrega entradas a la escala de tiempo de rendimiento interna del explorador, lo que permite un análisis e integración adicionales con otras herramientas de rendimiento; consulte API de rendimiento en MDN.

En la captura de pantalla anterior se han agregado los siguientes cuadros para resaltar los resultados:

• Cuadro rojo en la pista De tiempos : performance.mark(). Los marcadores personalizados son Iniciar filtrado, Filtrado listo y Foto seleccionados. Las líneas discontinuas verticales abarcan todas las pistas.

• Cuadro azul en la pista de creación de fotos personalizada: performance.measure()

• Cuadro verde en la pista de seguimiento de marca de tiempo de consola personalizada: console.timeStamp()

Ventajas principales

Ambas API ofrecen:

• Pistas personalizadas: Agregue pistas dedicadas y grupos de seguimiento, en un perfil de rendimiento, para representar los aspectos de rendimiento únicos del código.

• Entradas: Rellene estas pistas con entradas que marquen claramente eventos importantes o la duración de una operación específica.

• Personalización de color: Use la codificación de colores para distinguir visualmente diferentes tipos de eventos o medidas de un vistazo.

Elección de la API adecuada

Y console.timeStamp() la API de tiempos de usuario atienden diferentes necesidades.

Use la console.timeStamp() API cuando:

• El impacto en el rendimiento de la instrumentación es una preocupación principal, especialmente en las compilaciones de producción.

• Necesita una manera rápida y eficaz de marcar duraciones o eventos sin necesidad de metadatos adicionales.

• Solo necesita que los datos se visualicen dentro de la herramienta Rendimiento .

Use la API de control de tiempo de usuario (performance.mark() o performance.measure()) cuando:

• Debe almacenar datos adicionales con cada entrada y cuando ya esté usando la API de tiempos de usuario.

• Debe asociar datos enriquecidos (información sobre herramientas, propiedades detalladas) con las entradas de rendimiento.

• Quiere agregar marcadores visuales para resaltar momentos específicos.

• Necesita que los datos estén disponibles no solo en DevTools, sino también en la escala de tiempo de rendimiento interna del explorador para un análisis más amplio u otras herramientas.

• Ya está familiarizado con la API de tiempos de usuario o con ella.

La demostración de Photo Gallery muestra todas estas API.

Inyección de datos con console.timeStamp()

La console.timeStamp() API se extiende para permitir la creación de entradas de temporización personalizadas en la herramienta rendimiento con una sobrecarga mínima, especialmente cuando DevTools no está grabando un seguimiento.

Sintaxis:

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

• label:

  Etiqueta de la entrada de temporización.

• start (opcional):

  • Si se define como una cadena: el nombre de una marca de tiempo registrada anteriormente (mediante console.timeStamp(timeStampName)).

  • Si se define como un número: una marca de tiempo en milisegundos en relación con Performance.timeOrigin (por ejemplo, tomada con performance.now()) que representa la hora de inicio de la entrada de temporización.

  • Si no está definida, la hora actual se usa como hora de inicio.

• end:

  • Si se define como una cadena: el nombre de una marca de tiempo registrada anteriormente.

  • Si se define como un número: una marca de tiempo en milisegundos en relación con Performance.timeOrigin (por ejemplo, tomada con performance.now()) que representa la hora de finalización de la entrada de temporización.

  • Si no está definida, la hora actual se usa como hora de finalización.

• trackName:

  Nombre de la pista personalizada.

• trackGroup:

  Nombre del grupo de pistas.

• color:

  Color de la entrada.

Vea también:

• Especificación de la extensión console.timeStamp : versión de 6 parámetros del método.
  • console: método estático timeStamp(): versión de 1 parámetro del método.

Inyección de datos con la API de tiempos de usuario

Para insertar datos personalizados, incluya un devtools objeto dentro de la propiedad detail del performance.mark() método o dentro de la propiedad detail del performance.measure() método. La estructura de este devtools objeto determina cómo se muestran los datos en la herramienta Rendimiento .

• Use performance.mark() para registrar un evento instantáneo o una marca de tiempo en la escala de tiempo. Puede marcar el inicio o el final de una operación específica o cualquier punto de interés que no tenga una duración. Cuando se incluye un devtools objeto dentro de la detail propiedad , la herramienta Rendimiento muestra un marcador personalizado en la pista Timings .

• Use performance.measure() para medir la duración de una tarea o proceso. Cuando se incluye un devtools objeto dentro de la detail propiedad , la herramienta Rendimiento muestra entradas de medida personalizadas en la escala de tiempo de una pista personalizada. Si usa performance.mark() como punto de referencia para crear un performance.measure(), no es necesario incluir el devtools objeto en performance.mark() las llamadas.

devtools objeto

Estos tipos definen la estructura del devtools objeto para distintas características de extensión:

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
}

Visualización de los datos personalizados en el perfil de rendimiento

Para ver los datos personalizados en un perfil de rendimiento registrado, en la herramienta Rendimiento , use primero una de las API de extensibilidad de rendimiento y, a continuación, registre un perfil.

Para registrar un perfil y ver los datos de rendimiento personalizados de la página de demostración de photo gallery:

1. Abra la página web de demostración de Photo Gallery en una nueva ventana o pestaña.

   O bien, para poder modificar el código de ejemplo:

   1. Clone el repositorio "MicrosoftEdge/Demos", por clonación del repositorio de demostraciones de Edge en la unidad en código de ejemplo para DevTools.
   2. Inicie un servidor localhost en el directorio clonado /demos/ , según Iniciar el servidor localhost, en Código de ejemplo para DevTools.
   3. En el explorador, vaya a http://localhost:8080/photo-gallery/ o equivalente, en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Rendimiento ().

4. En la herramienta Rendimiento , haga clic en el botón Capturar configuración () y, a continuación, asegúrese de que la casilla Mostrar pistas personalizadas esté seleccionada:

   

5. En la lista desplegable Limitación de CPU , seleccione Ralentización 4 veces: recomendada.

   Se agrega un indicador de advertencia de limitación a la pestaña Rendimiento .

6. Actualice la página para borrar las selecciones.

7. Haga clic en el botón Grabar ().

8. En la parte superior de la página de demostración, en el menú desplegable Cámara () de la izquierda, cambie de Todo a Apple iPhone 12.

9. Vuelva a cambiar el filtro de cámara a Todo.

10. Haga clic en la primera foto.

    La foto se expande.

11. En DevTools, haga clic en el botón Detener .

    Se muestra el perfil.

12. Haga clic en Personalizar y controlar DevTools () y, a continuación, junto a Ubicación de acoplamiento, seleccione Desacoplar en una ventana independiente ().

    DevTools se desasocia en su propia ventana, por lo que es más fácil ver más datos.

13. Desplácese hacia abajo hasta Tiempos de rendimiento personalizados: grupo seguimiento personalizado y expándalo.

14. Expanda las pistas personalizadas:

    • Creación de fotos
    • Seguimiento de marca de tiempo de la consola

15. Use las teclas de mouse y flecha para desplazar y acercar el perfil para mostrar las medidas de rendimiento personalizadas:

    

16. Mantenga el puntero sobre un marcador de una pista personalizada, como un marcador de carga en la pista de carga .

    Se muestra una información sobre herramientas personalizada, incluida la duración y subtítulo.

17. Seleccione un marcador en una pista personalizada.

    En la pestaña Resumen de la parte inferior de la herramienta Rendimiento , se muestran los detalles del marcador.

El código que define estas medidas de rendimiento personalizadas se muestra en Agregar pistas y entradas personalizadas a la escala de tiempo (performance.measure()), a continuación.

Ejemplos de código

A continuación se muestran algunos ejemplos de cómo usar la API para agregar sus propios datos a la herramienta de rendimiento mediante cada mecanismo disponible.

console.timeStamp() Ejemplos de API

Por ejemplo, en photo-gallery/gallery.js, la loadPhoto() función define y startTimeendTime llamando a performance.now()y, a continuación, llama console.timeStamp() a para mostrar el tiempo necesario para cargar una foto después de hacer clic en esa foto:

// 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 });
  });
}

Para ver el perfil resultante:

1. Realice los pasos descritos en Ver los datos personalizados en el perfil de rendimiento anterior.

2. Desplácese hacia abajo hasta Tiempos de rendimiento personalizados: grupo seguimiento personalizado y expándalo.

3. Expanda la pista de marca de tiempo de la consola.

4. Use las teclas de mouse y flecha para desplazar y acercar el perfil para mostrar las medidas de rendimiento personalizadas:

   

   El evento de carga de fotos se creó mediante console.timeStamp(). Este evento tiene una duración, ya que se crea con una hora de inicio y de finalización. Este evento corresponde al tiempo que se tarda en cargar la versión de pantalla completa de la foto en la que se ha hecho clic.

Vea también:

• Inyección de datos con console.timeStamp() (arriba): sintaxis.
• performance.now()

Ejemplos de API de control de tiempo de usuario

En las secciones siguientes, vea los ejemplos de código que muestran cómo agregar lo siguiente a la escala de tiempo de rendimiento:

• Agregar pistas y entradas personalizadas a la escala de tiempo (performance.measure())
• Agregar marcadores a la pista De tiempos (performance.mark())

Agregar pistas y entradas personalizadas a la escala de tiempo (performance.measure())

Cree pistas personalizadas y rellénelas con entradas para visualizar los datos de rendimiento en una pista personalizada.

Por ejemplo, en photo-gallery/gallery.js, la populateGallery() función define y startTimeendTime llamando a performance.now()y, a continuación, llama performance.measure() a para mostrar el tiempo necesario para crear una foto en la galería:

// 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`
        }
      },
    });
  });
}

Para ver el perfil resultante:

1. Realice los pasos descritos en Ver los datos personalizados en el perfil de rendimiento anterior.

2. Desplácese hacia abajo hasta Tiempos de rendimiento personalizados: grupo seguimiento personalizado y expándalo.

3. Expande la pista de creación de fotos .

4. Use las teclas de mouse y flecha para desplazar y acercar el perfil para mostrar las medidas de rendimiento personalizadas.

   Esto da como resultado la siguiente entrada de seguimiento personalizada en la escala de tiempo de rendimiento, junto con su texto de información sobre herramientas y sus propiedades:

   

   Los eventos creados por tienen una duración corta, por performance.measure() lo que debe acercarlos para verlos en el perfil. Cada uno de estos eventos registra la creación de una imagen, lo que sucede cuando se cambia el valor del filtro (lista desplegable) y cuando se actualiza toda la interfaz de usuario de la galería.

   Los eventos de creación de fotos aparecen entre las Start filtering marcas de rendimiento y Done filtering que resultan de performance.mark() (se tratan en la sección siguiente):

   

Vea también:

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

Agregar marcadores a la pista De tiempos (performance.mark())

Resalte visualmente puntos de interés específicos en la escala de tiempo con marcadores personalizados que abarcan todas las pistas.

Por ejemplo, en photo-gallery/gallery.js, un agente de escucha de eventos controla input los eventos en las listas desplegables de filtros de la página de demostración. El agente de escucha de eventos llama performance.mark() dos veces: antes de aplicar el nuevo filtro y después de aplicar el nuevo filtro:

// 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);
});

Para ver el perfil resultante:

1. Realice los pasos descritos en Ver los datos personalizados en el perfil de rendimiento anterior.

2. Use las teclas de mouse y flecha para desplazar y acercar el perfil para mostrar las medidas de rendimiento personalizadas.

   La pista Tiempos muestra los marcadores personalizadosIniciar filtrado, Filtrado listo y Foto seleccionados :

   

   Los eventos (marcadores) creados por performance.mark() no tienen duración; simplemente marcan algunos eventos interesantes en un perfil: el inicio y el final de un cambio de filtro (mediante los menús desplegables de la página de demostración) y el momento en que se seleccionó una foto (el marcador foto seleccionado ).

Vea también:

• Rendimiento: método mark()

Vea también

MDN:

• Especificación de la extensión console.timeStamp : versión de 6 parámetros del método.
  • console: método estático timeStamp(): versión de 1 parámetro del método.
• API de rendimiento
  • Tiempo de usuario en las API de rendimiento de las API > web.
• Rendimiento: método mark()
• Rendimiento: método measure()
• Rendimiento: método now()
• Rendimiento: timeOrigin (propiedad)

Demos:

• Galería de fotos : la aplicación web en ejecución.
  • photo-gallery/gallery.js : código fuente.

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Andrés Olivares y Sofia Emelianova.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.