Cómo mejorar el tiempo de inicio de Herramientas para desarrolladores

Maksim Sadym
Maksim Sadym

El inicio de Herramientas para desarrolladores ahora es un ~13% más rápido 🎉 (de 11.2 s a 10 s).

Resumen: El resultado se logra quitando una serialización redundante.

Descripción general

Mientras se inicia DevTools, debe realizar algunas llamadas al motor de JavaScript V8.

Proceso de inicio de Herramientas para desarrolladores

El mecanismo que usa Chromium para enviar comandos de DevTools a V8 (y para IPC en general) se denomina mojo. Mis compañeros de equipo Benedikt Meurer y Sigurd Schneider descubrieron una ineficiencia mientras trabajaban en otra tarea y tuvieron la idea de mejorar el proceso quitando dos pasos redundantes en la forma en que se envían y reciben estos mensajes.

Analicemos cómo funciona el mecanismo mojo.

Los mecanismos mojo

Los mecanismos de Mojo

Hay un comando mojo EvaluateScript que ejecuta el comando JS. Serializa todo el comando JS, incluido arguments, en una cadena de código fuente de JavaScript que puede ser eval(). Como puedes imaginar, estas cadenas pueden ser bastante largas y costosas. Después de que V8 recibe el comando, estas cadenas de código JavaScript se deserializan antes de ejecutarse. Este proceso de serialización y deserialización para cada mensaje crea una sobrecarga significativa.

Benedikt Meurer se dio cuenta de que la serialización y la deserialización de arguments son bastante costosas, y que todos los pasos de "Serializar comando JS a cadena JS" y "Deserializar cadena JS" son redundantes y se pueden omitir.

Detalles técnicos: RenderFrameHostImpl::ExecuteJavaScript

Qué mejoramos

Mecanismos mejorados

Presentamos otro método de la API de Mojo que nos permite pasar el nombre del objeto, el método al que se llamará y la lista de argumentos directamente, en lugar de tener que crear la cadena de código fuente de JavaScript. Esto nos permite omitir la serialización y la deserialización, y elimina la necesidad de analizar el código JavaScript.

Para obtener detalles técnicos sobre cómo implementamos esta optimización, consulta estos dos parches:

  1. CL 2431864: [devtools] Reduce la sobrecarga de rendimiento del envío de mensajes en el frontend
  2. CL 2442012: [devtools] Usa ExecuteJavaScriptMethod en DevTools

Impacto

Para medir la eficacia del cambio, realizamos algunas mediciones en las que comparamos las revisiones de Chromium cb971089a058 y 4f213b39d581 (antes y después del cambio).

Para ambas revisiones, ejecutamos la siguiente situación 5 veces:

  1. Registra un seguimiento con chrome://tracing
  2. Cómo abrir DevTools en DevTools
  3. Obtén el registro CrRendererMain grabado y compara las métricas específicas de V8.

En función de estos experimentos, las Herramientas para desarrolladores se abren alrededor de un 13% más rápido (de 11.2 s a 10 s) con la optimización.

Puntos destacados y duraciones de la CPU

Nombre del método Sin optimizar (ms) Optimizado (ms) Diferencias (ms) Mejora de la velocidad (%)
Total 11,213.19 9,953.99 -1,259.20 12.65%
v8.run 499.67 3.61 -496.06 12.65%
V8.Execute 1,654.87 1,349.61 -305.25 3.07%
v8.callFunction 1,171.84 1,339.77 167.94 -1.69%
v8.compile 133.93 3.56 -130.37 1.31%

Tiempo de CPU de carga de DevTools (ms)

Tabla de comparación de métricas de seguimiento completas

Como resultado, DevTools se abre y funciona más rápido con menos uso de la CPU. 🎉

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.