[vue] Acerca de la optimización del rendimiento

Prefacio

La parte de optimización del rendimiento examina principalmente la comprensión del programador sobre la optimización del rendimiento del sitio web.
Cómo hacer un buen trabajo en la optimización del rendimiento, qué operaciones causarán problemas de optimización del rendimiento, cuáles son los indicadores de optimización del rendimiento, etc., todos merecen la atención del programador.

1. Comprensión de la reconstrucción

La refactorización del sitio web se refiere al comportamiento de simplificar la estructura, agregar legibilidad y mantener la coherencia en la parte frontal del sitio web sin cambiar el comportamiento externo. En otras palabras, sin cambiar la interfaz de usuario, optimice el sitio web para mantener una interfaz de usuario coherente mientras se expande.

Para los sitios web tradicionales, la refactorización suele incluir los siguientes aspectos:

• Cambie el diseño de la tabla a DIV + CSS.
• Haga que la interfaz del sitio web sea compatible con los navegadores modernos.
• Optimiza la plataforma móvil.
• Optimizar para motores de búsqueda.

La refactorización en profundidad del sitio web debe considerar los siguientes aspectos:

• Reducir el acoplamiento entre códigos
• Mantenga el código flexible.
• Escriba el código estrictamente de acuerdo con las especificaciones.
• Diseñe una API extensible.
• Reemplazar el marco y el lenguaje antiguos (como VB)
• Mejora la experiencia del usuario.
• Optimice la velocidad.
• Comprima recursos de front-end como JavaScript, CSS e imágenes (generalmente resuelto por el servidor).
• Optimice el rendimiento del programa (como lectura y escritura de datos).
• Utilice CDN para acelerar la carga de recursos.
• Optimizar DOM de JavaScript.
• Caché los archivos del servidor HTTP.

2. Si hay una gran cantidad de imágenes en una página (gran sitio web de comercio electrónico) y la página se carga muy lentamente, ¿qué métodos se pueden utilizar para optimizar la carga de estas imágenes para mejorar la experiencia del usuario?

• Para la carga diferida de imágenes, puede agregar un evento de barra de desplazamiento a la página para determinar si la imagen está en el área visible o está a punto de ingresar al área visible, y cargar primero.

• Si se trata de una presentación de diapositivas, un archivo de álbum, etc., se puede utilizar la tecnología de precarga de imágenes y se descargan primero la imagen anterior y la siguiente de la imagen que se muestra actualmente.

• Si la imagen es una imagen CSS, puede utilizar CSS Sprite, SVG sprite, fuente Icon, Base64 y otras tecnologías.

• Si la imagen es demasiado grande, puede utilizar una imagen codificada especialmente. Al cargar, se cargará primero una miniatura muy pequeña para mejorar la experiencia del usuario. Por ejemplo, utilizando la imagen en formato webp de Google, el tamaño de la imagen en formato WebP es un 40% más pequeño que la imagen en formato JPEG con la misma calidad.

• Si el área de visualización de la imagen es más pequeña que el tamaño real de la imagen, la imagen debe comprimirse en el lado del servidor de acuerdo con las necesidades comerciales. Una vez comprimida la imagen, el tamaño de la imagen será el mismo que el de la imagen mostrada.

3. Problemas de optimización del rendimiento.

El rendimiento se puede optimizar en los siguientes niveles:

• Utilización de la caché: caché Ajax, use CDN , JavaScript externo y caché de archivos CSS, agregue el encabezado Expires , configure Etag en el lado del servidor , reduzca las búsquedas de DNS, etc.
• Número de solicitudes: combine estilos y scripts, use sprites de imagen CSS, cargue recursos de imagen fuera de la primera pantalla inicial a pedido y retrase la carga de recursos estáticos.
• Solicitar ancho de banda: comprimir archivos, abrir GZIP.
• Código CSS: evite el uso de expresiones CSS, selectores avanzados y selectores comodín.
• Código JavaScript: use tablas hash para optimizar la búsqueda, use menos variables globales, use innerHTML en lugar de operaciones DOM, reduzca el número de operaciones DOM, optimice el rendimiento de JavaScript, use setTimeout para evitar la pérdida de respuesta de la página, almacene en caché los resultados de la búsqueda del nodo DOM, evite usar con (con creará su propio alcance, aumentará la longitud de la cadena de alcance), fusionar múltiples declaraciones de variables.
• Código HTML: evite los atributos src vacíos como imágenes e iFrames. Si el atributo src está vacío, la página actual se volverá a cargar, lo que afectará la velocidad y la eficiencia. Trate de evitar escribir el atributo Style en la etiqueta HTML.

