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

Maksim Sadym
Maksim Sadym

Ahora el inicio de Herramientas para desarrolladores es aproximadamente 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 Herramientas para desarrolladores, es necesario que realice algunas llamadas al motor de JavaScript V8.

Proceso de inicio de Herramientas para desarrolladores

El mecanismo que usa Chromium para enviar comandos de Herramientas para desarrolladores 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 se les ocurrió una idea para mejorar el proceso mediante la eliminación de dos pasos redundantes en la forma de enviar y recibir estos mensajes.

Analicemos cómo funciona el mecanismo mojo.

Los mecanismos mojo

Los mecanismos de la edición

Hay un comando mojo EvaluateScript que ejecuta el comando JS. Serializa todo el comando JS, incluido el arguments, en una string de código fuente de JavaScript que puede ser eval(). Como puedes imaginar, estas cadenas pueden volverse bastante largas y costosas. Una vez 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 "Serialize JS command to JS string" y "Deserialize JS string" son redundantes y se pueden omitir.

Detalles técnicos: RenderFrameHostImpl::ExecuteJavaScript

Cómo mejoramos

Mecanismos mejorados

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

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

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

Impacto

Para medir la efectividad del cambio, ejecutamos 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. Abrir Herramientas para desarrolladores
  3. Obtén el seguimiento de CrRendererMain registrado y compara las métricas específicas de V8.

Según estos experimentos, Herramientas para desarrolladores abre ~13% más rápido (de 11.2 a 10 s) con la optimización.

Aspectos destacados, duraciones de la CPU

Nombre del método Sin optimizar (ms) Optimizado (ms) Diferencias (ms) Mejora de velocidad (%)
Total 11,213.19 9,953.99 −1,259.20 Un 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 Herramientas para desarrolladores (ms)

Tabla comparativa completa de las métricas de seguimiento

Como resultado, Herramientas para desarrolladores se abre y funciona más rápido con menos uso de 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 Herramientas para desarrolladores, prueban las API de vanguardia de la plataforma web y te permiten encontrar problemas en tu sitio antes que los usuarios.

Cómo comunicarte con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

  • Envíanos una sugerencia o un comentario a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más   > Ayuda > Informar problemas de Herramientas para desarrolladores en esta herramienta.
  • Envía un tweet a @ChromeDevTools.
  • Deje comentarios en las Novedades de los videos de YouTube de Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores los videos de YouTube.