DataURIscheme及其在CSS中的使用方法

本篇文章為大家展示了DataURIscheme及其在CSS中的使用方法，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

網頁優化的一大首要任務是減少HTTP 請求 (http request) 的次數，例如通過合并多個JS文件，合并CSS樣式文件。除此之外，還有一個data URL 的密技，讓我們直接把圖像的內容崁入網頁里面，這個密技的官方名稱是 data URI scheme 。

什么是 data URI scheme？

假設你有以下的圖像：

A

把它在網頁上顯示出來的標準方法是：

XML/HTML 

<img src="https://cache.yisu.com/upload/information/20210311/295/12013.png"/>

這 種取得資料的方法稱為 http URI scheme ，同樣的效果使用 data URI scheme 可以寫成：

XML/HTML 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA   
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

換句話說我們把圖像檔案的內容內置在 HTML 檔案中，節省了一個 HTTP 請求。

Data URI scheme 的語法

我們來分析一下這句 img 標簽的語法：

XML/HTML 

1. <img src="data:image/png;base64,iVBOR....>  

它包含一下部分：

data - 取得數據的協定名稱

image/png - 數據類型名稱

base64 - 數據的編碼方法

iVBOR.... - 編碼后的數據

: , ; - data URI scheme 指定的分隔符號

Base64 編碼？

不知道什么是 base64 嗎？簡單地說它把一些 8-bit 數據翻譯成標準 ASCII 字符，往上有很多免費的 base64 編碼和解碼的工具，你也可以用 PHP 的 base64_encode() 進行編碼：

PHP 

1. echo base64_encode(file_get_contents('check.png'));  

在 CSS 中使用 data URL

Data URI scheme 也可以在 CSS 中使用，例如：

body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
瀏 覽器會緩存這種圖像嗎？

不會，Data URL 雖然節省 HTTP 請求，但是倘若這個圖像要在網頁多個地方顯示的話，便會加大網頁的內容，延長了下載的時間，其中一個解決辦法是在一個 CSS class 中加入 data URL，在需要顯示圖像的區塊調用這個 class，例如：

1. .logobg {   

2.   background: url(data:&hellip;)   

3. }   

4. <div class=”navigation logobg”>..   

5. helo, hello   

6. <div class=”footer logobg”>&hellip;  

又 是 IE 來搞破壞

任何精采的技巧都可能受到 IE 的排擠，這次也有這種情況，IE8 之前的版本都不支援 data URI scheme。

解決這個問題的辦法有：使用MHTML 解決 data URI scheme 的瀏覽器兼容問題

具體做法看代碼(肯定是用css hack來實現)

1. /*Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"  
      
   --_ANY_STRING_WILL_DO_AS_A_SEPARATOR  
   Content-Location:the9  
   Content-Transfer-Encoding:base64  
      
   /9j/4AA....+b0//2Q== (這里是base64編碼)  
   */  
       
   #the9{   
     background-image: url("data:image/png;base64/9j/4AA....+b0//2Q=="); /* normal */  
     *background-image: url(mhtml:http://www.zhangjingwei.com/demo/scheme/style.css!the9);   
     width:300px;   
     height:300px;   
     color:#F00;   
     font-weight:900;   
   }

上述內容就是DataURIscheme及其在CSS中的使用方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。