html - texto - teoria de informatica para secundaria

Cuando se incrustan múltiples instancias de las mismas imágenes en un HTML, ¿eso carga la imagen una vez? (3)

Inténtelo: cuando analice los problemas de almacenamiento en caché, una herramienta como Firebug para Firefox o las Herramientas de desarrollo dentro de Chrome es muy beneficiosa. Si abre el panel "Red" en cualquiera de los dos y vuelve a cargar una página, verá qué código de estado HTTP se envió para cada elemento. 304 (No modificado) significa que el elemento se recuperó localmente del caché.

Como dice dthorpe arriba, los encabezados de caché son importantes aquí. Además de asegurarse de que no se haya configurado el ''no-caché'', si tiene acceso a la configuración de su servidor, debe ser proactivo. Si sabe que un recurso no va a cambiar, debe asegurarse de establecer un encabezado ''Expires'' (que le indica a los navegadores una fecha después de la cual la copia en caché debe considerarse obsoleta) o un encabezado ''Cache-Control: max-age'' (que da un número de días / horas en lugar de una fecha establecida).

También puede establecer diferentes escalas de tiempo para diferentes tipos de mime / carpetas, lo que le permite obtener datos de los clientes para actualizar el contenido HTML a menudo, pero las imágenes y las hojas de estilo rara vez.

Aquí hay un buen video / artículo introductorio de Google que vale la pena echarle un vistazo.

Si uso la misma imagen en una sola página varias veces, ¿cada una se cargará por separado, ocupará el ancho de banda y el tráfico, o solo se cargará una y el código de inserción del resto reutilizará la imagen?

Por ejemplo, digamos que hice esto:

<img src = ''http://img.to/image.jpg"/> <img src = ''http://img.to/image.jpg"/> <img src = ''http://img.to/image.jpg"/> <img src = ''http://img.to/image.jpg"/> <img src = ''http://img.to/image.jpg"/> <img src = ''http://img.to/image.jpg"/> ... <img src = ''http://img.to/image.jpg"/> <img src = ''http://img.to/image.jpg"/>

y la imagen.jpg es 100kb. Cuando el navegador carga esta página, ¿desperdiciará (100Kb * # de etiquetas img) de tráfico? ¿O simplemente cargará una imagen.jpg y la reutilizará para el resto de las etiquetas?

Los navegadores que implementan la quinta versión de la especificación HTML pueden reutilizar las imágenes, independientemente de los encabezados HTTP relacionados con el caché. Probablemente solo se producirá una única solicitud de red.

Especificación define clave de imagen.

7.2 Deje que la clave sea una tupla que consiste en la URL absoluta resultante, el modo del atributo de origen cruzado del elemento img y, si ese modo no es No CORS, el origen del objeto Documento.

Cuando el navegador descarga la primera fuente de imágenes, la agrega a la lista de imágenes disponibles usando la tecla.

Si la descarga se realizó correctamente y el agente de usuario pudo determinar el ancho y el alto de la imagen
Establezca el elemento img en el estado completamente disponible.
Agregue la imagen a la lista de imágenes disponibles usando la tecla clave.

Cuando el navegador vea otra imagen con la misma clave, la tomará de una lista de imágenes disponibles.

7.3 Si la lista de imágenes disponibles contiene una entrada para la clave, establezca el elemento img en el estado completamente disponible, actualice la presentación de la imagen de manera apropiada, ponga en cola una tarea para activar un evento simple llamado load en el elemento img, y cancele estos pasos.

Sin embargo, el navegador puede eliminar la imagen de la lista de imágenes disponibles en cualquier momento.

Cada objeto de documento debe tener una lista de imágenes disponibles. Cada imagen en esta lista se identifica mediante una tupla que consta de una URL absoluta, un modo de atributo de configuración de CORS y, si el modo no es No CORS, un origen. Los agentes de usuario pueden copiar las entradas de la lista de imágenes disponibles de un objeto de Documento a otro en cualquier momento (por ejemplo, cuando se crea el Documento, los agentes de usuario pueden agregarle todas las imágenes que están cargadas en otros Documentos), pero no deben cambiar las claves de Las entradas se copian de esta manera al hacerlo. Los agentes de usuario también pueden eliminar imágenes de dichas listas en cualquier momento (por ejemplo, para ahorrar memoria).

Para obtener más información, consulte ¿Cómo se usa una lista de imágenes disponibles al analizar documentos con múltiples nodos img con la misma fuente? problema en el repositorio de HTML estándar en GitHub.

Puede depender de la implementación específica del navegador, pero es de esperar que la primera referencia a la imagen llegue al servidor y que las referencias posteriores a la misma URL de la imagen se sirvan desde la memoria caché del navegador. Por lo tanto, solo una solicitud de red para la imagen.

Es decir, SI las cabeceras de caché HTTP establecidas por el servidor en la respuesta de la imagen permiten que el navegador almacene la imagen en caché. Si el encabezado de la memoria caché se establece en algo así como "no-caché", entonces se requiere que el navegador recupere la imagen para cada referencia. Puede verificar si los encabezados HTTP en la respuesta de la imagen están usando un rastreador de paquetes de red como Fiddler.

Si el navegador no llena la URL de la imagen en el caché del navegador hasta después de que la imagen se haya descargado completamente, entonces podría ver varias solicitudes para la misma imagen, pero eso parece muy poco probable.