Cómo mejorar la velocidad de carga de páginas wap h5

Para un producto, el rendimiento es una parte indispensable de la experiencia del usuario. La optimización del rendimiento es una cuestión a largo plazo. Pensando en el proyecto de navegación, se enumeran los siguientes planes de optimización del rendimiento:

1. Optimización básica a nivel de código;

1: uso razonable de. css

1) Utilice el atributo Display correctamente El atributo Display afectará la representación de la página, así que utilícelo de forma razonable

2) display: ancho, alto, margen, relleno. y float no debe usarse después de inline

3) display: float no debe usarse después de inline-block

4) display: vertical-align no debe usarse después de block

5) visualización: tabla Margen o flotante no deben usarse después de -*

2: No abusar del flotante

3: No declarar demasiadas fuentes -sizes

4: El valor es No se requiere unidad cuando 0

5: Estandariza varios prefijos del navegador

1) No se debe colocar ningún prefijo al final

2) Las animaciones CSS solo usan (- webkit- sin prefijo) dos tipos son suficientes

3) Otros prefijos son -webkit- -moz- -ms- sin prefijo cuatro, ( -o-El navegador Opera usa el kernel flash en su lugar, por lo que se elimina)

6: Selectores

7: Evite que los selectores parezcan expresiones regulares. Los selectores avanzados son difíciles de leer y tardan mucho en ejecutarse

8: Intente usar selectores de ID y clase (evite usar estilos en línea)

9: Intente usar animación CSS3

10: Principio de carga de recursos: carga bajo demanda y carga asincrónica

11: La primera carga no debe exceder los 1024 KB (o se puede decir que cuanto más pequeña, mejor)

12: comprimir html, css, js

13: reducir el redibujado y el reflujo

14: selección y cálculo de DOM en caché

15: intentar use proxies de eventos para evitar eventos de enlace por lotes

16: use inicio táctil, toque final en lugar de hacer clic

17: use ventana gráfica para HTML

18: reduzca los nodos DOM

19: Utilice correctamente la animación requestAnimationFrame en lugar de setTimeOut

20: Uso adecuado de la animación de Canvas

21: Los eventos TouchMove y Scroll provocarán múltiples renderizados

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

23: Evite errores de solicitud 30*/40*/50*;

24: Favicon .ico: Si no configuramos el ícono ico, se cargará el ícono predeterminado: favicon.ico en el directorio de nombres de dominio. Muchos desarrolladores no se han dado cuenta de esto, lo que hará que la solicitud sea 404 o 500. No se muestra cuando está en la aplicación, así que intente asegurarse de que el tamaño del archivo ico sea inferior a 4 kb;

2. Optimización a nivel de marco;

Cuando utilice recursos de terceros. Debido a que los recursos son incontrolables, debes tener cuidado al elegir. El principio es considerar exhaustivamente los requisitos del proyecto y su impacto en el rendimiento, y luego seleccionar el marco y los archivos de biblioteca adecuados.

Al mismo tiempo, es necesario utilizar la carga asincrónica para evitar que el uso de recursos de terceros afecte el rendimiento del proyecto en sí;

3. Optimización del nombre de dominio/servidor;

1. Habilite la compresión Gzip;

2. Almacenamiento en caché de recursos, caché prolongado: establezca el tiempo de caducidad de los recursos de manera razonable para algunos recursos estáticos que no se actualizan durante mucho tiempo; /p>

3. Reducir las cookies: Reducir las cookies El tamaño de la información del encabezado, cuanto mayor sea el tamaño, más lenta será la velocidad de transmisión;

4. Aceleración de CDN: imágenes, css y js. acelerarse mediante CDN;

IV. Optimización de la interfaz del servidor

1. Fusión de interfaz: por ejemplo, si una página necesita solicitar más de dos interfaces de datos, se recomienda fusionarla. en uno, lo que puede reducir la cantidad de solicitudes http;

2. Reducir la cantidad de datos: eliminar datos innecesarios de los datos devueltos por la interfaz

3. : Después de la primera solicitud de carga, los datos se almacenarán en caché; las solicitudes que no sean la primera vez darán prioridad a los datos solicitados la última vez, lo que puede mejorar la velocidad de carga de las solicitudes que no sean la primera vez;