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

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请求，因为图像被“包含”在你提出请求的文件中。 量化取决于很多参数，如缓存，图像大小，网络速度和延迟，所以唯一的方法是测量（实际测量肯定不适用于所有人）。

我应该提到另一种最小化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编码的图像时，它将为您节省延迟。