使用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編碼的圖像時，它將為您節省延遲。