Data URI Scheme

One, foreword

Last Friday, I shared this Topic with my colleagues on Any Topic conf. some of them said it was useful, others said it was not useful, and then it was extended to the Topic of website performance. The heated discussion made me think this Topic was good. This article, whether useful or not, is merely theoretical. Also hope everybody to share the actual combat experience together!

Start with the HTTP URI Scheme

The href value http://github.com is an HTTP URI Scheme. So what is a DATA URI Scheme? Data :text/ JPEG; Base64, XINGSXXIANGJIJIGSAG = = resource links, generally appear in the SRC attribute of the img element.

The purpose of a DATA URI Scheme is to embed Base64 encoded DATA into web pages to reduce the number of links to requested resources. In the above DATA URI Scheme base64, the character after base64 is the DATA encoded by base64, which will be decoded and rendered by the browser.

3. Data URI Scheme format

Data: (1) [] (2) (3) [;] [; charset =] (4), (5)

①. Data: indicates the protocol name.

[] : Optional, data type (image/ PNG, text/plain, etc.)

[;charset=] : specifies the character set encoding of the source text

(4). [;] : Data encoding mode (default US-ASCII, BASE64)

⑤., : encoded data

Note:

[][;charset=] The default value is content-Type in HTTP Header.

[b]. [;] The default is US-ASCII, which is the format in which each character is encoded as %xx;

[;charset=] Is invalid for IE, you need to set the encoding mode by charset. [;charset=];charset=]; FF works both ways.

[D]. The data encoded by the

Fourth, the sample

/** * data:, text data * data:text/plain, text data * data:text/ HTML,HTML code * data:text/ CSS; Base64, CSS code * data:text/javascript; Base64,javascript * data:image/x-icon; Base64,base64 encoded icon image data * data:image/ GIF; Base64,base64 encoded GIF data * data:image/ PNG; PNG image data * data:image/ JPEG; Base64,base64 encoded JPEG image data, example: */ body {background-image: url("data:image/ PNG; base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC"); * * *} / data: text/CSS, CSS code, example: * note: the following method is unable to set the background image: url () style * / / / data: text/javascript, javascript code, example:Copy the code

Five, advantages & disadvantages

Advantages:

① reduce the number of resource request links.

Disadvantages:

① will not be cached by the browser;

2. The performance of the mobile terminal is lower than that of the HTTP URI scheme.

Sixth, optimization plan

By using the Data URI Scheme in the BACKground-image style rules of CSS files, they are cached by browsers along with CSS files.

7. Browser support

(1) support.

Opera 7.2+ Data URIs must be less than 4100 characters

IE8+ data URI must be smaller than 32K (IE8 does not support JS data URI)

Chrome, FF and Safari are unlimited

(2). Do not support

IE567

8. Label support

Embed background and backgroundImage properties in object, IMG, Input [type=image], script, link, and CSS rules

IE678 polyfill scheme — MHTML

MHTML (MIME HTML, Multipurpose Internet Mail Extensions HyperText Markup Language) is to attach a Data URI to a page in the form of an attachment. Examples are as follows:

/** FilePath: http://example.com/test.css */ /*! @ignore Content-Type: multipart/related; boundary="_ANY_SEPARATOR" --_ANY_SEPARATOR Content-Location:myidBackground Content-Transfer-Encoding:base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== --_ANY_SEPARATOR-- */ .myid { background-image: url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJgg g=="); *background-image: url(mhtml:http://example.com/test.css! myidBackground); }Copy the code

The above comment is to define a Base64 encoded image named myidBackground and use it in CSS class myID.

Note: 1. The value of boundary field can be customized;

2. The end line of the attachment must be the value of boundary field;

3. Attachment contents cannot be erased by compression tools;

4, because the higher version of IE when using IE8 compatibility mode can recognize the * CSS hack, but does not support MHTML, so it will cause the background image invalid. It would be safer to use IE’s conditional annotations.

X. Security issues

Alert when using Data URIs in HTTPS pages in IE6/7

MS’s interpretation is:

The site you are viewing is a secure site. It uses a security protocol like SSL (Secure Sockets Layer) or PCT (secure Communication Technology) to keep the information you send and receive secure. When a site uses a secure protocol, the information you provide, such as your name or credit card number, is encrypted so that no one can read it. However, this page also contains projects that do not use this security protocol.

That is to say, the problem lies in the Scheme field, because the whole site uses HTTPS scheme, and data Scheme is regarded as an insecure protocol.

Xi. Application

1. Bypass browser filtering

/ / bypass filtering browser http://example.com/text.php?t= ">Copy the code

2. Batch request images

{$.get (' http://imgs.foo.com ', ids:,2,3,4,5,6,7 [1]}, function (data) {var imgs = [] data. Each (function (I, dataUri){ imgs.push($(['', dataUri, '"/>'].join(''))) }) $(body).append(imgs) })Copy the code

12. Complete understanding of Base64 encoding

Base64 character set: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 + /

Byte character mapping (decimal) : the value starts from 0 to 63

Principle:

Example:

A(65)B(66) In binary form: A (01000001) B (01000010) ③. The value is a group of three bytes. The number of non-3 multiples is 0:010000010100001000000000 ④. Add two 0's (00 010000)(00 010100)(00 001000)(00 000000) ⑤. To decimal: (16)(20)(8)(0) ⑥Copy the code

14, THANKS

http://www.cnblogs.com/hustskyking/p/data-uri.html (to finish)