4. ¿Cómo optimizar el rendimiento del terminal móvil?

• Intente utilizar animaciones CSS3 y active la aceleración de hardware.
• Utilice eventos táctiles en lugar de eventos de clic, según corresponda.
• Evite el uso de efectos de sombra degradados CSS3.
• Puede usar transform: translateZ (0) para activar la aceleración de hardware.
• No abuse de Float. Float tiene una cantidad relativamente grande de cálculo al renderizar, así que úselo lo menos posible.
• No abuse de las fuentes Web. Las fuentes Web deben descargarse, analizarse y volver a dibujarse en la página actual, así que úselas lo menos posible.
• Razonablemente use la animación requestAnimation Frame en lugar de setTimeout.
• Utilice correctamente las propiedades de CSS (transiciones de CSS3, transformaciones 3D de CSS3, Opacidad, Lienzo, WebGL , Video) para activar el renderizado de GPU. El uso excesivo aumentará el consumo de energía del teléfono.

5. ¿Cómo optimizar los archivos del sitio web?

Los archivos se pueden combinar y comprimir para minimizar los archivos; CDN se puede usar para alojar archivos, lo que permite a los usuarios acceder más rápido; se pueden usar varios nombres de dominio para almacenar en caché archivos estáticos.

Seis, varias formas de acortar el tiempo de carga de la página.

El método específico es el siguiente.

(1) Optimizar imágenes

(2) Elija el formato de almacenamiento de imágenes (por ejemplo, GIF proporciona menos colores, que se pueden usar en algunos lugares donde los requisitos de color no son altos)

(3) Optimizar CSS (comprimir y fusionar CSS)

(4) Agregue una barra después de la URL

(5) Marque la altura y el ancho de la imagen (si el navegador no encuentra estos dos parámetros, necesita calcular el tamaño mientras descarga la imagen. Si hay muchas imágenes, el navegador necesita ajustar constantemente la página. Esto no solo afecta la velocidad, pero también afecta la experiencia de navegación Cuando el navegador conoce los parámetros de altura y ancho, incluso si la imagen no se puede mostrar temporalmente, el espacio para la imagen se desocupará en la página y luego continuará cargando el contenido posterior , optimizando así el tiempo de carga y mejorando la experiencia de navegación).

Siete, mejorar el rendimiento del front-end del sitio web

El mapa de sprites se fusiona para reducir las solicitudes HTTP; comprimir archivos HTML, CSS y JavaScript; usar CDN para alojar archivos estáticos; usar caché de almacenamiento local y caché de aplicaciones mainfest.

8. Métodos para optimizar el rendimiento

(1) Reduzca la cantidad de solicitudes HTTP, controle el tamaño de las imágenes y el código fuente CSS Sprite, JavaScript y CSS, y utilice la página web Gzip, alojamiento CDN, almacenamiento en caché de datos y servidor de imágenes.

(2) A través de la plantilla de front-end JavaScript y los datos, reduzca el desperdicio de ancho de banda causado por las etiquetas HTML, guarde los resultados de la solicitud Ajax con variables en el front-end, y cada vez que se manipulen las variables locales, no se requiere solicitud, reduciendo el número de solicitudes.

(3) Utilice innerHTML en lugar de operaciones DOM para reducir el número de operaciones DOM y optimizar el rendimiento de JavaScript.

(4) Cuando haya muchos estilos que deban configurarse, configure el className en lugar de operar directamente el estilo.

(5) Utilice menos variables globales, almacene en caché los resultados de la búsqueda del nodo DOM y reduzca las operaciones de lectura de E / S

(6) Evite el uso de expresiones CSS, que también se denominan propiedades dinámicas,

(7) Cargue previamente la imagen, coloque la hoja de estilo en la parte superior, coloque el script en la parte inferior y agregue una marca de tiempo.

