Base64 格式图片插入 DOM 卡顿解决方案

Base64 格式图片插入 DOM 卡顿解决方案

背景

在某些场景下我们会遇到将一张被转为 base64 编码的图片插入到 DOM 树中的需求。例如以下操作：

const b64str = 'blablabla'
const img = new Image()
img.src = b64str
document.querySelector(dom).append(img)

如果当这个图片很大导致 base64 编码的字符串过长，在插入 DOM 的过程中难免会造成 UI 上的卡顿。尤其是在当下，各种 UI 框架盛行，DOM 节点乱用滥用使得大部分网站的 DOM 树过深过复杂，插入一个过大的 DOM 节点势必会影响用户体验。

解决方案

我们可以将 base64 字符串转为 Blob 对象，并生成指向该对象的 URL。

我们将使用到两个 API：

1. fetch(resource, init)
2. URL.createObjectURL(object)

fetch 自然不用多说，先简单介绍一下 URL.createObjectURL(object)。其参数 object 类型可为 File、Blob、MediaSource。返回值为 DOMString 类型，代表指向 object 的一个 URL。

返回值：
A DOMString containing an object URL that can be used to reference the contents of the specified source object.

具体实现方案：

fetch(b64str).then(data => data.blob()).then((b) => {
  const url = URL.createObjectURL(b)
  const img = new Image()
  img.src = url
  document.querySelector(xxx).append(img)
})

可以封装成小函数：

function insertB64Image(b64str, targetDOMSelector) {
  return fetch(b64str).then(data => data.blob()).then((b) => {
    const url = URL.createObjectURL(b)
    const img = new Image()
    img.src = url
    document.querySelector(targetDOMSelector).append(img)
  })
}

兼容性是 IE11 以上的浏览器可以完美使用，也就是说现代化浏览器是完全不用担心兼容性问题的。

原理

解决方案的原理非常基础，其为

1. 使用 fetch 直接请求 base64 图片资源，将返回值转换为浏览器资源 Blob 对象；
2. 生成 Blob 对象的 ObjectURL，并将其作为 Image 对象的 src 属性；
3. 在 DOM 指定位置插入 Image 对象。