Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統(tǒng)的用img標(biāo)記將服務(wù)器上的圖片引用到頁(yè)面中的方式不一樣，在Data URL協(xié)議中，圖片被轉(zhuǎn)換成base64編碼的字符串形式，并存儲(chǔ)在URL中，冠以mime-type。本文中，我將介紹如何巧妙的使用Data URL優(yōu)化網(wǎng)站加載速度和執(zhí)行效率。

1. Data URL基本原理

Data URL技術(shù)，圖片數(shù)據(jù)以base64字符串格式嵌入到了頁(yè)面中，與HTML成為一體，它的形式如下：

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

IE6/7是不支持Data URL技術(shù)。

2. 為什么Data URL是個(gè)好東西

Data URL能用在很多場(chǎng)合，跟傳統(tǒng)的外部資源引用方式相比，它有如下獨(dú)到的用處：

當(dāng)訪問(wèn)外部資源很麻煩或受限時(shí)

當(dāng)圖片是在服務(wù)器端用程序動(dòng)態(tài)生成，每個(gè)訪問(wèn)用戶顯示的都不同時(shí)。

當(dāng)圖片的體積太小，占用一個(gè)HTTP會(huì)話不是很值得時(shí)。

Data URL也有一些不適用的場(chǎng)合

Base64編碼的數(shù)據(jù)體積通常是原數(shù)據(jù)的體積4/3，也就是Data URL形式的圖片會(huì)比二進(jìn)制格式的圖片體積大1/3。

Data URL形式的圖片不會(huì)被瀏覽器緩存，這意味著每次訪問(wèn)這樣頁(yè)面時(shí)都被下載一次。這是一個(gè)使用效率方面的問(wèn)題——尤其當(dāng)這個(gè)圖片被整個(gè)網(wǎng)站大量使用的時(shí)候。

然而，Data URL這些不利的地方完全可以避免或轉(zhuǎn)化。本文的重點(diǎn)就是要討論這個(gè)問(wèn)題。

3. 在CSS里使用Data URL

當(dāng)?shù)谝淮慰吹紻ata URL的作用和用法時(shí)，你也許會(huì)很不疑惑，“為什么要麻煩的將圖片轉(zhuǎn)換成base64編碼字符串，還要嵌入的網(wǎng)頁(yè)中，將HTML代碼弄的混亂不堪，甚至還會(huì)有性能上的問(wèn)題。”

誠(chéng)然，無(wú)法否認(rèn)緩存在瀏覽器性能中的重要作用——如何能將Data URL數(shù)據(jù)也放入瀏覽器緩存中呢？答案是：通過(guò)CSS樣式文件。CSS中的url操作符是用來(lái)指定網(wǎng)頁(yè)元素的背景圖片的，而瀏覽器并不在意URL里寫的是什么——只要能通過(guò)它獲取需要的數(shù)據(jù)。所以，我們就有了可以將Data URL形式的圖片存儲(chǔ)在CSS樣式表中的可能。而所有瀏覽器都會(huì)積極的緩存CSS文件來(lái)提高頁(yè)面加載效率。

假設(shè)我們的頁(yè)面里有一個(gè)很小的div元素，我們想用一種灰色的斜紋圖案做它的背景，這種背景在當(dāng)今的網(wǎng)站設(shè)計(jì)者中非常流行。傳統(tǒng)的方法是制作一個(gè)3×3像素的圖片，保存成GIF或PNG格式，然后在CSS的background-image屬性中引用它的地址。而Data URL則是一種更高效的替代方法，就像下面這樣。

.striped_box {

width: 100px;

height: 100px;

background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");

border: 1px solid gray;

padding: 10px;

}

這是一個(gè)有條紋的方塊

4.Data URL 問(wèn)題

說(shuō)到Data URI的優(yōu)點(diǎn)，自然少不了“減少鏈接數(shù)”，把圖片轉(zhuǎn)為Base64編碼，以減少圖片的鏈接數(shù)。我們先想當(dāng)然一下，同樣一張圖片，如果不用發(fā)起一個(gè)下載請(qǐng)求，打開(kāi)速度是會(huì)更快的。但是，有幾個(gè)問(wèn)題需要關(guān)注下：

圖片始終是要下載的，那么下載一張圖片的速度快還是下載一堆編碼快？

