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

Question

是否有理由将PNG和JPG图像嵌入到这样的JavaScript文件中：

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

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

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

Answer 1

对该图像文件的请求比显示二进制图像的时间要长。所以你的页面已经保存了一些请求：）

Answer 2

它最方便，避免预加载图像。由于不必向服务器发送其他请求以显示图像，因此只要将此值设置为src属性，就会显示图像。

就下载的数据量而言，这种技术避免了额外请求的额外开销，但由于整个图像数据在base64中编码，因此下载的总大小可能会略大一些。在您可能拥有大量此类图像的应用程序中，预加载可能会更好。