Question

对于小尺寸图像，在javascript文件（或纯HTML文件）中使用base64编码图像加载时间的好处是什么（如果有的话）？

$(document).ready(function(){
    var imgsrc = "../images/icon.png";
    var img64  = "P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB";

    $('img.icon').attr('src', imgsrc); // Type 1
    $('img.icon').attr('src', 'data:image/png;base64,' + img64); // Type 2 base64
});

Answer 1

好处是您必须减少一个HTTP请求，因为图像是＆＃34;包含＆＃34;在一个文件中，你已经提出了请求。量化取决于很多参数，如缓存，图像大小，网络速度和延迟，所以唯一的方法是测量（实际测量肯定不适用于所有人）。

我应该提到另一种最小化HTTP请求数量的常用方法是使用CSS sprites将许多图像放入一个文件中。这可能是一种更有效的方法，因为它还会导致更少的字节被传输（base64以字节大小膨胀约1.33倍）。

当然，你最终会为此付出代价：降低修改图形资产的便利性。

Answer 2

您需要发出多个服务器请求，假设您下载了一些设计的HTML，例如：

<img src="bar.jpg" />

您已经需要提出要求。创建，协商，下载该HTML并关闭TCP / IP套接字。对于您下载的每个文件都会发生这种情况。

因此，关闭浏览器即可创建新连接并下载jpg P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB

传输那一小段文本的时间很长，不是因为文件下载，而是因为协商到达下载部分。

这对于一个图像来说是很多工作，因此您可以使用base64编码对图像进行内联。这不适用于传统浏览器，只关注现代浏览器。

base64内联数据背后的相同想法是我们为什么要完成闭包编译器（优化下载速度与执行时间）和CSS Spirtes（尽可能从一个请求获取尽可能多的数据，而不是太慢）的原因

base64内联数据还有其他用途，但您的问题与性能有关。

注意不要认为HTTP开销太大而且你只应该发出一个请求 - 这只是愚蠢的。你不想过分和内联所有的东西，只是非常琐碎的一点。这不是你应该在很多地方使用的东西。关注点分离是好的，不要开始滥用这个，因为你认为你的页面会更快（它们实际上会变慢，因为单个文件的下载很大，并且你的页面在完成之前不会开始预渲染）。

Answer 3

它会向您保存对服务器的请求。

当您通过src-property引用图像时，它将加载页面，然后执行其他请求以获取图像。

使用base64编码图像时，它会为您节省延迟。

使用base64编码图像有一些性能优势吗？

3 个答案: