Data URI usage in javascript

Data URI, not a URL
URL is the abbreviation of uniform resource locator. Each accessible resource in the web has a URL address, such as an image, HTML file, js file, and style sheet file, we can use this address to download this resource.

In fact, the URL is a subset of the URI, and the URI is the abbreviation of the uniform resource identifier. URI is a protocol used to obtain resources, including additional information. The additional information may be an address or an address. If it is an address, the URI becomes a URL. Note that data URI is not a URL because it does not contain the public address of the resource.

Data URI
Data URI is a scheme defined by RFC 2397 to directly embed small files into documents. The basic format is as follows:

Data: [<mime type>] [; charset = <charset>] [; base64], <encoded data>

Code
In fact, the whole can be regarded as three parts, namely [declaration]: [parameter] + [data]. On the left side of the comma is a variety of parameters, and on the right side is data.

Statement:
Data: The Protocol header of the URI, indicating that its resource is a data URI;

Parameters:
1: mime type, indicating the format of data presentation, that is, specify the MIME of the embedded data. For PNG images, the format is image/png. If not specified, the default format is text/plain;

2: character set (character set) is mostly omitted. The default value is charset = US-ASCII. If the specified data format is an image, the character set is no longer used;

3: base64. This part indicates the encoding method of the data. Here, the encoding of the data after the declaration is base64. We do not need to use the base64 encoding format. If that is the case, we will use the standard URL encoding method (in the format of % XX );

Note: base64 is an encoding method that converts data into bit streams and maps them to the set of base64.
Base64 contains A-Z, a-z, natural number and +,/symbol. Equal Sign = indicates that we need to carry out padding ).

Data:
This encoded data part is the actual data, which may contain spaces, but does not matter.

For example: data: image/png; base64, iVBORw0KGgoAAAA... /5AhVEMnSs9MAAAAASUVORK5CYII =

Code
Data URI supports the following types:
Data:, text data
Data: text/plain, text data
Data: text/html, HTML code
Data: text/html; base64, base64 encoded HTML code
Data: text/css, CSS code
Data: text/css; base64, base64 encoded CSS code
Data: text/javascript, Javascript code
Data: text/javascript; base64, base64 encoded Javascript code
Data: image/gif; base64, base64 encoded gif image data
Data: image/png; base64, base64 encoded png image data
Data: image/jpeg; base64, base64 encoded jpeg image data
Data: image/x-icon; base64, base64 encoded icon image data

Therefore, this is why we should first describe the Data URI, not the URL, because only when the additional information is a file (image, HTML file, js file, and style sheet file, it can be understood as a URL, and the additional information can not only be [file], but also [text data ];

Example 1: (text data)

Data: text/plain; base64, bXkgbmFtZSBpcyBKaW9uZy4 =

Code
Data: text/plain; charset = utf-8; base64, 5biV5ouT6YCK5Y + 85Y + 855qE
Example 2: (image data)

Data: image/png; base64, audio/cEvYFpWY + Audio/audio/73if3Yjr32LAoiINezf + BQPz5a3wA3EDHM/sunwwaaasuvork5cyii =

Advantages
1: reduces the number of HTTP requests without the limit on TCP connection consumption and the number of concurrent browsers 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 a security prompt for mixed 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.

5. When the image is dynamically generated on the server side using a program, each access user displays different
...
...

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 greatly, increasing the download time.

2: it cannot be cached by itself. Therefore, it must be reloaded when its contained documents are reloaded.

3: the client needs to be decoded and displayed again, increasing 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 filtering security software, but also has certain security risks.

6: mobile terminals should not use Data URI technology (decoding consumes CPU ).

7: not conducive to maintenance
...
...

Note: A: Use Data URI through the CSS style file.
B: The final data size after gzip compression is (1 + 1/3) * 2 * (1/3) = 8/9, so the final traffic is reduced.

Usage
1: embedded document usage, for example:

Code
Note: This method avoids an HTTP request, but cannot be cached by the browser. It needs to be reloaded every time it is used!

2: Use a CSS style file, for example:

. Img_box {
Width: 100px;
Height: 100px;
Border: 1px solid gray;
Padding: 10px;
Background-image:
Url ("data: image/png; base64, audio/cEvYFpWY + Audio/audio/73if3Yjr32LAoiINezf + BQPz5a3wA3EDHM/sunwwaaasuvork5cyii = ");
         }
1

Note: This method avoids an HTTP request and can be cached by the browser together with the CSS file. It is used repeatedly and will not be loaded once every time it is used.
Browser support
1) Firefox 2 +

2) Opera 7.2 +-the data URI cannot exceed 4100 characters

3) Chrome (all versions)

4) Safari (all versions)

5) Internet Explorer 8 +-the data URI must be smaller than 32 KB

Performance impact
The most interesting thing about Data URI is that it allows you to embed other files in the file. Many new users embed images in CSS files as a way to improve performance. In fact, there are many studies that show that HTTP requests are black holes in the performance of many websites, and reducing HTTP requests can improve the performance in a sense. "Minimize the HTTP request" is also the Yahoo criterion.

However, many studies also show that abuse of Data URI is counterproductive:
1: base64 download speed is slow
2: base64 remains in the "white screen" status until the css download is complete.
3: The Data URI Demo consumes about 53% of CPU resources during rendering, about 4 times more memory, and the average time consumption is 24.6 times higher. It can be seen that the use of Data URl still requires more considerations, within the acceptable range of use.
...
...
Refer:

Data URI & MHTML: used or not?
Mobile Performance Competition: CSS Sprites vs. Data URI
So when should we use Data URI? See the following for details:

Data URI usage suggestions
1: it is recommended that developers restrict the use of Data URIs on small-sized sources, and do not use them multiple times in CSS or inline HTML.

2: Use sprite whenever possible.

3: data uri can be used for some images that are not convenient to use sprite and of low quality. For example, background-position: center bottom is required when the width and height are not fixed.

4: repeat/repeat-x/repeat-y.

5: for individual BT requirements, it can be used as a solution to replace img.

Base64 online generation tool
1: Base64 for online conversion of images

2: Data URI encoding tool

3: Data URI Maker