URI de datos El URI de datos es una solución definida por RFC 2397 para incrustar archivos pequeños directamente en documentos. A través de la siguiente sintaxis, puede convertir archivos pequeños en codificaciones especificadas y incrustarlos directamente en la página:
Datos: [<Mime-Type>] [; Base64], <Cata>
- Tipo MIME: Especifica el MIME de los datos integrados. Su forma es [tipo]/[subtype]; Parámetro, por ejemplo, el MIME correspondiente a la imagen PNG es la imagen/PNG. El parámetro puede usar información adicional para especificar los parámetros de Charset para texto/simple y texto/htm, etc. El valor predeterminado es Text/Plain; Charset = US-ASCII.
- Base64: Declarar la codificación de los datos posteriores es Base64, de lo contrario, los datos deben estar codificados con un número porcentual (es decir, URLEncode el contenido).
En el siglo pasado, HTML4.01 introdujo la solución URI de datos. Hasta el día de hoy, todos los navegadores convencionales, excepto IE6 e IE7, pero IE8 todavía tiene restricciones en el soporte de URI de datos, solo que soporta el objeto (solo cuando las imágenes), IMG, tipo de entrada = imagen, enlace y CSS, y el volumen de datos no puede ser mayor que 32K.
ventaja:- Reduzca el número de solicitudes HTTP, sin el límite del consumo de conexión TCP y el número de concurrencia de navegadores bajo el mismo nombre de dominio.
- Para archivos pequeños, el ancho de banda se reducirá. Aunque la cantidad de datos aumentará después de la codificación, se reduce el encabezado HTTP. Cuando la cantidad de datos del encabezado HTTP es mayor que el incremento de la codificación de archivos, se reducirá el ancho de banda.
- Para los sitios HTTPS, habrá indicaciones para mezclar HTTPS y HTTP, y HTTPS es más costoso que HTTP, por lo que URI de datos tiene ventajas más obvias a este respecto.
- Puede guardar toda la página multimedia como un archivo.
deficiencia :
- No se puede reutilizar. Si el mismo documento aplica el mismo contenido varias veces, debe repetirse varias veces, y la cantidad de datos aumenta enormemente, lo que aumenta el tiempo de descarga.
- No se puede almacenar en caché solo, por lo que también debe volver a cargar cuando contiene recargas de documentos.
- El cliente necesita redecode y visualización, lo que aumenta el consumo.
- La compresión de datos no es compatible, la codificación BASE64 aumentará en 1/3 del tamaño y la cantidad de datos aumentará más después de URLEncode.
- No es propicio para el filtrado del software de seguridad, pero también tiene ciertos riesgos de seguridad.
Mhtml MHTML es la abreviatura de MIME HTML (Extensión de correo de Internet multipropósito HTML), que se define por RFC 2557 para guardar todos los contenidos de una página multimedia al mismo documento. Microsoft propuso esta solución para admitirla desde IE5.0, y Opera9.0 también comenzó a admitirla. Safari puede guardar el archivo en .mht (el sufijo del archivo MHTML), pero no admite mostrarlo.
MHTML y URI de datos son similares, con funciones más poderosas y sintaxis más compleja, y no tienen las desventajas que no se pueden reutilizar en URI de datos, pero MHTML no es flexible y lo suficientemente conveniente como para usar. Por ejemplo, la URL referenciada a un recurso puede ser una dirección relativa en el archivo MHT, de lo contrario debe ser una dirección absoluta. La solución de Hedger para IE en "Imágenes codificadas por el navegador Cross64 incrustadas en HTML" usa rutas relativas porque declara que el contenido: Mensaje/RFC822 para hacer IE Parse de acuerdo con MHTML. Si el tipo de contenido no se modifica, se requiere el protocolo MHTML. En este momento, se deben usar rutas absolutas, como "MHTML, cuando necesite datos: URI en IE7 y menores".
solicitud La combinación de datos URI y MHTML puede resolver completamente todos los navegadores convencionales. Debido a los defectos de ser almacenados en caché y reutilización, no son adecuados para su uso en páginas directamente. Sin embargo, tienen grandes ventajas en el uso apropiado de imágenes en los archivos CSS y JavaScript:
- El número de solicitudes se ha reducido considerablemente, y el CSS de los grandes sitios web ahora hace referencia a una gran cantidad de recursos de imagen.
- Tanto CSS como JavaScript se pueden almacenar en caché, implementando indirectamente el almacenamiento en caché de datos.
- El uso de CSS puede resolver el problema de reutilización del URI de datos
- Diga adiós a los sprites de CSS, los sprites CSS parecían reducir la cantidad de solicitudes, pero además de traer excepciones en situaciones inciertas, los sprites CSS también requieren fusión de imágenes artificiales. Incluso si hay una herramienta de fusión, todavía tiene que pasar artificialmente mucho tiempo sobre cómo rompecabezas de manera efectiva y traer dificultades de mantenimiento. Después de seguir ciertos principios de diseño, puede abandonar completamente los sprites de CSS para escribir CSS y finalmente usar herramientas para convertir imágenes en URI de datos y MHTML durante la carga al servidor, como las herramientas implementadas en Python en "Usar hojas e imágenes de estilo de fusión de datos de datos", que pueden ahorrar mucho tiempo.
- La codificación BASE64 aumenta el archivo de imagen en 1/3, y el uso de URI de datos y MHTML al mismo tiempo es equivalente a un aumento de 2/3. Sin embargo, CSS y JavaScript pueden usar la compresión GZIP, que puede guardar 2/3 del volumen de datos, por lo que el volumen de datos final después de usar compresión GZIP es (1 + 1/3) * 2 * (1/3) = 8/9, por lo que el tráfico final se reduce.
Para facilitar la implementación de URI de datos y MHTML en CSS, escribí un generador de URI y MHTML de datos, que puede ver utilizando para generar instancias de aplicación URI y MHTML de datos.
Cuando se usa MHTML en archivos CSS, la URL debe usar una ruta absoluta, lo que la hace muy inflexible. Por lo tanto, puede considerar el uso de la expresión de CSS para resolver (demostración), como:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*Background-Image: Expression (Function (ELE) {
ele.style.backgroundimage = 'url (mhtml:' +
document.getElementById ('data-uri-css'). getAttribute ('href', 4) +
'! 03114501408821761.gif)';
}(este));
