Base64 图片导致页面卡顿解决方案

问题描述

开发中有些场景会用遇到 base64 格式图片插入 DOM 中的需求，但是当如果当图片很大的时，会使得图片的 base64 编码字符串很长，这样在插入到 DOM 后很大概率上会导致 UI 线程卡顿，从而影响用户体验，特别是在手机上时非常影响手机的性能。

解决方案

我们可以将 base64 格式的图片转换成 blob 对象，然后再转换成 URL 对象，这样就可以解决上面的问题。

这里能用到的 API 有两个：

• fetch：fetch 函数返回一个 Promise 对象，使得异步操作更加直观和易于处理。
• URL.createObjectURL：用于创建一个包含指定数据的唯一 URL，通常这个方法用于将一些特殊类型的数据，比如 Blob 或 File 对象，转换为可用于访问的 URL。该方法返回的 URL 是一个类似于 blob: 或 file: 开头的字符串，可以用于在浏览器中创建临时的 URL 地址，使得浏览器可以直接访问内存中的数据，而无需通过服务器。

下面就可以用上面的两个 API 来实现上面的需求了：

function base64ToImageUrl(b64str) {
  return new Promise((resolve, reject) => {
    fetch(b64str)
      .then(data => data.blob())
      .then((b) => {
        const url = URL.createObjectURL(b)
        resolve(url)
      })
      .catch(error => {
        reject(error)
      })
  })
}