(8) Evite el uso de tablas en el diseño principal de la página. Las tablas no se mostrarán hasta que el contenido se haya descargado por completo. La velocidad de visualización es más lenta que en el diseño DIV + CSS.

Nueve, enumere algunos métodos de optimización del rendimiento web

(1) Comprima el código fuente y las imágenes (JavaScript utiliza compresión ofuscada, CSS realiza una compresión normal, las imágenes JPG se comprimen al 50% ~ 70% según la calidad específica, y las imágenes PNG se comprimen de 24 colores a 8 colores para eliminar algunos PNG información de formato, etc.).

(2) Elija el formato de imagen apropiado (el número de colores es principalmente en formato JPG, pero rara vez en formato PNG. Si el servidor puede juzgar que el navegador es compatible con WebP, utilice el formato WebP o SVG).

(3) Consolide los recursos estáticos (reduzca las solicitudes HTTP)

(4) Combine múltiples CSS en un solo CSS y combine imágenes en imágenes Sprite.

(5) Active la compresión Gzip en el lado del servidor (muy eficaz para los recursos de texto).

(6) Utilice CDN (caché compartida para bibliotecas públicas).

(7) Extienda el tiempo de caché de recursos estáticos.

(8) Coloque CSS en la cabecera de la página y coloque el código JavaScript en la parte inferior de la página (para evitar bloquear la presentación de la página y hacer que la página parezca en blanco durante mucho tiempo)

10. Para CSS, ¿cómo optimizar el rendimiento?

(1) Utilice el atributo de visualización correctamente, el atributo de visualización afectará la representación de la página, así que preste atención a los siguientes aspectos.

	display:inline后不应该再使用 width、 height、 margin、 padding和float 。
	display:inline- block后不应该再使用 float。
	display:block后不应该再使用 vertical-align。 
	display:table后不应该再使用 margin或者float。

(2) No abuse del flotador.

(3) No declare demasiado tamaño de fuente.

(4) Cuando el valor es 0, no se requiere ninguna unidad.

(5) Estandarice varios prefijos de navegador y preste atención a los siguientes aspectos.

	浏览器无前缀应放在最后。
	CSS动画只用（ -webkit-无前缀）两种即可。
	其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）

(6) Evite que los selectores parezcan expresiones regulares. Los selectores avanzados no son fáciles de leer y su ejecución lleva mucho tiempo.

(7) Intente usar selectores de identificación y clase para establecer estilos (evite usar el atributo de estilo para establecer estilos en línea)

(8) Intente utilizar la animación CSS3.

(9) Reducir el redibujado y el reflujo.

11. ¿Cómo optimizar el rendimiento de HTML?

(1) Para carga de recursos, carga bajo demanda y carga asincrónica

(2) El recurso cargado por primera vez no supera los 1024KB, es decir, cuanto más pequeño mejor.

(3) Comprima archivos HTML, CSS y JavaScript.

(4) Reducir los nodos DOM.

(5) Evite el src vacío (el src vacío provocará solicitudes no válidas en algunos navegadores).

(6) Evite errores de solicitud 30 *, 40 *, 50 *

(7) Agregue Favicon.ico. Si el ícono ico no está configurado, el ícono predeterminado hará que se envíe una solicitud 404 o 500.

12. ¿Cómo optimizar el rendimiento de JavaScript?

El método específico es el siguiente.

(1) Selección y cálculo de caché DOM.

(2) Intente utilizar el modo de delegación de eventos para evitar eventos vinculantes por lotes.

(3) Utilice touchstart y toque y en lugar de hacer clic.

(4) Utilice razonablemente la animación requestAnimationFrame en lugar de setTimeOut.

(5) Utilice la animación de lienzo de forma adecuada.

(6) Intente evitar modificar la vista en eventos de alta frecuencia (como TouchMove, eventos de desplazamiento), lo que provocará múltiples representaciones.

13. ¿Cómo optimizar el lado del servidor?

El método específico es el siguiente.

(1) Habilite la compresión Gzip.

(2) Extienda el tiempo de caché de recursos, establezca el tiempo de vencimiento del recurso de manera razonable y establezca el tiempo de vencimiento de algunos recursos estáticos que no se actualizan durante mucho tiempo.

