Data URI 應用場景小結

2021-09-08 11:33:40 字數 1174 閱讀 3459

data uri scheme 在前端開發中是個常用的技術,通常會在 css 設定背景圖中用到。比如在 google 的首頁就有用到:

data uri scheme 簡稱 data uri,經常會被錯誤地寫成 data urls。筆者認為通常用於將 base64 編碼的 data uri 可以稱為 data urls,理由是這個位址(通過 base64 編碼的 url)可以在瀏覽器位址列開啟,而且 chrome 面板下也用了 "data urls" 這個名稱,但是廣義的 data uri 絕對不可以用 data urls 來代替,畢竟 url 只是 uri 的子集。

如果你是第一次接觸,可能會詫異於這一堆 "亂七八糟" 的編碼是如何生成,開啟 將任意一張圖拖進去,便能自動幫你生成這串 "base64:url",接著便可以在任何需要用到 src 屬性的地方,用這個字串代替。

data uri 的格式十分簡單,如下所示:

data:[;charset=][;base64],
我們先不管它的編碼過程,可能你要問了,這麼費盡周折是為了啥?這裡就要說到 data uri 最大的好處,減少 http 請求。通常情況下我們在 html 頁面中表示一張,會用乙個 img 標籤,然後將其 src 屬性指向服務端的乙個位址,每個 img 標籤都會是一次請求;但是用了 data uri 技術,將編碼成字串 "內嵌" 入 html **中(inline),然後在客戶端完成解碼工作,就不用進行 http 請求了。但是這樣做也有個明顯的缺點,data uri 無法進行快取,於是聰明的工程師一般會把 data uri 用在 css 中,因為 css 中的 url 操作符是用來指定網頁元素的背景的,而瀏覽器並不在意 url 裡寫的是什麼——只要能通過它獲取需要的資料。所以,我們就有了可以將 data url 形式的儲存在 css 樣式表中的可能,而所有瀏覽器都會積極的快取 css 檔案來提高頁面載入效率。

在開發過程中,其實我們不常用到 data uri 來表示,在此我將其利弊進行了下彙總。

利:

弊:

那麼,究竟什麼時候該用 data uri 技術呢?

read more:

RunTime常用場景小結

1.訊息 機制 當呼叫某物件上某個方法 sendmessage 而該方法沒有實現時,系統會報unrecognized selector的異常。在此異常之前走了一圈流程 如圖 objc的執行時會給出三次拯救程式崩潰的機會。第一次 當這個類被呼叫乙個沒有實現的類方法 會呼叫 bool resolvecl...

Redis應用場景

redis開創了一種新的資料儲存思路,使用redis,我們不用在面對功能單調的資料庫時,把精力放在如何把大象放進冰箱這樣的問題上,而是利用redis靈活多變的資料結構和資料操作,為不同的大象構建不同的冰箱。redis常用資料型別 redis最為常用的資料型別主要有以下五種 在具體描述這幾種資料型別之...

Redis應用場景

redis開創了一種新的資料儲存思路,使用redis,我們不用在面對功能單調的資料庫時,把精力放在如何把大象放進冰箱這樣的問題上,而是利用redis靈活多變的資料結構和資料操作,為不同的大象構建不同的冰箱。redis常用資料型別 redis最為常用的資料型別主要有以下五種 在具體描述這幾種資料型別之...