Cómo optimizar el rendimiento del front-end
La optimización del código de desarrollo front-end, la capacidad de mantenimiento y la compatibilidad del navegador son temas muy importantes. Desde la perspectiva de las aplicaciones de ingeniería reales, los problemas de optimización front-end más comunes. Las reglas de optimización del rendimiento del front-end pueden cubrir básicamente la mayoría de los principios actuales de optimización del rendimiento del front-end. A partir de estos principios se extienden muchos métodos de optimización más sofisticados y refinados.
¿Cuáles son las reglas para optimizar el rendimiento del front-end?
Reducir el número de solicitudes HTTP
Intente fusionar imágenes, CSS y JS. Por ejemplo, si carga una página con 5 archivos css y combina estos 5 archivos en uno, solo necesita emitir ? Lo que realmente se devuelve es un salto que contiene el código 301, que apunta a ?/? ). Puede usar rewrite en el servidor nginx; puede usar Alias o mod_rewrite o DirectorySlash en el servidor Apache para evitar esto.
La otra es no saltar entre nombres de dominio, como acceder a ?/bbs? para saltar a ?/?. Luego, puedes usar Alias o mod_rewirte para crear un CNAME (un registro DNS que guarda la relación entre un nombre de dominio y otro nombre de dominio).
13. Eliminar JS y CSS duplicados
Llamar repetidamente el script no solo agregará solicitudes HTTP adicionales, sino que también hará perder tiempo en múltiples operaciones. En IE y Firefox, independientemente de si el script se puede almacenar en caché o no, todos tienen el problema de reevaluar JavaScript.
14. Configurar ETags
Se utiliza para determinar si los elementos en el caché del navegador son consistentes con los del servidor original. Es más flexible que la fecha de la última modificación. Por ejemplo, si un archivo se modifica 10 veces en 1 segundo, Etag puede juzgar con precisión en función del Inode (el número de nodos de índice (inodo) del archivo), MTime (tiempo de modificación). y Tamaño Esto evita el problema de que la grabación MTime de UNIX solo pueda tener una precisión de segundos. Para el uso del clúster de servidores, los dos últimos parámetros están disponibles. Utilice ETags para reducir el ancho de banda y la carga de la aplicación web
15. AJAX almacenable en caché
Las solicitudes asincrónicas también hacen que los usuarios esperen, por lo que cuando utilice solicitudes ajax, debe informar activamente al navegador si la solicitud. Si hay un caché, solicite el contenido almacenado en caché. Como se muestra en el siguiente fragmento de código, cache: true es un requisito explícito. Si la solicitud actual tiene un caché, úselo directamente
$.ajax({?url: 'url', ?dataType: "json", ?cache: true, ?success: function(son, status){ ?}
16. Utilice GET para completar solicitudes AJAX
Cuando utilice XMLHttpRequest, el método POST en el navegador hay un proceso de "dos pasos": primero envíe el encabezado del archivo y luego envíe los datos. Por lo tanto, tiene más sentido utilizar GET para obtener los datos
17. número de elementos DOM
Esto es. Una pregunta universitaria puede conducir a muchos detalles de optimización. Si desea estudiarlo en detalle, puede leer los siguientes libros recomendados. Los DOM reducirán la carga de análisis del navegador
18 Evite 404
Por ejemplo, cuando hay un problema con los archivos css y js del enlace externo y se devuelve un 404, lo hará. Destruya la carga paralela del navegador.
19. Reduzca el tamaño de las cookies
<. p>No coloque tantas cosas en la cookie, porque cada solicitud debe llevarse consigo.20. Utilice dominios sin cookies
Por ejemplo, CSS, js, imágenes, etc., cuando el cliente solicita archivos estáticos, el impacto de la transmisión repetida de cookies en el dominio principal. El nombre se reduce.
21. No utilice filtros
El atributo exclusivo de IE AlphaImageLoader se utiliza para corregir el efecto translúcido de las imágenes PNG mostradas en versiones inferiores a 7.0. El problema con este filtro es que deja de representar el contenido y congela el navegador cuando éste carga la imagen. Opera una vez en cada elemento (no solo en las imágenes), lo que aumenta la sobrecarga de memoria, por lo que sus problemas son multifacéticos.
La mejor manera de evitar el uso de AlphaImageLoader por completo es utilizar el formato PNG8, que funciona bien en IE. Si realmente necesita utilizar AlphaImageLoader, utilice el guión bajo _filter para que no sea válido para los usuarios de IE7 y superiores.
22. No escale imágenes en HTML
Por ejemplo, si el tamaño de imagen que necesita es 50*50
entonces no es necesario utilizarlo. una imagen de 500*500 El tamaño de las imágenes afecta la carga
23. Reducir favicon.ico y caché