¿Cómo cancelar la solicitud de imagen de la etiqueta img?

De hecho, si un sitio web tiene demasiados recursos de imágenes, por muy bueno que sea el entorno de red del cliente, afectará la velocidad de carga de la página, porque cuando se soliciten estos recursos en el servidor, también ocuparán el ancho de banda del servidor. Entonces, si un sitio web tiene muchas imágenes, ¿cómo se debe optimizar el sitio web para aumentar la velocidad de apertura y representación de la página? Me gustaría darle algunas sugerencias para su referencia:

Separación de condiciones dinámicas y estáticas

Es posible que la mayoría de mis amigos no sepan que los navegadores tienen un límite en la cantidad de solicitudes simultáneas. bajo el mismo nombre de dominio, que ahora es el navegador principal. Los navegadores generalmente limitan el número de solicitudes simultáneas en el mismo dominio de 3 a 5. Los valores de referencia para la concurrencia en el mismo dominio para diferentes navegadores son los siguientes:

Entonces podemos implementar solicitudes dinámicas y solicitudes estáticas con diferentes nombres de dominio, de modo que, por un lado, puede superar el límite del navegador de solicitudes simultáneas en el mismo dominio y, por otro lado, también reduce la posibilidad de Solicitudes dinámicas y estáticas que interactúan entre sí.

Todos los recursos estáticos son acelerados por CDN

Si colocamos todos los recursos estáticos (archivos JS, archivos CSS, imágenes, audio y video, etc.) en el servidor de origen, entonces Cuándo el cliente solicita estos recursos, los descargará desde el sitio de origen. Debe saber que cuando el cliente descarga recursos del servidor, también ocupa el ancho de banda ascendente del servidor y, generalmente, el ancho de banda del servidor tiene un límite superior. Cuando hay más usuarios, el ancho de banda del servidor de recursos estáticos puede llenarse, lo que hace que todos los usuarios se sientan "lentos" al descargar recursos.

Por lo tanto, necesitamos usar CDN para acelerar los recursos estáticos. CDN en sí es una tecnología de almacenamiento distribuido que reflejará los recursos estáticos en el servidor de origen en el nodo CDN. se implementan en todo el país para garantizar que los usuarios soliciten recursos cercanos y también acelerar la solicitud de recursos del cliente.

Carga diferida de recursos de imágenes

También hay muchos sitios que no realizan un procesamiento de carga diferida para recursos de imágenes, lo que hace que se descarguen todas las imágenes de esta página. Es posible que las imágenes aún no se hayan descargado. Se descargan y renderizan cuando llegan al campo de visión del usuario. ¡Esto es un desperdicio de recursos!

Solo podemos cargar las imágenes dentro del rango visible de la ventana del navegador, y las imágenes que deben girarse para verlas no se cargan temporalmente. Esto logra la carga bajo demanda, lo que puede mejorar en gran medida la apertura. Tiempo de renderizado de la página.

Esto es lo que se entiende por “cancelar la solicitud de imagen de la etiqueta img”.

Cargar imágenes de diferentes tamaños según el entorno de red

Esto es fácil de entender y existen muchas aplicaciones y sitios web que lo hacen. Por ejemplo, puedes cargar imágenes de diferentes tamaños en entornos 4G y WiFi, y también puedes cargar imágenes de diferentes tamaños según la velocidad de la red. Lo anterior es mi punto de vista. ¿Qué opinas de este tema? Bienvenido a comunicarse en el área de comentarios a continuación ~ Soy un creador en el campo de la tecnología y tengo diez años de experiencia en la industria de Internet. Las consultas en línea son bienvenidas