Data URI and MHTML completely solve all browsers_HTML/Xhtml_web page production

Data URI

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

data:[][;base64],

1. MIME-type: Specifies the MIME of the embedded data. Its form is [type]/[subtype]; parameter. For example, the MIME corresponding to a png image is image/png. Parameter can be used to specify additional information. In more cases, it is the charset parameter used to specify text encoding methods such as text/plain and text/htm. The default is text/plain;charset=US-ASCII.
2. base64: The encoding of the data following the statement is base64, otherwise the data must be percent-encoded (that is, urlencode the content).

In the last centuryHTML4.01 introduced the Data URI scheme. As of todayexcept for IE6 and IE7, all major browsers support, but IE8 The support for Data URI is still limited . It only supports object (only for pictures), img, input type=image, link and URL in CSS, and the data size cannot be greater than 32K.

Advantages:

1. Reduce the number of HTTP requests, there is no TCP connection consumption and the limit on the number of concurrent browsers under the same domain name.
2. Bandwidth will be reduced for small files. Although the amount of data will increase after encoding, the http header will be reduced. When the amount of data in the http header is greater than the increment of file encoding, the bandwidth will be reduced.
3. For HTTPS sites, there will be security prompts when using HTTPS and HTTP together. HTTPS is more expensive 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. Cannot be reused. If the same content is applied to the same document multiple times, it needs to be repeated multiple times, which increases the amount of data and increases the download time.
2. cannot be cached on its own, so it will be reloaded when its containing document is reloaded.
3. The client needs to re-decode and display, which increases point consumption.
4. Data compression is not supported, base64 encoding will increase the size by 1/3, and the data volume will increase even more after urlencoding.
5. It is not conducive to the filtering of security software, and there are also certain security risks.

MHTML

MHTML is the abbreviation of MIME HTML (Multipurpose Internet Mail Extension HTML), which is a solution defined by RFC 2557 to save all contents of a multimedia page into the same document. This solution was proposed by Microsoft to support it starting from IE5.0, and Opera9.0 also started to support it. Safari can save the file in .mht (MHTML file suffix) format, but does not support displaying it.

MHTML is relatively similar to Data URI. It has more powerful functions and more complex syntax, and does not have the disadvantage of "cannot be reused" in Data URI. However, MHTML is not flexible and convenient to use, such as the URL of resource references. It can be a relative address in the mht file, otherwise it must be an absolute address. hedger's 《Cross Browser Base64 Encoded Images Embedded in HTML》The solution for IE uses a relative path because Content-type: message/rfc822 is declared so that IE will parse it according to MHTML. If the Content is not modified -type requires the use of the MHTML protocol. In this case, the absolute path must be used, such as 《MHTML – when you need data: URIs in IE7 and under》.

Apply

The combination of Data URI and MHTML can completely solve the problem of all mainstream browsers. Since they cannot be cached and reused, they are not suitable for use directly in pages, but they are suitable for use in CSS and JavaScript files. Appropriate use of pictures has great advantages:

1. Greatly reduce the number of requests. Now the CSS of large websites refers to a large number of image resources.
2. Both CSS and JavaScript can be cached, indirectly realizing data caching.
3. Using CSS can solve the problem of data URI reuse
4. FarewellCSS Sprites, CSS Sprites appeared to reduce the number of requests, but in addition to bringing exceptions in uncertain situations, CSS Sprites also require artificial images Merging, even if there is a merging tool, still requires a lot of time spent on how to effectively puzzle, and brings maintenance difficulties. When you follow certain design principles, you can completely abandon CSS Sprites to write CSS, and finally use tools to convert images into Data URI and MHTML when uploading to the server, such as "Using data-uri to merge style sheets and The tool implemented in python in the picture " can save a lot of time.
5. Base64 encoding increases the image file by 1/3. Using Data URI and MHTML at the same time is equivalent to an increase of 2/3, but CSS and JavaScript can use gzip compression, which can save 2/3 of the data volume, so use The final data volume after gzip compression is (1 1/3) * 2 * (1/3) = 8/9, so the final traffic is reduced.

In order to facilitate the implementation of Data URI and MHTML in CSS, I wrote a Data URI & MHTML generator. You can see the generated Data URI & MHTML application example.

When using MHTML in a CSS file, the URL must use an absolute path, which is very inflexible, so you can consider using CSS expression to solve it (DEMO), such as:

/*
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)