data url給了我們一種很巧妙的將「嵌入」到html中的方法。跟傳統的用img標記將伺服器上的引用到頁面中的方式不一樣，在data url協議中，被轉換成base64編碼的字串形式，並儲存在url中，冠以mime-type。本文中，我將介紹如何巧妙的使用data url優化**載入速度和執行效率。
1. data url基本原理
這種方式中，img標記的src屬性指定了乙個遠端伺服器上的資源。當網頁載入到瀏覽器中 時，瀏覽器會針對每個外部資源都向伺服器傳送一次拉取資源請求，占用網路資源。大多數的瀏覽器都有乙個併發請求數不能超過4個的限制。這意味著，如果乙個 網頁裡嵌入了過多的外部資源，這些請求會導致整個頁面的載入延遲。而使用data url技術，資料以base64字串格式嵌入到了頁面中，與html成為一體，它的形式如下：
從上面的base64字串中你看不出任何跟相關的東西，但下面，我們將傳統的img寫法和現在的data url用法左右對比顯示，你就能看出它們是完全一樣的效果。但實際上它們是不一樣的，它們乙個是引用了外部資源，乙個是使用了data url。
幾乎所有的現代瀏覽器都支援data url格式，包括火狐瀏覽器，谷歌瀏覽器，safari瀏覽器，opera瀏覽器。ie8也支援，但有部分限制，ie9完全支援。
2. 為什麼data url是個好東西
data url能用在很多場合，跟傳統的外部資源引用方式相比，它有如下獨到的用處：
data url也有一些不適用的場合
然而，data url這些不利的地方完全可以避免或轉化。本文的重點就是要討論這個問題。
3. 在css裡使用data url
當第一次看到data url的作用和用法時，你也許會很不疑惑，「為什麼要麻煩的將轉換成base64編碼字串，還要嵌入的網頁中，將html**弄的混亂不堪，甚至還會有效能上的問題。」
誠然，無法否認快取在瀏覽器效能中的重要作用——如何能將data url資料也放入瀏覽器快取中呢？答案是：通過css樣式檔案。css中的url操作符是用來指定網頁元素的背景的，而瀏覽器並不在意url裡寫的是什麼——只要能通過它獲取需要的資料。所以，我們就有了可以將data url形式的儲存在css樣式表中的可能。而所有瀏覽器都會積極的快取css檔案來提高頁面載入效率。
假設我們的頁面裡有乙個很小的div元素，我們想用一種灰色的斜紋圖案做它的背景，這種背景在當今的**設計者中非常流行。傳統的方法是製作乙個3×3畫素的，儲存成gif或png格式，然後在css的background-image屬性中引用它的位址。而data url則是一種更高效的替代方法，就像下面這樣。
下面是css**：
.striped_box在我們的html裡放入下面的**：
<實際輸出乙個帶邊框的小方塊：div
class
="striped_box lazy "
>
這是乙個有條紋的方塊
div>
在這個例子中，data url的使用是完全符合場景的。它避免了讓這個小小的背景獨自產生一次http請求，而且，這個小還能同css檔案一起被瀏覽器快取起來，重複使 用，不會每次使用時都載入一次。只要這個不是很大，而且不是在css檔案裡反覆使用，就可以以data url方法呈現降低頁面的載入時間，改善使用者的瀏覽體驗。
4. 將轉換成data url格式的方法
dataurlmaker mac os x 桌面
(data url總結
ie6/7是不支援data url技術的，不幸的是在中國還有很多使用者在使用這種古老的瀏覽器。希望各方面包括官方和民間都多做努力工作，讓現代瀏覽器(谷歌瀏覽器，火狐瀏覽器，ie11+)盡快的占領市場，這是我們web程式設計師最大的願望。
最近data uri似乎熱了起來，特別是從**ued上發了一篇《 data uri小試 —— 在旺旺點燈(js)上的應用 》後，陸續出現這方面的文章。看到不少人提到data url時都只是提到了優點，我也好奇了一把，借這機會更全面了解了下。
瀏覽器對的顯示，處理效率哪個更快？
的快取問題
原文測試，使用data url方式的demo在渲染時會比不使用多消耗53%左右的cpu資源，記憶體多出4倍左右，耗時平均高出24.6倍。由此可見，使用data url方式還是需要更多的考量，在可接受的範圍內適量使用。
**
DATA URL簡介及DATA URL的利弊
data url給了我們一種很巧妙的將 嵌入 到html中的方法。跟傳統的用img標記將伺服器上的引用到頁面中的方式不一樣，在data url協議中，被轉換成base64編碼的字串形式，並儲存在url中，冠以mime type。本文中，我將介紹如何巧妙的使用data url優化 載入速度和執行效率。...
前端 DataURL的幾種處理方式及相互間的轉換
一 顯示 如果想在前端顯示一張，那麼後端傳過來的資料格式有三種。二進位製流 如果返回的是的二進位製流，那麼需要在獲取資料的是時候，處理一下資料格式，轉成blob物件，再轉成dataurl const img document.createelement img img.src window.url....
linux系統簡介及命令簡介
一 linux基本概念 1.本門課程的定位 a.企業環境中使用的伺服器作業系統基本就是linux系統 b.大資料集群也是搭建在linxu系統之上 2.linux核心 linux是乙個一體化核心 monolithic kernel 系統。核心 指的是乙個提供硬體抽象層 磁碟及檔案系統控制 多工等功能的...