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.
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
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
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:
- CL 2431864: [devtools] Reduce la sobrecarga de rendimiento del envío de mensajes en el frontend
- 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:
- Registra un seguimiento con
chrome://tracing
- Cómo abrir DevTools en DevTools
- 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% |
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.
- Envíanos tus comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de DevTools con Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
- Twittea a @ChromeDevTools.
- Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.