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

本贴最后更新于 1805 天前,其中的信息可能已经事过景迁

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 对象。
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 研究
    12 引用 • 34 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...