在JavaScript中嵌入图像二进制文件

是否有理由将PNG和JPG图像嵌入如下JavaScript文件：

// Template/Image data
var LOGO = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4 etc";

var BACKGROUND = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIA etc";

---

如果我删除这些部分并调用存储在服务器上的文件，会不会有性能损失？我能想到的唯一一件事是Apache为这些图像提供额外的请求，但我甚至不确定它是否可以这样工作。还有什么吗？

对该图像文件的请求比从二进制文件中显示图像所花费的时间更长。因此，您的页面保存了一些请求：）

这主要是为了方便和避免预加载图像。由于不需要向服务器发送额外的请求来显示图像，因此只要将此值设置为

src

属性，就会显示图像

---

就下载的数据量而言，这种技术避免了额外请求的额外开销，但下载的总大小可能会稍大一些，因为整个图像数据都是用base64编码的。在可能有很多这样的图像的应用程序中，预加载可能会更好。

没有特别的原因，它是base64图像，无论它是在javascript文件、css文件还是HTML中，在性能方面都无关紧要，它的大小相同，图像也不会缓存，但javascript文件可能会被缓存。Base64减少了一个请求，但图像的大小增加了约1/3。使用这种原理，这不是一种常见的做法吗？从理论上讲，你可以将所有重要的图像嵌入到你的HTML中，以节省请求的数量，并将不重要的图像留到以后加载，不是吗？我只是没听说过这是一种推荐的优化技术。但你可能希望跨页面和跨同一页面的多次重新加载缓存重复使用的图像。我通常将此技术用于徽标和图标等小图像。