瀏覽器對(duì)圖片的顯示，處理效率哪個(gè)更快？

圖片的緩存問(wèn)題

5.DataURL在Web瀏覽器中的兼容性總結(jié)

IE8+，Firefox，Chrome，Opera，Safari 等現(xiàn)代瀏覽器普遍支持data URL

IE8 data URL 最大長(zhǎng)度限制為32k字節(jié)，超出無(wú)效。IE9+沒(méi)有這個(gè)限制

IE只識(shí)別base64編碼或百分號(hào)編碼(URL編碼, encodeURIComponent)的data URL，IE不識(shí)別無(wú)編碼的data URL，非IE瀏覽器可識(shí)別無(wú)編碼的data URL

IE不支持對(duì),標(biāo)簽的src設(shè)置data URL

IE官方說(shuō)法說(shuō)data URL僅支持以下5種使用場(chǎng)景：

object (images only)

img

input type=image

link

CSS declarations that accept a URL

據(jù)本人實(shí)測(cè)，IE也在除了官方所述5種之外的其它場(chǎng)合支持data URL：

a href

meta refresh. 示例：

script src

window.open

embed src

對(duì)于audio, video一類的元素，往往資源文件較大，使用data URL并不常見(jiàn)，我也沒(méi)有對(duì)其進(jìn)行測(cè)試。

Firefox中粘貼截圖是直接轉(zhuǎn)換為data URL的圖片，其它瀏覽器干脆無(wú)法粘貼，我記得以前Chrome好像可以粘貼截圖的，今天再測(cè)Chrome,Opera都不能粘貼截圖(

可為data URL指定字符集編碼。示例：data:text/plain;charset=US-ASCII,xxxx....

附錄：

DataURL語(yǔ)法規(guī)則：

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value

Data URL簡(jiǎn)介及Data URL的利弊

之前寫過(guò)一篇“漫談前端優(yōu)化”的文章,里面提到過(guò)DataUrl,粗魯?shù)拿枋隽讼?感覺(jué)不甚詳焉,所以這幾天也總結(jié)了這方面的知識(shí),參考一些資料,補(bǔ)充一篇文章在這里,對(duì)這方面的資料來(lái)說(shuō),也是一種強(qiáng)化記憶應(yīng)用: ...

Data URL

Data URL 早在 1995 年就被提出,那個(gè)時(shí)候有很多個(gè)版本的 Data URL Schema 定義陸續(xù)出現(xiàn)在?VRML?之中,隨后不久,其中的一個(gè)版本被提上了議案——將它做個(gè)一個(gè)嵌入式的資源放 ...

使用Visual Studio 2010寫Data Url生成工具C#版本

聲明:本文系本人按照真實(shí)經(jīng)歷原創(chuàng).未經(jīng)許可,謝絕轉(zhuǎn)載. 此文百度經(jīng)驗(yàn)版本號(hào):怎樣用Visual Studio 2010打造Data Url生成工具 源代碼下載:用Visual Studio 2010編 ...

HTML5——Data Url生成

HTML5——Data Url生成

PHP & “Data” URL scheme(轉(zhuǎn))

基本上所有的對(duì)文件操作的API, 都遷移到的了PHP stream上, 所以, 絕大部分對(duì)文件操作的API都是支持Data URL的. 當(dāng)某個(gè)API需要操作對(duì)象是文件的時(shí)候, 我們其實(shí)是可以采用Dat ...

【Data URL】【RE】【bugku】逆向入門writeup

在寫wp之前先來(lái)了解一下Data URL是什么 Data URL 在瀏覽器向服務(wù)端發(fā)送請(qǐng)求來(lái)引用資源時(shí),一般瀏覽器都有同一時(shí)間并發(fā)請(qǐng)求數(shù)不超過(guò)4個(gè)的限制.所以如果一個(gè)網(wǎng)頁(yè)需要引用大量的服務(wù)端資源,就會(huì) ...

使用Data URL將圖片嵌入到網(wǎng)頁(yè)中

早些時(shí)候,使用IE6瀏覽器,網(wǎng)頁(yè)可以另存為mht,如果網(wǎng)頁(yè)包含圖片,那么圖片也會(huì)存儲(chǔ)到mht中. mht是微軟提供的一種聚合HTML文檔,它的本質(zhì)其實(shí)是一個(gè)文本文件,那么我們也許會(huì)好奇,它的圖片存儲(chǔ)到 ...

