乐趣区

关于前端:不一样的图片加载方式

jiezi

在浏览网页的过程中，图片最容易吸引用户的注意力，它即能给用户直观感触，又能清晰地表白用意，所以在制作网页时，如何疾速无效地加载图片资源显得尤为重要。

常见的图片加载形式

一般而言，最常见的图片加载形式是 HTTP URI Scheme 简称 HTTP URI。例如：某图片存储在又拍云存储上，链接为 https://f.lxpzyy.top/upyun/up…。咱们能够通过引入图片 HTTP 链接的形式，如：<img src=”https://f.lxpzyy.top/upyun/upcdn.svg”/> 来加载图片。

除此之外，咱们能够通过 Data URI Scheme 的形式来引入图片。

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

Data URI Scheme 的形式和 HTTP URI 的应用较为相似，只是看起来多了很多“乱码”。那这些乱码有什么作用呢？和 HTTP URI 相比，它有什么劣势让咱们抉择它呢？

初识 Data URI

Data URI scheme 简称 Data URI，是在 RFC2397 中进行定义的。目标是将一些小的数据，间接嵌入到网页中，从而不必再从内部文件载入。以上方的 Data URI 链接为例：

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

咱们能够看到它由 data，image/svg+xml，base64 以及前面的字符串组成。

data:<mime type>[;<encoding>],<encoded data>

这几局部别离为：

  • data： 示意获得数据的协定名称，表明这是一个 Data URI。
  • mime type： 数据类型名称，也是就是 image/svg+xml，如果传入的是个 png 图片，那么能够指定类型为 image/png。
  • charset=<charset>： 可不填，默认是 charset=US-ASCII 编码。
  • base64： 是数据的编码方法。
  • encoded data： 通过 base64 编码后的数据。

咱们能够看到，除去可不填的 charset=<charset>，应用 Data URI 必然会用到 base64 编码，那这个要如何取得呢？

如何取得 base64 编码

最简略的形式是间接上网找一个编码小工具。

当初网上有很多的 base64 编码小工具，他们能够间接将文件或者字符进行 base64 解编码。

除此之外以下代码语言也都有其对应的 base64 编码方式，能够很不便地进行编码解码转换：

  • JAVA

String test="Upyun";
BASE64Encoder base64Encoder=new BASE64Encoder();
String encode = base64Encoder.encode(test.getBytes("UTF-8"));
System.out.println(encode);
  • PHP
$str = 'Upyun';
$encode = base64_encode($str);
echo $encode.'<br>';
  • JavaScript 
var data=windows.btoa('Upyun');

Data URI 的应用形式及劣势

理解了 Data URI 的大抵状况，咱们来看看它要如何应用。

它次要有两种应用形式，第一种是将解决好的 Data URI 格局数据，放入 HTML 页面代码 img 标签的 src 属性中。这种形式的益处是缩小了 HTTP 申请，毛病是无奈进行缓存。另一种形式则是将 Data URI 放入到 css 里，长处是浏览器会踊跃缓存 css 文件来晋升加载页面时的速度，毛病是减少了 css 的长度。

那么回到咱们最后的问题 Data URI 比 HTTP URI 的劣势是什么呢？

相比 HTTP URI，Data URI 领有以下劣势：

  • 应用 Data URI 可能无效缩小 HTTP 申请数
  • 不依赖于网络环境，即没有网络的时候页面中的资源也能够被加载进去
  • 能够罢黜一些极小文件对 HTTP 申请的占用

当然 Data URI 也有不少毛病。通过 Base64 编码后的文件或者数据，通常来说比起原文件体积增大了 30% 左右，而后 Data URI 通常会写在 css 文件中，不易保护，另外手机端加载 Data URI 资源也比拟耗费 CPU 资源。

相比之下，Data URI 还是很值得应用的，当初就有很多场景都应用 Data URI 的形式引入资源，比方百度首页的小图标以及谷歌的首页等。

如果想让网站领有不同的加载形式，特地是防止因网络情况差导致的无奈加载问题，那肯定要试试 Data URI。

在思考应用 Data URI 的过程中，咱们能够从以下几点着重思考:

  • 图片的理论尺寸比拟小
  • 不常常更新的资源图片
  • 须要在页面中常常应用的图片

举荐浏览

深入浅出聊聊 Rust WebAssembly（一）

go-zero：开箱即用的微服务框架

退出移动版