Y debajo de él, muestra el mismo segmento, pero resaltando las diferentes secciones de trabajo ejecutado en ese animation frame. Primero, puede notar que tenemos múltiples eventos en un solo animation frame. Volveré a eso más adelante. Pero tenga en cuenta que un animation frame y, posteriormente, la métrica IMP y las entradas de long animation frame no están limitadas a un evento por interacción. Así que puedo, de hecho, déjame ver si puedo tener esto. Ahí lo tienes. Así que aquí está el mismo tipo de segmento dentro de la pestaña de rendimiento. Y puedes ver para este rastro en particular, tienes diferentes animation frames aquí, ¿verdad? Así que dentro de eso, podemos verificar, por ejemplo, si desplazo para este animation frame en particular, tengo diferentes tipos de trabajo ejecutados dentro de un animation frame. Y no siempre es solo scripting.
Ahora de vuelta a la presentación. También es importante notar que parte del modelo de atribución puede no estar presente en algún animation frame, como las ranuras de atribución faltantes que tienes en la imagen allí. Eso podría deberse a diferentes limitaciones que actualmente enfrenta la plataforma para inferir con precisión o seguridad la información, como el tiempo de ejecución proveniente de scripts de terceros o extensiones de Chrome. Así que ahora echemos un vistazo a diferentes atributos del modelo de atribución de animation frame, pero cómo está presente en la métrica IMP. Puede que hayas visto uno de estos pequeños dentro de la pista de interacción en el panel de rendimiento, donde a la izquierda y a la derecha los bigotes son los inputs y el retraso de presentación. La barra sólida en el medio es el tiempo de procesamiento.
Comencemos con el primer evento de UI, timestamp. Esto es parte del modelo de atribución dentro de animation frames, proveniente de la Long Animation Frame API. Pero también se conoce como el retraso de input. Este es el timestamp para el primer evento, el primer evento de interacción que se procesa dentro de un animation frame dado. Este timestamp representa la creación del evento de interacción y podría haber ocurrido en cualquier momento dentro del animation frame actual o anterior, dependiendo si hubo un retraso entre el evento siendo creado y el evento siendo procesado. Este atributo proporciona los datos utilizados para calcular el retraso de input para animation frames que están conectados al evento IMP. El tiempo de procesamiento abarca el trabajo en el main thread relacionado con tareas o microtareas que se ejecutan durante el animation frame. Si se inspecciona en el profiler, este grupo de trabajo será representado en el gráfico de llamas por trabajos como la compilación de scripts, diferentes llamadas a funciones y callbacks, ejecución de promesas, funciones de callback de temporizador, y también estilos forzados y layouts.
La última sección de trabajo antes de que el navegador pueda producir un envío en el siguiente frame es el retraso de presentación. Consiste en cualquier trabajo relacionado con el procesamiento de actualizaciones visuales necesarias después de que el main thread ha terminado de ejecutar todas las tareas del animation frame. Este tipo de trabajo se compone de diferentes partes como estilo y layout. Pero el estilo y layout no son el único tipo de trabajo que se procesa en esta etapa. Otras diferentes APIs se ejecutan entre la ejecución de una tarea y el frame siendo presentado en la pantalla. Trabajos como la evaluación de selectores CSS y el cálculo de estilos, callbacks de observadores precisos, promesas de transición de vista, y callbacks de request animation frame. El trabajo ejecutado en esta etapa corre mucho más cerca de las partes del animation frame que involucran presentar un nuevo frame, pero también pueden contribuir a retrasos antes de que el nuevo frame pueda ser presentado, ya que algunas de esas APIs también pueden generar sus propias microtareas, por lo tanto, el trabajo ejecutado en esta etapa también puede llevar a problemas de IMP.
Comments