(3) Reducir el tamaño de la información del encabezado de las cookies. Cuanto mayor sea la información del encabezado, más lenta será la velocidad de transmisión del recurso.

(4) CDN puede acelerar imágenes o archivos CSS y JavaScript.

14. ¿Cómo optimizar la interfaz del lado del servidor?

El método específico es el siguiente.

(1) Fusión de interfaces: si una página necesita solicitar más de dos interfaces de datos, se recomienda fusionarlas en una para reducir el número de solicitudes HTTP.

(2) Reduzca la cantidad de datos: elimine los datos innecesarios de los datos devueltos por la interfaz.

(3) Datos almacenados en caché: después de la primera solicitud de carga, los datos se almacenan en caché; para las solicitudes que no son las primeras, se utilizan primero los últimos datos solicitados, lo que puede mejorar la velocidad de respuesta de las solicitudes que no son las primeras.

15. ¿Cómo optimizar la ejecución de scripts?

El manejo inadecuado de la secuencia de comandos bloqueará la carga y la representación de la página, así que tenga cuidado al usarlo.

(1) Escriba CSS en la cabecera de la página y escriba programas JavaScript al final de la página o en operaciones asincrónicas.

(2) Evite src vacío para imágenes e iFrames, etc. El src vacío recargará la página actual, afectando la velocidad y la eficiencia.

(3) Intente evitar restablecer el tamaño de la imagen. Restablecer el tamaño de la imagen se refiere a restablecer el tamaño de la imagen varias veces en la página, CSS, archivos JavaScript, etc. Restablecer el tamaño de la imagen varias veces causará múltiples redibujos de la imagen y afectará el rendimiento.

(4) Intente evitar el uso de DataURL para imágenes. Las imágenes DataURL no utilizan el algoritmo de compresión de imágenes, el archivo aumentará de tamaño y debe procesarse después de la decodificación, la carga es lenta y requiere mucho tiempo.

16. ¿Cómo optimizar el renderizado?

El método específico es el siguiente.

(1) Al configurar la metaetiqueta Viewport a través de HTML, Viewport puede acelerar la representación de la página, como se muestra en el siguiente código.
<meta name="viewport" content="width=device=width,initial-scale=1">
(2) Reducir la cantidad de nodos DOM. Demasiados nodos DOM afectarán la representación de la página, por lo que la cantidad de nodos DOM debería reducirse tanto como sea posible.

(3) Use animación CSS3 tanto como sea posible, use razonablemente la animación requestAnimationFrame en lugar de setTimeout y use la animación del lienzo de manera apropiada (animación CSS para menos de 5 elementos y animación del lienzo para más de 5 elementos (webGL se puede usar en iOS 8) ).

(4) Optimice Touchmove para eventos de alta frecuencia, los eventos de desplazamiento pueden causar múltiples representaciones.

Utilice requestAnimationFrame para supervisar los cambios de fotogramas de modo que pueda renderizar en el momento correcto, aumentar el intervalo de tiempo para responder a los cambios y reducir el número de redibujos.

Utilice el modo de limitación (basado en la limitación de la operación o basado en la limitación del tiempo) para reducir el número de desencadenantes.

(5) Mejore la velocidad de la GPU y use las propiedades en CSS (transiciones CSS3, transformaciones CSS3 3D, Opacidad, Canvas, WebGL, Video) para activar el renderizado de la GPU.

17. ¿Cómo configurar la caché de DNS?

Después de ingresar la URL en la barra de direcciones del navegador, el navegador primero necesita consultar la dirección IP del servidor correspondiente al nombre de dominio (nombre de host), lo que generalmente demora de 20 a 120 ms.

Antes de que se complete la consulta de DNS, el navegador no puede reconocer la IP del servidor, por lo que no descarga ningún dato. En función de las consideraciones de rendimiento, los operadores de ISP, los enrutadores de LAN, los sistemas operativos y los clientes (navegadores) tendrán los correspondientes mecanismos de almacenamiento en caché de DNS.

(1) IE almacena en caché durante 30 minutos, que se puede configurar a través del elemento DnsCacheTimeout en el registro.

(2) Firefox se mezcla durante 1 minuto y se configura a través de network.dnsCacheExpiration.

