数据链接

data url

如何书写

数据链接：将目标文件的数据直接书写到路径位置

语法：data:MIME,数据

只要是可以写 url 的地方都可以使用 data-url 格式来书写，不仅是图片，css、js 都可以但是图片居多。

• css 格式

<link rel="stylesheet" href="data:text/css;base64,aDF7Y29sb3I6Ymx1ZTt9" />

• 背景图格式

    <style>
        div{
            width: 400px;
            height: 400px;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4Xu19CXiVxdX")
        }
    </style>

意义

优点：

1. 减少了浏览器中的请求

请求

响应

减少了请求中浪费的时间

2. 有利于动态生成数据

缺点：

1. 增加了资源的体积

导致了传输内容增加，从而增加了单个资源的传输时间

2. 不利于浏览器的缓存

浏览器通常会缓存图片文件、css 文件、js 文件。

3. 会增加原资源的体积到原来的 4/3

应用场景：

1. 但请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。

2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

base64

一种编码方式

通常用于将一些二进制数据，用一个可书写的字符串表示。 网上有很多 base64 编码和解码工具。