在 React 中处理图像的最佳实践是什么？

Question

我一直在从事一个需要显示大量图像的项目。我发现加载所有图像会花费大量时间。一位朋友建议我使用缓存来节省时间。 因此，我将图像转换为 Base64 的字符串，当我登录网站时，我将所有必要的图像存储到缓存中并加载它。但我不确定这是否是一个好的做法。 下面是转换和存储图像的代码。

希望听听前辈的意见。

这是我尝试过的代码。

export const imageUrlToBase64 = async (file, fileType, callback) => {

    console.log(file);
    if(file instanceof Blob) {
        imageFileToBase64(file, fileType, function(base64String) {
            if(base64String) {
                callback(base64String);
            }
        });
    } else {
        urlToBase64(file, fileType, function(base64String) {
            if(base64String) {
                callback(base64String);
            }
        });
    }
    // Create a new Image element
    
}

export const saveToCache = async (url, data) => {
  if (url === 'user') console.log(data);

  try {
    const cache = await caches.open('mychache');
    await cache.put(url, new Response(data));
  } catch (error) {
    console.error('Error saving data to cache:', error);
  }
};


export const readFromCache = async (url) => {
  
  let data = "";
  
  try {
    const cache = await caches.open('mychache');
    const response = await cache.match(url);
    if (response) {
      data = await response.text();
    }
  } catch (error) {
    console.error('Error reading from cache:', error);
  }
  if(url === 'user') console.log(data)
  return data;
};

Answer 1

使用 Base64 编码字符串缓存图像可以是减少加载时间的一种方法，但重要的是要考虑权衡和潜在的缺点。

以下是需要考虑的几点：

1. 增加存储大小：Base64 编码使图像数据的大小增加约 33%。这意味着对于每 3 个字节的图像数据，您将在 Base64 编码字符串中拥有 4 个字节。如果您有大量图像或大图像，这可能会显着增加存储要求。

2. 内存使用：与直接存储二进制图像数据相比，将图像存储为 Base64 字符串会消耗更多内存。如果您正在处理大量图像或高分辨率图像，这可能会成为一个问题。

3. 网络开销：虽然将图像存储为 Base64 字符串可以减少加载图像所需的 HTTP 请求数量（因为它们直接包含在 HTML 或 CSS 中），但它可以增加网页的初始负载大小。这可能会影响初始加载时间，尤其是在较慢的连接上。

4. 缓存开销：在缓存中存储 Base64 编码图像可能不如缓存二进制图像数据高效。根据缓存机制，您可能会在存储和检索时间方面产生额外的开销。

5. 动态内容：如果您的图像是动态的并且经常变化，将它们缓存为 Base64 字符串可能不是最好的方法，因为每次图像变化时您都需要更新缓存的字符串。

6. 浏览器兼容性：虽然大多数现代浏览器支持 Base64 编码图像，但较旧的浏览器或某些环境（例如电子邮件客户端）可能无法正确处理它们。

7. 维护开销：将图像转换为 Base64 字符串并在代码中管理它们会增加复杂性和维护开销。权衡收益与成本非常重要。

总之，虽然在某些情况下使用 Base64 编码的字符串来缓存图像可能是一种可行的方法，但必须仔细考虑其影响和潜在的缺点，特别是在增加存储大小、内存使用、网络开销和维护复杂性方面。根据您的具体用例和要求，可能有值得探索的替代缓存策略或优化。