【轉(zhuǎn)】Data URL和圖片，及Data URI的利弊

Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法.跟傳統(tǒng)的用img標(biāo)記將服務(wù)器上的圖片引用到頁(yè)面中的方式不一樣,在Data URL協(xié)議中,圖片被轉(zhuǎn)換成base64編碼的字符串形式, ...

Data Url生成工具之HTML5 FileReader實(shí)現(xiàn)

百度經(jīng)驗(yàn)版本號(hào):怎樣用HTML5的FileReader生成Data Url 上一篇講了:用Visual Studio 2010編寫Data Url生成工具C#版 今天用HTML5 FileReader ...

隨機(jī)推薦

android 基礎(chǔ)控件(EditView、SeekBar等)的屬性及使用方法

android提供了大量的UI控件,本文將介紹TextView.ImageView.Button.EditView.ProgressBar.SeekBar.ScrollView.WebView ...

[轉(zhuǎn)]細(xì)說(shuō)MySQL Explain和Optimizer Trace簡(jiǎn)介

在開(kāi)發(fā)過(guò)程中,對(duì)每個(gè)上線的SQL查詢指紋(query figerprint)的質(zhì)量都應(yīng)有估算:而估算DB查詢質(zhì)量最直接的方法,就是分析其查詢執(zhí)行計(jì)劃( Query Execution Plan ,即Q ...

做個(gè)偽IE瀏覽器？！【來(lái)自官網(wǎng)】

原文:docwiki.embarcadero.com/RADStudio/Seattle/en/Building_a_VCL_Forms_Web_Browser_Application 選擇File ...

NOSQL之【redis的主從復(fù)制】

一.Redis的Replication: 下面的列表清楚的解釋了Redis Replication的特點(diǎn)和優(yōu)勢(shì).?? ?1). 同一個(gè)Master可以同步多個(gè)Slaves.?? ?2). Slave同 ...

利用文件實(shí)現(xiàn)Free Pascal中的簡(jiǎn)單排序功能

此程序主要是驗(yàn)證文件功能的讀寫功能,總結(jié)到的東西有:①文件無(wú)論是讀還是寫,都要先建立鏈接關(guān)系才可以進(jìn)行;②讀與寫不能同時(shí)進(jìn)行,必須分開(kāi)操作,這也可以理解,在實(shí)際鼠標(biāo)操作時(shí)也是如此的!③讀寫后必須用cl ...

用python語(yǔ)言編寫網(wǎng)絡(luò)爬蟲(chóng)

本文主要用到python3自帶的urllib模塊編寫輕量級(jí)的簡(jiǎn)單爬蟲(chóng).至于怎么定位一個(gè)網(wǎng)頁(yè)中具體元素的url可自行百度火狐瀏覽器的firebug插件或者谷歌瀏覽器的自帶方法. 1.訪問(wèn)一個(gè)網(wǎng)址 re= ...

bash腳本條件測(cè)試總結(jié)

一.if語(yǔ)句的結(jié)構(gòu) 分為以下三種:單分支.雙分支.多分支 單分支if語(yǔ)句 if CONDITION is True: then 分支 fi 雙分支if語(yǔ)句 if CONDITION is True: ...

2-SAT 問(wèn)題與解法小結(jié)

2-SAT 問(wèn)題與解法小結(jié) 這個(gè)算法十分的奇妙qwq... 將一類判定問(wèn)題轉(zhuǎn)換為圖論問(wèn)題,然后就很容易解決了. 本文有一些地方摘錄了一下趙爽<2-SAT解法淺析> (侵刪) 一些概念: \ ...

ls-dyna基礎(chǔ)教程

剛剛開(kāi)始使用ls-dyna,幾天前還只知道點(diǎn)開(kāi)dyna界面,然后就沒(méi)有然后了,沒(méi)人帶,資料也沒(méi)多少,但是科研還得繼續(xù)往下做呀(手動(dòng)滑稽),通過(guò)在仿真論壇上搜索相關(guān)的資料,并通過(guò)自己的一步步操作,做了大 ...

總結(jié)

以上是生活随笔為你收集整理的如何将html转换成url,HTML之Data URL（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。