Inicio>Tutorial de diseño web>estandarización WEB

Suma de URI de datos MHTML

Autor：Eve Cole Fecha de actualización：2009-08-24 18:39:34

Sitio web de YanKaven : http://dancewithnet.com/

URI de datos

El URI de datos es un esquema definido por RFC 2397 para incrustar archivos pequeños directamente en documentos. Mediante la siguiente sintaxis, puede convertir un archivo pequeño a una codificación específica e incrustarlo directamente en la página:

datos:[<tipo MIME>][;base64],<datos>

  1. Tipo MIME: especifica el MIME de los datos incrustados. Su forma es [tipo]/[subtipo] Por ejemplo, el MIME correspondiente a una imagen png es imagen/png. El parámetro se puede utilizar para especificar información adicional. En la mayoría de los casos, es el parámetro del juego de caracteres que se utiliza para especificar métodos de codificación de texto como texto/sin formato y texto/htm. El valor predeterminado es texto/plain;charset=US-ASCII.
  2. base64: la codificación de los datos que siguen a la declaración es base64 ; de lo contrario, los datos deben estar codificados en porcentaje (es decir, codificar mediante URL el contenido).

HTML 4.01 introdujo el esquema de URI de datos en el último siglo. A día de hoy , todos los navegadores convencionales, excepto IE6 e IE7, lo admiten . Sin embargo, IE8 todavía tiene limitaciones en su compatibilidad con URI de datos . Solo admite objetos (solo imágenes). img, tipo de entrada=imagen, enlace y URL en CSS, y el tamaño de los datos no puede ser mayor a 32K.

ventaja:

  1. Reduzca la cantidad de solicitudes HTTP y no habrá consumo de conexión TCP ni límite de simultaneidad del navegador bajo el mismo nombre de dominio.
  2. El ancho de banda se reducirá para archivos pequeños. Aunque la cantidad de datos aumentará después de la codificación, el encabezado http se reducirá. Cuando la cantidad de datos en el encabezado http sea mayor que el incremento de la codificación del archivo, se reducirá el ancho de banda.
  3. Para los sitios HTTPS, habrá avisos de seguridad cuando se combinen HTTPS y HTTP, y HTTPS es más caro que HTTP, por lo que Data URI tiene ventajas más obvias a este respecto.
  4. Toda la página multimedia se puede guardar como un archivo.

defecto :

  1. No se puede reutilizar. Si el mismo contenido se aplica al mismo documento varias veces, es necesario repetirlo varias veces, lo que aumenta considerablemente la cantidad de datos y aumenta el tiempo de descarga.
  2. No se puede almacenar en caché por sí solo, por lo que debe recargarse cuando se recarga el documento que lo contiene.
  3. El cliente necesita volver a decodificar y mostrar, lo que aumenta el consumo de puntos.
  4. No se admite la compresión de datos, la codificación base64 aumentará el tamaño en 1/3 y el volumen de datos aumentará aún más después de la codificación de URL.
  5. No favorece el filtrado del software de seguridad y también existen ciertos riesgos de seguridad.

HTML

MHTML es la abreviatura de MIME HTML (MultiPurpose Internet Mail Extension HTML) Es una solución definida por RFC 2557 para guardar todo el contenido de una página multimedia en un mismo documento. Microsoft propuso esta solución para admitirla a partir de IE5.0, y Opera9.0 también comenzó a admitirla. Safari puede guardar el archivo en formato .mht (sufijo de archivo MHTML), pero no admite su visualización.

MHTML es relativamente similar a Data URI, con funciones más poderosas y sintaxis más compleja, y no tiene la desventaja de "no se puede reutilizar" en Data URI. Sin embargo, MHTML no es flexible ni conveniente de usar. una referencia de recurso está en el archivo mht puede ser una dirección relativa; de lo contrario, debe ser una dirección absoluta. La solución de hedger para IE en "Imágenes codificadas en Base64 para navegadores cruzados incrustadas en HTML" utiliza una ruta relativa porque el tipo de contenido: mensaje/rfc822 se declara para que IE lo analice de acuerdo con MHTML. Si no modifica el tipo de contenido, es necesario. Para usar el protocolo MHTML, se deben usar rutas absolutas en este momento, como "MHTML: cuando necesita datos: URI en IE7 y versiones anteriores" .

solicitud

La combinación de URI de datos y MHTML puede resolver completamente el problema de todos los navegadores convencionales. Dado que no se pueden almacenar en caché ni reutilizar, no son adecuados para usar directamente en la página, pero se pueden usar apropiadamente para imágenes en archivos CSS y JavaScript. Hay grandes ventajas al usar:

  1. La cantidad de solicitudes se ha reducido considerablemente. Ahora el CSS de los sitios web grandes hace referencia a una gran cantidad de recursos de imágenes.
  2. Tanto CSS como JavaScript se pueden almacenar en caché, implementando indirectamente el almacenamiento en caché de datos.
  3. El uso de CSS puede resolver el problema de la reutilización de URI de datos
  4. Diga adiós a CSS Sprites . La aparición de CSS Sprites tiene como objetivo reducir la cantidad de solicitudes. Sin embargo, además de generar excepciones en circunstancias inciertas , CSS Sprites también requiere una combinación de imágenes artificial. artificialmente efectivos. Los rompecabezas requieren mucho tiempo y dificultan el mantenimiento. Cuando sigue ciertos principios de diseño, puede abandonar por completo los Sprites CSS para escribir CSS y, finalmente, usar herramientas para convertir imágenes en URI de datos y MHTML al cargarlas en el servidor, como "Usar uri de datos para fusionar hojas de estilo e imágenes". herramientas implementadas en Python, esto puede ahorrar mucho tiempo.
  5. La codificación Base64 aumenta el archivo de imagen en 1/3. El uso de URI de datos y MHTML al mismo tiempo equivale a un aumento de 2/3. Sin embargo, CSS y JavaScript pueden usar la compresión gzip, lo que puede ahorrar 2/3 del volumen de datos. , entonces usando la compresión gzip La cantidad de datos finales es (1 + 1/3) * 2 * (1/3) = 8/9, por lo que se reduce el tráfico final.

Para facilitar la implementación de URI de datos y MHTML en CSS, escribí un generador de URI y MHTML de datos . Puede ver el ejemplo de aplicación de su uso para generar URI y MHTML de datos .

Cuando se usa MHTML en un archivo CSS, la URL debe usar una ruta absoluta, que es muy inflexible, por lo que puede considerar usar expresiones CSS para resolverlo ( DEMO ), como por ejemplo:

/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*imagen de fondo:expresión(función(elemento){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(este));

Texto original: http://dancewithnet.com/2009/08/15/data-uri-mhtml/

Artículos relacionados