keyboard_arrow_left

Analizar la capacidad de respuesta de la interfaz de usuario de HTML (3ª parte)

La información del cronograma puede verse con más detalle en el “Detalle del cronograma”: f12_6.png

Ya que proporciona detalles sobre los elementos del DOM y el impacto que causa el código en ellos, información tan importante como los efectos colaterles que tiene en el diseño y cómo afecta a la recolección de basura.

Podemos comprobar cuánto dura cada evento y a partir de la actualización de IE KB2976627 (http://www.microsoft.com/en-us/download/details.aspx?id=43860) se pueden filtrar los tipos de evento: por actividad procesada en segundo plano, tráfico de la red, actividad en la interfaz de usuario y/o medidas de usuario. También por duración del evento (todo o menor de 1ms).

f12_7.png

To the left of the updated filters button is an completely new option in Cumulative Security Update for Internet Explorer (KB2976627), the Group top level events by frames button, or frame grouping. This creates a set of pseudo-events based on the measured frame rate and groups events under them. When you’re trying to determine why you’re dropping frames in an animation, this helps break units of work by frame and identify where frames are taking longer to execute than others.


f12_8.png
For a quick overview of events that contributed to the inclusive duration, the event details pane shows a circular chart using the same color coding as the timeline. Because the colors represent categories of events, the chart might contain multiple segments in the same color. Placing your mouse over a segment shows a tooltip with its event label.

 

Filtering to an event

New in Windows 8.1 Update, you can right-click an event to see a context menu with three options:
•Filter to event sets the zoom level to the event’s inclusive time, so just the event and any events that happened at the same time are displayed.
•Clear selection zooms out again.
•View Source is only enabled for Scripting events. It switches to the Debugger, opens the file containing the code that generated the event, and moves the cursor to the point in the code where the event was generated.

The details of the details

Each element in the Timeline details shows different info, depending on its type.


f12_9.png

This timer was invoked by a setTimeout() which called the autoNextSlide function in script.jsx. When you click the file name, it opens in the Debugger tool and navigates to the function for inspection.

The circular chart at the bottom shows that while Scripting made up a large part of the event’s time, Styling took up a fair portion. Expanding the timer’s event in the Timeline details shows more about the different Styling operations that contributed to the time it required.

In Cumulative Security Update for Internet Explorer (KB2976627) a Selection Summary view has been added, so when you select a portion of the timeline, that selection’s summary information is presented in the event details pane like a timeline event until you select an event from the Timeline details.

f12_10
f12_10.png

Event categories and definitions

The Responsiveness tool uses 7 main event categories on the timeline. These break down into a selection of events in Timeline details.
Loading contains events related to bootstrapping and loading a webpage’s resources. This is recorded for the primary window and any frames within it. The events gathered within Loading are:•CSS parsing: New CSS content was found and needs to be analyzed. The details include the URL of the content or inline in parentheses after the event if the CSS is hardcoded into the webpage.
•HTML parsing: New HTML content was found that needs to be divided into nodes and added to the DOM.
•HTTP request: Makes an HTTP request to a server and receives the response. More than one response can appear at the same time and not consume significant resources. However, rendering might be delayed by waiting for a large or slow HTTP request to complete. The URL of the request and the response code are the type of details shown here.
•Speculative downloading: The webpage’s HTML content is searched for required resources so HTTP requests can be scheduled as quickly as possible.
Scripting contains events related to processing and executing JavaScript. These events are gathered within Scripting:•Animation frame callback: A new frame was being prepared and a registered callback was triggered so that it could contribute any visual changes. Details include the location of the callback within the webpage or external scripts.
•DOM event: A DOM event was fired. Event listeners attached to it are shown as children of the event.
•Script evaluation: Processing content within

_comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

techdencias

Analizar la capacidad de respuesta de la interfaz de usuario de HTML (3ª parte)

24-Ene-2018

por

Fundación Techdencias

La información del cronograma puede verse con más detalle en el “Detalle del cronograma”: f12_6.png

Ya que proporciona detalles sobre los elementos del DOM y el impacto que causa el código en ellos, información tan importante como los efectos colaterles que tiene en el diseño y cómo afecta a la recolección de basura.

Podemos comprobar cuánto dura cada evento y a partir de la actualización de IE KB2976627 (http://www.microsoft.com/en-us/download/details.aspx?id=43860) se pueden filtrar los tipos de evento: por actividad procesada en segundo plano, tráfico de la red, actividad en la interfaz de usuario y/o medidas de usuario. También por duración del evento (todo o menor de 1ms).

f12_7.png

To the left of the updated filters button is an completely new option in Cumulative Security Update for Internet Explorer (KB2976627), the Group top level events by frames button, or frame grouping. This creates a set of pseudo-events based on the measured frame rate and groups events under them. When you’re trying to determine why you’re dropping frames in an animation, this helps break units of work by frame and identify where frames are taking longer to execute than others.


f12_8.png
For a quick overview of events that contributed to the inclusive duration, the event details pane shows a circular chart using the same color coding as the timeline. Because the colors represent categories of events, the chart might contain multiple segments in the same color. Placing your mouse over a segment shows a tooltip with its event label.

 

Filtering to an event

New in Windows 8.1 Update, you can right-click an event to see a context menu with three options:
•Filter to event sets the zoom level to the event’s inclusive time, so just the event and any events that happened at the same time are displayed.
•Clear selection zooms out again.
•View Source is only enabled for Scripting events. It switches to the Debugger, opens the file containing the code that generated the event, and moves the cursor to the point in the code where the event was generated.

The details of the details

Each element in the Timeline details shows different info, depending on its type.


f12_9.png

This timer was invoked by a setTimeout() which called the autoNextSlide function in script.jsx. When you click the file name, it opens in the Debugger tool and navigates to the function for inspection.

The circular chart at the bottom shows that while Scripting made up a large part of the event’s time, Styling took up a fair portion. Expanding the timer’s event in the Timeline details shows more about the different Styling operations that contributed to the time it required.

In Cumulative Security Update for Internet Explorer (KB2976627) a Selection Summary view has been added, so when you select a portion of the timeline, that selection’s summary information is presented in the event details pane like a timeline event until you select an event from the Timeline details.

f12_10
f12_10.png

Event categories and definitions

The Responsiveness tool uses 7 main event categories on the timeline. These break down into a selection of events in Timeline details.
Loading contains events related to bootstrapping and loading a webpage’s resources. This is recorded for the primary window and any frames within it. The events gathered within Loading are:•CSS parsing: New CSS content was found and needs to be analyzed. The details include the URL of the content or inline in parentheses after the event if the CSS is hardcoded into the webpage.
•HTML parsing: New HTML content was found that needs to be divided into nodes and added to the DOM.
•HTTP request: Makes an HTTP request to a server and receives the response. More than one response can appear at the same time and not consume significant resources. However, rendering might be delayed by waiting for a large or slow HTTP request to complete. The URL of the request and the response code are the type of details shown here.
•Speculative downloading: The webpage’s HTML content is searched for required resources so HTTP requests can be scheduled as quickly as possible.
Scripting contains events related to processing and executing JavaScript. These events are gathered within Scripting:•Animation frame callback: A new frame was being prepared and a registered callback was triggered so that it could contribute any visual changes. Details include the location of the callback within the webpage or external scripts.
•DOM event: A DOM event was fired. Event listeners attached to it are shown as children of the event.
•Script evaluation: Processing content within

_comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *