【前端】DataURL 用法

文章目录

• • 一、基本介绍
  • 二、优点缺点

    一、基本介绍

    • Data-URL：是以data:为前缀，特殊格式的URL，可以将小文件嵌入在文档中。

      /*mediatype：表明数据类型，如image/jpeg表示一个jpeg图片文件，默认值为：text/plain;charset=US-ASCIIencoding：数据编码方式（默认US-ASCII，BASE64两种）data：编码后的数据*/data:[mediatype][encoding],data

      • mediatype：

        类型	描述	示例
        text	普通文件	text/plain，text/html，text/css，text/javascript
        image	图像文件	image/gif，image/png，image/jpeg，image/bmp，image/webp，image/x-icon，image/vnd.microsoft.icon
        audio	音频文件	audio/midi，audio/mpeg，audio/webm，audio/ogg，audio/wav
        video	视频文件	video/webm，video/ogg
        application	二进制数据	application/octet-stream，application/pkcs12，application/vnd.mspowerpoint，application/xhtml+xml，application/xml，application/pdf

        • 示例：先将文件转成base64编码，再通过Data URL，我们把图像内容内置在HTML 中。

          二、优点缺点

          优点：

          1. 减少 HTTP 请求，例如图片体积小，这是还占用一个请求就不值得

          2. 能够在离线情况下访问，而不依赖于外部资源的可用性

          缺点：

          1. Base64 编码后的数据体积 会比 原数据的体积大
          2. Data URL 形式的图片不被浏览器缓存，每次访问页面时都会重新下载一次。
          3. 由于 Base64 跟 CSS 混在一起，增加了浏览器解析CSS树的耗时
          4. IE678 存在兼容性问题
          5. 不适合懒加载，可读性差，也不利于维护