DATA URL簡介及DATA URL的利弊

2021-09-07 19:01:37 字數 2393 閱讀 5844

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 系統。核心 指的是乙個提供硬體抽象層 磁碟及檔案系統控制 多工等功能的...