Hallo! Otra vez es Kayce, escritor de tecnología de Herramientas para desarrolladores. Para este Resumen de Herramientas para desarrolladores, pensé en cambiarlo un poco y hacer un resumen de algunas mejoras en las herramientas de rendimiento de Herramientas para desarrolladores en las últimas versiones de Chrome.
Todas las funciones ya se encuentran en la versión estable de Chrome, a menos que se indique lo contrario.
Limitación de la CPU para un mundo donde se priorizan los dispositivos móviles
Disponible en Chrome 54, que actualmente es Canary.
El software está comiendo el mundo, y los dispositivos móviles son el software de consumo. Herramientas para desarrolladores evoluciona constantemente para satisfacer mejor las necesidades de un mundo de desarrollo que prioriza los dispositivos móviles. El desarrollo más reciente de las herramientas que priorizan los dispositivos móviles de Herramientas para desarrolladores es la limitación de la CPU. Usa esta función para conocer mejor el rendimiento de tu sitio en dispositivos con recursos limitados.
Selecciona una de las opciones del menú desplegable CPU Throttling en el panel Timeline para reducir la potencia de procesamiento de tu máquina de desarrollo.
Notas sobre la limitación de la CPU:
- La limitación se aplica de inmediato y continúa hasta que la inhabilitas, al igual que cuando se limita la red.
- Esta función sirve para dar a conocer el rendimiento general de tu sitio en un dispositivo con recursos limitados. Es imposible que las Herramientas para desarrolladores emulen realmente las características de rendimiento de un sistema móvil en chip.
- La limitación es relativa a tu máquina de desarrollo. En otras palabras, una limitación 5 veces mayor en una computadora de escritorio de primera línea producirá resultados diferentes a la limitación de 5 veces en una laptop económica de cinco años de antigüedad.
Dicho esto, combina la limitación de la CPU con la regulación de red y Device Mode para comenzar a comprender mejor el aspecto y el rendimiento que tendrá tu sitio en dispositivos móviles, desde la conveniencia de tu navegador de la máquina de desarrollo.
Grabaciones de vista de red en la línea de tiempo
Habilita la casilla de verificación Red la próxima vez que realices una grabación en Rutas para analizar cómo tu página descargó sus recursos. Haz clic en un recurso para ver más información al respecto en el panel Resumen.
El campo Initiator del resumen es particularmente útil. Este campo indica dónde se solicita el recurso.
Objetos de escucha de eventos pasivos
Los objetos de escucha de eventos pasivos son un estándar emergente para mejorar el rendimiento del desplazamiento. Consulta este artículo tuyo para obtener más información:
Cómo mejorar el rendimiento de desplazamiento con objetos de escucha de eventos pasivos
Herramientas para desarrolladores envió un par de funciones para ayudarte a encontrar objetos de escucha que podrían beneficiarse de un poco de amor de {passive: true}.
En primer lugar, la consola emite una advertencia cuando un objeto de escucha síncrono bloquea el desplazamiento de la página durante períodos de tiempo injustificados.
Puedes probarlo en la siguiente demostración:
Bloqueo de desplazamiento debido a la demostración de los controladores táctiles o de la rueda
A continuación, puedes usar el pequeño menú desplegable del panel Event Listeners para filtrar por objetos de escucha pasivos o de bloqueo.
Por último, puedes activar o desactivar el estado pasivo o de bloqueo de un objeto de escucha. Para ello, coloca el cursor sobre este y presiona Toggle Passive. Actualmente, esta función se limita a los objetos de escucha de eventos touchstart, touchmove, mousewheel y wheel.
Para terminar esta sección con un pequeño consejo. Habilita la casilla de verificación Desplazamiento de problemas de rendimiento en el panel lateral de renderización para obtener una representación visual de los posibles problemas de desplazamiento. Cuando se destaca una sección de una página, significa que hay un objeto de escucha vinculado a esa sección de la página que podría afectar negativamente el rendimiento del desplazamiento.
Agrupar por actividad
A mediados de junio, el panel Call Tree del panel Timeline obtuvo una nueva categoría de orden: Agrupar por actividad. Esta agrupación te permite ver cuánto tiempo dedicó tu página a analizar el código HTML, evaluar secuencias de comandos, pintar, etc.
Estadísticas del cronograma en el panel de fuentes
Crea una grabación en Timeline con la opción JS Profile habilitada y podrás ver un desglose función por función de los tiempos de ejecución en el panel Sources.
Comparte tu perspectiva
Como siempre, nos encantaría recibir tus comentarios o ideas sobre cualquier tema relacionado con Herramientas para desarrolladores.
- Llámanos en ChromeDevTools en Twitter para obtener comentarios o preguntas breves, o compartir ideas nuevas.
- Si tu opinión es más larga, te recomendamos usar la lista de distribución o Stack Overflow.
- Para cualquier tema relacionado con documentos, abre un problema en nuestro repositorio de documentos.
Hasta el mes que viene.