YanKaven ’s website : http://dancewithnet.com/
Data URI
Data URI is a scheme defined by RFC 2397 for embedding 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:[<MIME-type>][;base64],<data>
- 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.
- base64: The encoding of the data following the statement is base64 , otherwise the data must be percent-encoded (that is, urlencode the content).
HTML 4.01 introduced the Data URI scheme in the last century. As of today , all mainstream browsers except IE6 and IE7 support it . However, IE8 still has limitations in its support for Data URI . It only supports object (only pictures). ), img, input type=image, link and URL in CSS, and the data size cannot be greater than 32K.
advantage:
- Reduce the number of HTTP requests , and there is no TCP connection consumption and browser concurrency limit under the same domain name.
- 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.
- For HTTPS sites, there will be security prompts when HTTPS and HTTP are mixed, and HTTPS is more expensive than HTTP, so Data URI has more obvious advantages in this regard.
- The entire multimedia page can be saved as a file.
shortcoming :
- It cannot be reused. If the same content is applied to the same document multiple times, it needs to be repeated multiple times, which greatly increases the amount of data and increases the download time.
- It cannot be cached on its own, so it must be reloaded when its containing document is reloaded.
- The client needs to re-decode and display, which increases point consumption.
- Data compression is not supported, base64 encoding will increase the size by 1/3, and the data volume will increase even more after urlencoding.
- 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) . It is a solution defined by RFC 2557 to save all the 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, with 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. For example, the URL of a resource reference is in the mht file. can be a relative address, otherwise it must be an absolute address. hedger's solution for IE in "Cross Browser Base64 Encoded Images Embedded in HTML" uses a relative path because Content-type: message/rfc822 is declared so that IE parses it according to MHTML. If you do not modify the Content-type, you need to use MHTML. protocol, absolute paths must be used at this time, such as "MHTML – when you need data: URIs in IE7 and under" .
application
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 the page, but they can be used appropriately for images in CSS and JavaScript files. There are great advantages in using:
- The number of requests is greatly reduced. Now the CSS of large websites refers to a large number of image resources.
- Both CSS and JavaScript can be cached, indirectly implementing data caching.
- Using CSS can solve the problem of data URI reuse
- Say goodbye to CSS Sprites . The emergence of CSS Sprites is to reduce the number of requests. However, in addition to bringing exceptions under uncertain circumstances , CSS Sprites also require artificial image merging. Even if there is a merging tool, it still must be artificially effective. Puzzles take a lot of time and make maintenance difficult. 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 images" Using tools implemented in python, this can save a lot of time.
- 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. However, CSS and JavaScript can use gzip compression, which can save 2/3 of the data volume, so using gzip compression The final data amount 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 application example of using it to generate Data URI & MHTML .
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) +
'!03114501408821761.gif)';
}(this));
Original text: http://dancewithnet.com/2009/08/15/data-uri-mhtml/
