Con el advenimiento de la era WEB2.0, se ha traído a la red un desarrollo sin precedentes. La experiencia del usuario front-end se está volviendo cada vez más importante para compensar algunas de las deficiencias de la mala interacción del usuario en la estructura B/S. Sin embargo, esto traerá un problema: aumentará la presión sobre el cliente. Por ejemplo, al usar una gran cantidad de código JS, todos sabrán que el código JS que se ejecuta en el cliente afectará la eficiencia del análisis de toda la página web en el navegador, lo que también puede implicar un aumento en el tráfico del cliente. Desde la perspectiva de la carga del servidor o la perspectiva del usuario, ¡es particularmente importante optimizar el código del cliente! Este artículo explica principalmente los métodos de optimización del front-end WEB desde aspectos internos y externos. Espero que pueda brindarles a los lectores algo de experiencia e inspiración.
Primero, veamos los datos de tráfico http de http://yahoo.com a través de un gráfico estadístico de Yahoo:
Podemos encontrar que desde la primera solicitud del servidor hasta que una página se carga completamente en el cliente, la lectura del código HTML solo representa el 5% del tiempo total de respuesta. Este resultado se aplica a la gran mayoría de los sitios web en los Estados Unidos. De los diez sitios web principales, solo uno tiene más del 5% pero menos del 20%. El 80% restante del tiempo se utiliza para leer otro contenido de la página web, es decir, el front-end (el texto original es el front-end). -fin, el significado no incluye html. El resto del código pueden ser imágenes, scripts, flash, videos, varias cosas). Esta es la razón clave por la que deberíamos centrarnos en estas cosas para mejorar la velocidad de visualización.
Hay tres razones principales por las que deberías empezar por el front-end :
1. Fuera del código, tenemos los siguientes tres métodos:
1. Utilice tecnología CDN
Para métodos específicos, puede buscarlo en Google. (El principio general parece ser determinar la ubicación del visitante y el contenido al que accedió para seleccionar el servidor más cercano para manejar la solicitud del usuario)
2. Agregue un encabezado caducado hace mucho tiempo
Expira: jueves, 15 de abril de 2010 20:00:00 GMT
Los navegadores utilizarán el almacenamiento en caché para reducir la cantidad de solicitudes http y acelerar el tiempo de carga de la página. Si se agrega un tiempo de caducidad prolongado al encabezado de la página, el navegador siempre almacenará en caché los elementos de la página.
Sin embargo, esto provocará un problema, es decir, si las cosas en la página cambian, se debe cambiar el nombre; de lo contrario, el cliente no se actualizará activamente. En el grupo de trabajo de Yahoo, se utiliza el número de versión, como yahoo_2. 0.6.js
3.Compresión Gzip
Gzip es el método de compresión más popular y eficaz en la actualidad. Fue desarrollado por GNU y estandarizado por RFC1952.
(Gzip comprime imágenes, css, scripts, etc. en el lado del servidor y luego las envía al navegador del cliente para descomprimirlas. Esto puede aumentar la velocidad de transmisión, pero aumentará la presión sobre el servidor. Generalmente, es más apropiado para comprimir algunos elementos.