(3) En Chrome, haga clic en "Configuración" → "Opciones" → "Opciones avanzadas" a su vez, y marque la opción "Usar DNS precargado para mejorar la velocidad de carga de la página web" para configurar el tiempo de caché.

18. ¿Cuándo ocurrirá una falla en el acceso a los recursos?

Durante el proceso de desarrollo, se encontró que muchos desarrolladores no configuraban el ícono y que el directorio raíz del servidor no almacenaba el Favicon.ico predeterminado, lo que provocó que apareciera la solicitud 404. Por lo general, abre Favicon.ico en la vista web de la aplicación, este Favicon.ico no se cargará, pero se pueden compartir muchas páginas.

Si el usuario abre Favicon. Ico en el navegador, la recuperación fallará. Por lo general, intente asegurarse de que el icono exista de forma predeterminada, que el archivo sea lo más pequeño posible y establezca un tiempo de caducidad de caché más largo. Además, debe limpiar rápidamente los recursos que tienen cachés caducados que hacen que falle la solicitud de descubrimiento.

19. ¿Cómo optimizar el rendimiento de jQuery?

El método de optimización es el siguiente.

(1) Utilice la última versión de la biblioteca jQuery.

Cada nueva versión de la biblioteca JQuery corregirá errores y algunas optimizaciones de la versión anterior, y también contendrá algunas innovaciones, por lo que se recomienda utilizar la última versión de la biblioteca jQuery para mejorar el rendimiento. Sin embargo, debe tenerse en cuenta que después de cambiar la versión, no olvide probar el código, después de todo, a veces no es completamente compatible con versiones anteriores.

(2) Utilice el selector apropiado.

jQuery proporciona una selección muy rica de selectores. El selector es la función más utilizada por los desarrolladores, pero el uso de diferentes selectores también puede traer problemas de rendimiento. Se recomienda utilizar selectores simples, como selectores i, selectores de clases y no anidar selectores i.

(3) Use objetos jQuery como una matriz.

El resultado obtenido usando el selector jQuery es un objeto jQuery. Sin embargo, la biblioteca jQuery le hará sentir como si estuviera usando una matriz con un índice y una longitud definidos. En términos de rendimiento, se recomienda utilizar un bucle for o while simple en lugar de $. Each () para que el código sea más rápido.

(4) Todos los eventos de JavaScript (como hacer clic, pasar el mouse, etc.) aparecerán en el nodo principal. Cuando necesite vincular la misma función de devolución de llamada a varios elementos, se recomienda utilizar el modo de delegación de eventos.

(5) Use join () para concatenar cadenas.

Use join () para concatenar cadenas largas en lugar de usar "+" para concatenar cadenas. Esto ayuda a optimizar el rendimiento, especialmente cuando se trata de cadenas largas.

(6) Utilice razonablemente el atributo de datos en HTML5.

El atributo de datos en HTML5 ayuda a insertar datos, especialmente el intercambio de datos entre el front-end y el backend; el método data () de jQuery puede usar de manera efectiva los atributos de HTML5 para obtener datos automáticamente.

20. ¿Qué métodos pueden mejorar la experiencia de animación CSS3 del terminal móvil?

(1) Use las capacidades de hardware tanto como sea posible, como usar la deformación 3D para activar la aceleración de la GPU, como el siguiente código.

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；

La fluidez de la animación de un elemento que se mueve 500X hacia la derecha a través de translate3d será significativamente mejor que el movimiento de animación logrado con la propiedad left, porque la propiedad de animación CSS activará la página completa para que se redistribuya, redibuje y reorganice. La pintura suele consumir más rendimiento. Evite el uso de propiedades de animación CSS que activen la pintura tanto como sea posible.

Si hay parpadeo durante la ejecución de la animación (generalmente al comienzo de la animación), se puede manejar de la siguiente manera.

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;

(2) Utilice las sombras de caja y los degradados lo menos posible, ya que a menudo afectan gravemente el rendimiento de la página, especialmente cuando se utilizan en un elemento al mismo tiempo.

(3) Mantenga los elementos de animación fuera del flujo del documento tanto como sea posible para reducir la reordenación, como se muestra en el siguiente código.

position:fixed；
position:absolute;