Data URL基本原理

Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統的用img 標記將服務器上的圖片引用到頁面中的方式不一樣，在Data URL協議中，圖片被轉換成base64編碼的字符串形式，并存儲在URL中，冠以mimetype。

圖片在網頁中的使用方法通常是下面這種利用img 標記的形式：

<img src="images/myimage.gif ">

這種方式中， img 標記的src 屬性指定了一個遠程服務器上的資源。當網頁加載到瀏覽器中時，瀏覽器會針對每個外部資源都向服務器發送一次拉取資源請求，占用網絡資源。大多數的瀏覽器都有一個并發請求數不能超過4個的限制。這意味著，如果一個網頁里嵌入了過多的外部資源，這些請求會導致整個頁面的加載延遲。而使用DataURL技術，圖片數據以base64字符串格式嵌入到了頁面中，與HTML成為一體，它的形式如下：

base64字符串中你看不出任何跟圖片相關的東西，但下面，我們將傳統的img 寫法和現在的Data URL用法
左右對比顯示，你就能看出它們是完全一樣的效果。但實際上它們是不一樣的，它們一個是引用了外部資源，一個
是使用了Data URL。

優缺點分析

1. 瀏覽器支持

幾乎所有的現代瀏覽器都支持Data URL格式，包括火狐瀏覽器，谷歌瀏覽器，Safari瀏覽器，opera瀏覽器。
IE8也支持，但有部分限制，IE9完全支持。

2. 數據容量

Base64編碼的數據體積是原數據的體積4/3，也就是DataURL形式的圖片會比二進制格式的圖片體積大1/3。

3. 使用場景

DataURL形式的數據不會占用HTTP會話，所以再訪問外部資源或當圖片是在服務器端用程序動態生成時借用DataURL是一個不錯的選擇

總結

以上是生活随笔為你收集整理的DataURL：实现原理及优缺点分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。