資源時Web瀏覽器保持的網頁圖像上的網頁 與通常的網址的網址或數據URI

Question

一個罐源圖像的使用區別：

<img src="some-image-url" > 

，或者

與數據URI：

<img src="data:......." > // data:[<mediatype>][;base64],<data> 

這與在HTML文檔中使用腳本或使用腳本的URL與腳本標記鏈接相似。

第二個讓頁面使用更多的內存，因爲它在img標籤的src屬性中的document中有很多字符串數據？

Answer 1

圖像傳輸爲data:的URI做了兩兩件事：

1. 它的圖像與HTML頁一起發送，這樣他們就不必單獨下載和立即可用的瀏覽器。它消除了從單獨的HTTP請求獲取圖像所產生的延遲。
2. 它每次都會將圖像連同HTML頁面一起發送，因此無法單獨下載和緩存，並增加了HTML文檔的大小和下載時間。

瀏覽器的「資源」或「內存」使用將因瀏覽器而異，並且相對較小。在第一次加載圖像時使用外部圖像URI會比較慢，因爲它需要分開提取，但後續所有請求都會更快，因爲它可以被緩存。將圖像傳輸爲data: URI將同樣減慢所有後續請求中的HTML文檔。這是重要的區別。