DataURI and MHTML are complete solutions for making web pages of all browsers _ HTML/Xhtml _

The combination of DataURI and MHTML can completely solve all mainstream browsers. They are not suitable for use directly on pages because they cannot be cached or reused, however, the proper use of images in CSS and JavaScript files has a great advantage. Data URI

Data URI is a scheme defined by RFC 2397 to directly embed small files into documents. The following syntax can be used to convert a small file into a specified encoding and embed it directly into the page:

Data :[ ] [; Base64],

1. MIME-type: Specify the MIME of the embedded data. The format is [type]/[subtype]; parameter. For example, the MIME of a png image is image/png. Parameter can be used to specify additional information. In more cases, the parameter charset is used to specify text encoding methods such as text/plain and text/htm. The default value is text/plain; charset = US-ASCII.
2. Base64: declare that the subsequent data encoding is base64; otherwise, the data must be subject to percent code (that is, urlencode the content ).

In the last century, HTML4.01 introduced the Data URI scheme. By now, all mainstream browsers except IE6 and IE7 support the scheme, but IE8 still has restrictions on Data URI support, only URLs in objects (only images), img, input type = image, link, and CSS are supported, and the data volume cannot exceed 32 KB.

Advantages:

1. Reduces the number of HTTP requests without the limit on TCP connection consumption and browser concurrency under the same domain name.
2. For small files, the bandwidth is reduced. Although the data size after encoding increases, the http header is reduced. When the data size of the http header is larger than the file encoding increment, the bandwidth is reduced.
3. For HTTPS sites, there will be security prompts when using both HTTPS and HTTP, while HTTPS requires more overhead than HTTP, so Data URI has more obvious advantages in this regard.
4. You can save the entire multimedia page as a file.

Disadvantages:

1. It cannot be reused. If the same document is applied to the same content multiple times, it needs to be repeated multiple times. The data volume increases significantly, increasing the download time.
2. It cannot be cached on its own, so it also needs to be reloaded when its included documents are reloaded.
3. The client needs to be decoded and displayed again, increasing the point consumption.
4. Data Compression is not supported. base64 encoding increases by 1/3, while urlencode increases the data size.
5. It is not conducive to the filtering of security software, but also has certain security risks.

MHTML

MHTML is short for mime html (Multipurpose Internet Mail Extension HTML). It is defined by RFC 2557 to save all the content of a multimedia page to the same document solution. This scheme was proposed by Microsoft to support IE5.0 and Opera9.0. Safari can save the file as. mht (the suffix of the MHTML file), but does not support displaying it.

MHTML and Data URI are similar in that they have more powerful functions and more complex syntaxes, and do not have the disadvantages of "cannot be reused" in Data Uris, however, MHTML is not flexible and convenient to use. For example, the URL referenced by the resource can be a relative address in the mht file; otherwise, it must be an absolute address. In Cross Browser Base64 Encoded Images Embedded in HTML, hedger uses the relative path for IE because it declares Content-type: message/rfc822 to parse IE according to MHTML, if you do not modify the Content-type, you need to use the MHTML Protocol. in this case, you must use an absolute path, for example, MHTML-when you need data: URIs in IE7 and under.

Application

The combination of Data URI and MHTML can completely solve all mainstream browsers. They are not suitable for direct use on pages because they cannot be cached or reused, however, in CSS and JavaScript files, appropriate use of images has a great advantage:

1. The number of requests is greatly reduced. Currently, CSS of large websites references a large amount of image resources.
2. CSS and JavaScript can both be cached, indirectly implementing data caching.
3. CSS can be used to solve the reuse problem of Data URI.
4. The emergence of CSS Sprites is to reduce the number of requests, but it not only brings exceptions in the case of uncertainty, CSS Sprites also requires human image merging, even if there are merge tools, it is still necessary to manually spend a lot of time on how to effectively solve the puzzle and bring about maintenance difficulties. When you follow certain design principles, you can discard CSS Sprites to write CSS, and finally convert the image to Data URI and MHTML during uploading to the server, for example, using python to merge style sheets and images with data-uri can save a lot of time.
5. Base64 encoding increases the image file size by 1/3, while Data URI and MHTML increase by 2/3 at the same time. However, CSS and JavaScript can be compressed using gzip, saving 2/3 of the Data volume, therefore, the final data size after gzip compression is (1 + 1/3) * 2 * (1/3) = 8/9, so the final traffic is reduced.

To facilitate the implementation of Data URI and MHTML in CSS, I wrote a Data URI & MHTML generator. You can see that it is used to generate Data URI & MHTML application instances.

When using MHTML in a CSS file, the URL must use an absolute path, resulting in great flexibility. Therefore, you can use CSS expression to solve the problem (DEMO). For example:

/*
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 )';
} (This ));