Análisis de optimización front-end
Sobrevivir de día y desarrollarse de noche.
hable para el negocio de importación, muestre su código perfecto, esté completamente ocupado, salte la dureza, obtenga un mejor resultado, espere el cambio, desafíe a Survive.
feliz por la dificultad para resolver denpendies.
Tabla de contenido
descripción general
Análisis de optimización front-end:
reduzca la cantidad de solicitudes, reduzca el tamaño de los recursos, optimice la conexión de red, optimice la carga de recursos, reduzca el reflujo de redibujado, use una mejor API y optimice la compilación
necesidad:
Reduzca el número de solicitudes:
use la técnica de combinación de solicitudes:
Ideas de diseño
1. Solicitar fusión
2. Codificación base64 de procesamiento de imágenes
3. [Reducir redirección]
4. [Usar caché]
Reduzca el tamaño de los recursos:
1. Compresión HTML
2. Compresión CSS
4. Compresión de imágenes
5. Habilite gzip
Optimizar conexión de red:
【Usar CDN】
Usar resolución previa de DNS
En la capa de aplicación:
al optimizar la ubicación de carga de recursos y cambiar el tiempo de carga de recursos, el contenido de la página se puede mostrar lo más rápido posible y las funciones pueden estar disponibles lo antes posible. Los archivos CSS se colocan en la
cabecera , primero los enlaces externos y luego esta
página Póngalo en la parte inferior del cuerpo, primero el enlace externo, luego esta página
[tiempo de carga del recurso]
1. Etiqueta de secuencia de comandos asíncrona
diferir: carga asíncrona, ejecutada después de que se completa el análisis de HTML. El efecto real de diferir es similar a poner el código en la parte inferior del cuerpo
async: carga asíncrona, ejecutada inmediatamente después de que se completa la carga
2. Los módulos se cargan bajo demanda
En sistemas con lógica de negocios compleja como SPA, es necesario cargar los módulos de negocios requeridos por la página actual de acuerdo con el enrutamiento
La carga a pedido es una excelente manera de optimizar páginas web o aplicaciones. Este método en realidad separa primero el código en algunos puntos de interrupción lógicos y luego se refiere inmediatamente o está a punto de referirse a otros bloques de código nuevos después de completar ciertas operaciones en algunos bloques de código. Esto acelera la carga inicial de la aplicación y reduce su tamaño total, ya que es posible que algunos bloques de código nunca se carguen.
Realizar análisis de pensamiento
capa de representación
Los elementos que deben volver a dibujarse varias veces se representan de forma independiente como la capa de representación, como la configuración absoluta, lo que puede reducir el rango de redibujado
Optimización DOM
1, almacenar DOM
2, reducir la profundidad DOM y la cantidad de DOM
3. Operación por lotes DOM
API con mejor rendimiento
selector de id (#myid)
selector de clase (.myclassname)
selector de etiquetas (div, h1, p)
selector adyacente (h1+p)
selector de niños (ul > li) selector
de descendientes (li a) selector
de comodines selector (*)
selector de atributos ( a[rel="external"])
selector de pseudoclase (a:hover, li:nth-child)
2. Use requestAnimationFrame en lugar de setTimeout y setInterval
Optimización de paquetes web
[Código público de empaquetado]
[Importación dinámica y carga bajo demanda]
Referencias y lecturas recomendadas
- https://www.cnblogs.com/SuremoWang/p/15735993.html
¡Bienvenido a leer, viejos hierros, si es útil para usted, haga clic en Me gusta y siga! ~