Programa Star 360 front-end: optimice el rendimiento front-end juntos (Rao Zhanping)

¿Por qué optimizar el rendimiento? Encontraron que los cuellos de botella de rendimiento de sitios y aplicaciones, mejorar la experiencia del usuario de
cómo optimizar el rendimiento? A continuación lo explicaremos.

1. Use el modelo RAIL para evaluar el desempeño

1.1 FERROCARRIL

El modelo de rendimiento centrado en el usuario, cada aplicación de red tiene cuatro aspectos relacionados con su ciclo de declaración, estos aspectos afectan el rendimiento de diferentes maneras.

Retraso y respuesta del usuario:

1.2 Respuesta: manejar eventos en 50 ms

• Objetivo: responder a la entrada del usuario dentro de los 100 ms
• Orientación -
  Maneje los eventos de entrada del usuario dentro de los 50 ms para garantizar la retroalimentación de la respuesta visual del usuario dentro de los 100 ms -
  Separe el procesamiento de tareas para tareas costosas o póngalos en procesos de trabajo para evitar afectar la interacción del usuario -
  Operaciones que procesan eventos durante más de 50 ms, siempre Dar retroalimentación (indicadores de progreso y actividad)

1.3 Animación: 10 ms por fotograma

• Objetivo: 10 ms (1000 ms / 60 cuadros-6 ms (presupuesto de cuadro procesado)) o menos tiempo para generar un cuadro y suavizar
• Orientación: en el punto de alta presión de la animación, trate de no lidiar con la lógica. Tipo de animación (desplazamiento, animación visual, animación de arrastre)

1.4 Maximizando el tiempo de inactividad

• Objetivo: maximizar el tiempo de inactividad para aumentar la posibilidad de que la página responda a la entrada del usuario dentro de los 100 ms
• Orientación: Use el tiempo inactivo para completar el trabajo diferido, y la interacción del usuario tiene la máxima prioridad durante el tiempo inactivo

1.5 Carga: Presente contenido interactivo en 5s

• Objetivo: presentar contenido interactivo dentro de los 5 segundos posteriores a la carga de la primera pantalla y cargar dentro de los 2 segundos posteriores a la carga de la primera pantalla
• Guia
  • Pruebe el rendimiento del equipo y la conexión de red de uso común de los usuarios
  • Optimice la ruta de representación crítica para desbloquear la representación
  • Inicie el renderizado progresivo y realice algunos trabajos en segundo plano.
  • Factores que afectan el rendimiento de carga: velocidad de red, hardware (CPU), análisis de JavaScript

1.6 Resumen de indicadores clave

• Respuesta: Responda a la entrada del usuario dentro de los 100 ms
• Animación: cuando la animación o el desplazamiento, se genera un marco en 10 ms
• Tiempo de inactividad: el tiempo de inactividad del hilo principal se maximiza
• Carga: presente contenido interactivo dentro de 1000 ms
• Centrado en el usuario

2. Herramientas para evaluar el rendimiento.

• Faro
• WebPageTest
• Chrome DevTools

3. Combate real

3.1 Proceso de renderizado del navegador

• JavaScript (implementar animación, operar dom, etc.)
• Estilo (combinando HTML y CSS en el árbol de renderizado)
• Diseño (modelo de caja de salida, ubicación exacta y tamaño)
• Pintura (rasterización, visualización)
• Compuesto (combinación de capas de renderizado)

3.2 Escena de representación del navegador:

Sitio web:csstriggers.com

3.3 Dirección de optimización del rendimiento

• Cargando
  • Optimización de la eficiencia de los recursos.
  • Optimización de imagen
  • Optimización de fuente
  • Optimización de ruta de renderización crítica
• Renderizado
  • Optimización de ejecución de JavaScript
  • Evitar diseños grandes y complejos
  • Procesar fusión de capas