如何将html转换成url,HTML之Data URL（转）
Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不一樣，在Data URL協議中，圖片被轉換成base64編碼的字符串形式，并存儲在URL中，冠以mime-type。本文中，我將介紹如何巧妙的使用Data URL優化網站加載速度和執行效率。
1. Data URL基本原理
Data URL技術，圖片數據以base64字符串格式嵌入到了頁面中，與HTML成為一體，它的形式如下：
幾乎所有的現代瀏覽器都支持Data URL格式，包括火狐瀏覽器，谷歌瀏覽器，Safari瀏覽器，opera瀏覽器。IE8也支持，但有部分限制，IE9完全支持。
IE6/7是不支持Data URL技術。
2. 為什么Data URL是個好東西
Data URL能用在很多場合，跟傳統的外部資源引用方式相比，它有如下獨到的用處：
當訪問外部資源很麻煩或受限時
當圖片是在服務器端用程序動態生成，每個訪問用戶顯示的都不同時。
當圖片的體積太小，占用一個HTTP會話不是很值得時。
Data URL也有一些不適用的場合
Base64編碼的數據體積通常是原數據的體積4/3，也就是Data URL形式的圖片會比二進制格式的圖片體積大1/3。
Data URL形式的圖片不會被瀏覽器緩存，這意味著每次訪問這樣頁面時都被下載一次。這是一個使用效率方面的問題——尤其當這個圖片被整個網站大量使用的時候。
然而，Data URL這些不利的地方完全可以避免或轉化。本文的重點就是要討論這個問題。
3. 在CSS里使用Data URL
當第一次看到Data URL的作用和用法時，你也許會很不疑惑，“為什么要麻煩的將圖片轉換成base64編碼字符串，還要嵌入的網頁中，將HTML代碼弄的混亂不堪，甚至還會有性能上的問題?！?/p>
誠然，無法否認緩存在瀏覽器性能中的重要作用——如何能將Data URL數據也放入瀏覽器緩存中呢？答案是：通過CSS樣式文件。CSS中的url操作符是用來指定網頁元素的背景圖片的，而瀏覽器并不在意URL里寫的是什么——只要能通過它獲取需要的數據。所以，我們就有了可以將Data URL形式的圖片存儲在CSS樣式表中的可能。而所有瀏覽器都會積極的緩存CSS文件來提高頁面加載效率。
假設我們的頁面里有一個很小的div元素，我們想用一種灰色的斜紋圖案做它的背景，這種背景在當今的網站設計者中非常流行。傳統的方法是制作一個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;
}
這是一個有條紋的方塊
4.Data URL 問題
說到Data URI的優點，自然少不了“減少鏈接數”，把圖片轉為Base64編碼，以減少圖片的鏈接數。我們先想當然一下，同樣一張圖片，如果不用發起一個下載請求，打開速度是會更快的。但是，有幾個問題需要關注下：
圖片始終是要下載的，那么下載一張圖片的速度快還是下載一堆編碼快？
瀏覽器對圖片的顯示，處理效率哪個更快？
圖片的緩存問題
5.DataURL在Web瀏覽器中的兼容性總結
IE8+，Firefox，Chrome，Opera，Safari 等現代瀏覽器普遍支持data URL
IE8 data URL 最大長度限制為32k字節，超出無效。IE9+沒有這個限制
IE只識別base64編碼或百分號編碼(URL編碼, encodeURIComponent)的data URL，IE不識別無編碼的data URL，非IE瀏覽器可識別無編碼的data URL
IE不支持對,標簽的src設置data URL
IE官方說法說data URL僅支持以下5種使用場景：
object (images only)
img
input type=image
link
CSS declarations that accept a URL
據本人實測，IE也在除了官方所述5種之外的其它場合支持data URL：
a href
meta refresh. 示例：
script src
window.open
embed src
對于audio, video一類的元素，往往資源文件較大，使用data URL并不常見，我也沒有對其進行測試。
Firefox中粘貼截圖是直接轉換為data URL的圖片，其它瀏覽器干脆無法粘貼，我記得以前Chrome好像可以粘貼截圖的，今天再測Chrome,Opera都不能粘貼截圖(
可為data URL指定字符集編碼。示例：data:text/plain;charset=US-ASCII,xxxx....
附錄：
DataURL語法規則：
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
Data URL簡介及Data URL的利弊
之前寫過一篇“漫談前端優化”的文章,里面提到過DataUrl,粗魯的描述了下,感覺不甚詳焉,所以這幾天也總結了這方面的知識,參考一些資料,補充一篇文章在這里,對這方面的資料來說,也是一種強化記憶應用: ...
Data URL
Data URL 早在 1995 年就被提出,那個時候有很多個版本的 Data URL Schema 定義陸續出現在?VRML?之中,隨后不久,其中的一個版本被提上了議案——將它做個一個嵌入式的資源放 ...
使用Visual Studio 2010寫Data Url生成工具C#版本
聲明:本文系本人按照真實經歷原創.未經許可,謝絕轉載. 此文百度經驗版本號:怎樣用Visual Studio 2010打造Data Url生成工具 源代碼下載:用Visual Studio 2010編 ...
HTML5——Data Url生成
HTML5——Data Url生成
PHP &; “Data” URL scheme(轉)
基本上所有的對文件操作的API, 都遷移到的了PHP stream上, 所以, 絕大部分對文件操作的API都是支持Data URL的. 當某個API需要操作對象是文件的時候, 我們其實是可以采用Dat ...
【Data URL】【RE】【bugku】逆向入門writeup
在寫wp之前先來了解一下Data URL是什么 Data URL 在瀏覽器向服務端發送請求來引用資源時,一般瀏覽器都有同一時間并發請求數不超過4個的限制.所以如果一個網頁需要引用大量的服務端資源,就會 ...
使用Data URL將圖片嵌入到網頁中
早些時候,使用IE6瀏覽器,網頁可以另存為mht,如果網頁包含圖片,那么圖片也會存儲到mht中. mht是微軟提供的一種聚合HTML文檔,它的本質其實是一個文本文件,那么我們也許會好奇,它的圖片存儲到 ...
【轉】Data URL和圖片，及Data URI的利弊
Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法.跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不一樣,在Data URL協議中,圖片被轉換成base64編碼的字符串形式, ...
Data Url生成工具之HTML5 FileReader實現
百度經驗版本號:怎樣用HTML5的FileReader生成Data Url 上一篇講了:用Visual Studio 2010編寫Data Url生成工具C#版 今天用HTML5 FileReader ...
隨機推薦
android 基礎控件(EditView、SeekBar等)的屬性及使用方法
android提供了大量的UI控件,本文將介紹TextView.ImageView.Button.EditView.ProgressBar.SeekBar.ScrollView.WebView ...
[轉]細說MySQL Explain和Optimizer Trace簡介
在開發過程中,對每個上線的SQL查詢指紋(query figerprint)的質量都應有估算:而估算DB查詢質量最直接的方法,就是分析其查詢執行計劃( Query Execution Plan ,即Q ...
做個偽IE瀏覽器？！【來自官網】
原文:docwiki.embarcadero.com/RADStudio/Seattle/en/Building_a_VCL_Forms_Web_Browser_Application 選擇File ...
NOSQL之【redis的主從復制】
一.Redis的Replication: 下面的列表清楚的解釋了Redis Replication的特點和優勢.?? ?1). 同一個Master可以同步多個Slaves.?? ?2). Slave同 ...
利用文件實現Free Pascal中的簡單排序功能
此程序主要是驗證文件功能的讀寫功能,總結到的東西有:①文件無論是讀還是寫,都要先建立鏈接關系才可以進行;②讀與寫不能同時進行,必須分開操作,這也可以理解,在實際鼠標操作時也是如此的!③讀寫后必須用cl ...
用python語言編寫網絡爬蟲
本文主要用到python3自帶的urllib模塊編寫輕量級的簡單爬蟲.至于怎么定位一個網頁中具體元素的url可自行百度火狐瀏覽器的firebug插件或者谷歌瀏覽器的自帶方法. 1.訪問一個網址 re= ...
bash腳本條件測試總結
一.if語句的結構 分為以下三種:單分支.雙分支.多分支 單分支if語句 if CONDITION is True: then 分支 fi 雙分支if語句 if CONDITION is True: ...
2-SAT 問題與解法小結
2-SAT 問題與解法小結 這個算法十分的奇妙qwq... 將一類判定問題轉換為圖論問題,然后就很容易解決了. 本文有一些地方摘錄了一下趙爽<2-SAT解法淺析> (侵刪) 一些概念: \ ...
ls-dyna基礎教程
剛剛開始使用ls-dyna,幾天前還只知道點開dyna界面,然后就沒有然后了,沒人帶,資料也沒多少,但是科研還得繼續往下做呀(手動滑稽),通過在仿真論壇上搜索相關的資料,并通過自己的一步步操作,做了大 ...
總結
以上是生活随笔為你收集整理的如何将html转换成url,HTML之Data URL（转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20164305 徐广皓《网络对抗》Ex
- 下一篇： IDEA 去掉 pom 文件标签名称下划