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对象。

评论列表

添加新评论