JS Magic Hall: Data URI Scheme Introduction

First, preface

In Friday, the company's internal any Topic Conf. I shared this topic with my colleagues, some colleagues said this useful, some colleagues said this is useless, and later extended to the topic of website performance, we discuss the intensity of this topic is also good. In this article, regardless of whether it is useful or not, just record theoretical knowledge. Also hope that everyone together to share the actual combat experience Ah!

Second, start with the HTTP URI scheme

For <a href="http://github.com">http URI scheme</a> I think we should all be familiar with it, The href attribute value http://github.com is the HTTP URI scheme, so what is the data URI scheme? In fact, it is like a data:text/jpeg;base64,xingsxxiangjijigsag=== resource link, which generally appears in the SRC attribute of the IMG element.

The purpose of data URI scheme is to embed the BASE64 encoded in the Web page, thus reducing the number of links to the requested resource. The data URI scheme above base64, after which the character is Base64 encoded, the browser will decode it and render the picture resource.

Third, Data URI scheme format

data:① [<mime type>]② [; charset=<charset>]③ [; <encoding>]④ , <encoded data>⑤

①. data : Name of the agreement;

②. [<mime Type>] : Optional, data type (image/png, Text/plain, etc.)

③. [; charset=<charset>] : Optional, Character set encoding method

④. [; <encoding>] : Data encoding Method (default us-ascii,base64 two kinds)

⑤. , <encoded data> : Encoded data

Attention:

[A]. The default value of [<mime Type>][;charset=<charset>] is the value of the field Content-type in the HTTP Header;

[b]. [; <encoding>] The default value is Us-ascii

Iv. Advantages & Disadvantages

Five, optimization program

VI. Browser support