"Aw, Snap" when data uri is too large-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Data URI 将图片或其他二进制数据嵌入到 CSS 或 HTML 中是一种常见的技术。然而，当我们试图嵌入过大的数据时，可能会遇到 Chrome 浏览器显示 “Aw, Snap” 错误页面的问题。

本文将介绍这个问题的原因和解决方法，并提供示例代码和指导意义。

问题原因

Chrome 浏览器有一个安全机制，称为“沙箱”。这个沙箱确保浏览器的稳定性和安全性，可以防止恶意代码执行和系统崩溃等问题。

当使用 Data URI 嵌入过大的数据时，将会导致浏览器内存占用过高，进而触发 Chrome 浏览器的沙箱机制，从而出现 "Aw, Snap" 错误页面。

解决方法

为了避免 Data URI 过大导致的问题，我们可以使用以下两种方式来解决：

1. 使用 Gzip 压缩

对于较大的 Data URI，使用 Gzip 来压缩它们可以有效地减小它们的大小。这样可以降低浏览器内存占用，从而避免出现 "Aw, Snap" 错误页面。

以下是一个示例代码，演示如何使用 Gzip 压缩 Data URI：

background-image: url(data:image/svg+xml;charset=utf-8;base64,H4sIAAAAAAAAAC2RPQrCUBCG7y9dIkFJiYvU6HTLWb1QIq3aWF6KvUJOKcZMzu7R6NIeXQSzjvDO8fC0VQwzqBmuUt6UkZ//INc7x0aPpXO7TJT777P8ARRr7mstEBMnivlx7DQvzl8Wu7gqaOlvG9+YH2vWEaS5wFtEhAMzURQUOMtEvb4tGXgJdhx/MnX9MNGvA1nAsvtwfuR15dkiKjF5xt5B5DPnuBh2LD3myMP5zgYykSzyfPHOoKjkt0cE28vVa41PO4pPjxOxqx11B1NlwtYJz51N+RliMQKzN/estG7ljj0WaJtnQl0ac5qfBv12evn26yjM2n6NBf3ClUvZ6/mKZ+f/Ixou6X9p6KjAAAA)

可以看到，这个 Data URI 已经使用 Gzip 压缩，并通过 data: 方案指定了 SVG 图像的 MIME 类型。

2. 使用 Blob URL

另一个解决方法是将二进制数据转换为 Blob 对象，并使用 Blob URL 来代替 Data URI。这种方法可以避免浏览器内存占用过高，而且在某些情况下还可以提高性能。

以下是一个示例代码，演示如何使用 Blob URL：

fetch('https://example.com/image.png')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  });

这个代码片段中，我们首先使用 fetch() 函数获取图像数据，并将其转换为 Blob 对象。然后，我们使用 URL.createObjectURL() 方法来创建一个 Blob URL，并将它赋值给 img 元素的 src 属性。最后，我们向文档中添加了这个图片元素。

指导意义

在前端开发中，Data URI 是一项非常有用的技术，它可以使

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/27060