數據URI的用途是什麼？

爲什麼資源有時嵌入在數據URI中，而不是使用鏈接到作爲服務器上的文件存儲的資源的常規URI？數據URI的用途是什麼？

2013-08-06 Toby Allen

1.降低服務器請求

數據URI可用於減少服務器負荷，提高客戶機的性能，通過降低獲得所需的資源的HTTP請求的數目。例如，該HTML：

<img src="assets/bullet.png">

...可與此替換：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA 
    ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5 
    o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9 
    D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3 
    pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj 
    eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38 
    k6jyMAAAAASUVORK5CYII=" 
>

...，以產生這樣的圖像： bullet icon 與少一個HTTP請求。

注意：似乎不可能將數據URI映像嵌入到堆棧溢出文章中;但是，上面的圖像使用顯示的數據URI上傳到圖像託管服務。

如果，例如，您的網站使用了許多小圖標，在樣式表中指定它們作爲所有數據URI：

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) } 
.icon-bullet-green { background-image: /* ... */ } 
.icon-save { background-image: /* ... */ } 
.icon-load { background-image: /* ... */ } 
.icon-delete { background-image: /* ... */ } 
/* ... etc. */

...可以消除大量的HTTP請求，在整體成本下載大小，易讀性和錯誤編輯可能導致URI無意義（並且難以修復）的可能性增加。

實現圖像相同結果的另一種方法是使用CSS sprites。

2.嵌入在單個文件中

URI可用於包含所有到單個文檔中正確地顯示一個頁面所需的資源的數據內容。這可能對例如一個README文件與一個軟件分發。理論上，數據URI也可以用來替代使用附件在HTML電子郵件中嵌入資源，但實際上客戶端對數據URI的支持是too unreliable，因爲這是一種有用的技術。如果一個網頁包含的內容都通過HTTP和HTTPS的混合物

3.避免瀏覽器警告

有些瀏覽器顯示一個警告。如果您的服務器已設置爲通常通過HTTP提供靜態內容（如圖像），但通過HTTPS提供動態內容，則使用數據URI嵌入該靜態內容是一種可能的解決方法。

來源

2013-08-10 16:43:42

好的答案，也許使用數據URI的一個更多的效果是，頁面加載爲一個整體。沒有更多的預加載使HTML更簡單。 – Mehran

@Mehran謝謝;我添加了一些額外的用例。 –

這裏唯一需要注意的是DATA URIs實際上可能會損害性能，因爲它們不會從頁面本身緩存，瀏覽器的下載引擎在遇到DATA URI時並不總是針對高性能進行優化。作爲最佳做法，避免使用大數據URI，並避免使用未在樣式表或某些可重用資源中緩存的DATA URI。 – EricLaw

除了以前的答案（這是一個非常好的總結），我最近一直在使用這個東西是字體。如果我只需要使用字體中的一小部分字符（比如，logo-design-y字體或特殊的dingbat bullet圖標），則可以將我需要的字符編碼到CSS @ font-face聲明中而不是讓用戶下載整個字體文件。

例如，如果我只想要魔鬼（d）和天使（e）由Eggfaces（http://www.dingbatdepot.com/details/EggfacesTFB）臉，然後我可以使用FontSquirrel的web字體生成工具（http://www.fontsquirrel.com/tools/webfont-generator）來創建這樣的事情：

@font-face { 
    font-family: 'eggfaces'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

看到這個小提琴爲例：http://jsfiddle.net/vuuVh/

來源

2013-08-14 16:51:07 andi

數據URI的用途是什麼？

回答

相關問題