資訊專欄INFORMATION COLUMN
摘要：一編碼在聊圖片編碼之前，先來(lái)說(shuō)說(shuō)編碼，其實(shí)這一塊已經(jīng)有很多例子了。一次連接又是域名解析，開(kāi)啟連接，發(fā)送請(qǐng)求，等待網(wǎng)絡(luò)延遲和服務(wù)器處理時(shí)間，下載資源較小是幾個(gè)意思
一、Base64編碼
在聊圖片編碼之前，先來(lái)說(shuō)說(shuō)Base64編碼，其實(shí)這一塊已經(jīng)有很多例子了。
Base64編碼么，其實(shí)就是一個(gè)招待好6爺，伺候好8爺的過(guò)程
Base64是把字符串轉(zhuǎn)為二進(jìn)制，然后末尾補(bǔ)零，使總長(zhǎng)度能除盡24
24這個(gè)太上皇怎么來(lái)的：是6爺與8爺?shù)墓稊?shù)
6爺怎么來(lái)的: Base64是一個(gè)對(duì)照表，有64個(gè)符號(hào)，大小寫字母，數(shù)字，加號(hào)，斜杠（/）。特殊字符（=）除外可以用6個(gè)二進(jìn)制位來(lái)表示這個(gè)64個(gè)字符
8爺怎么來(lái)的：一個(gè)字符8位(ASCII碼對(duì)應(yīng)二進(jìn)制)
1.Base64是因?yàn)橛?4個(gè)字符來(lái)做對(duì)照，所以，可以用6個(gè)二進(jìn)制位數(shù)來(lái)表示（編碼過(guò)后的字符）：如：
『000000』代表A，『111111』代表/
2.所以嘛，我們需要做的就是把要編碼的字符（一個(gè)字符8位，對(duì)照ASCII）6等分，這樣好用Base64來(lái)表示，如：
A => 『01000001』=>（6等分） 『010000』『01』
3.但你也看到了，最后的不足6位啊，那沒(méi)問(wèn)題，補(bǔ)零，就行了
『010000』『010000』
4.這樣的東東，在Base64中是能找到對(duì)應(yīng)的值，但是，我要把他在轉(zhuǎn)換成正確的字符A就不行了
『010000010000』=> A『0000』
5.缺了4位，那咋辦，那就再添加4位咯
『010000010000』=> 『010000』『010000』『0000』
6.但加了4位又不能用Base64來(lái)表示了，少了2位，唉，既要伺候好6爺，又得服侍好8爺真心不容易啊，其實(shí)添了2還是不行的，反正就是這么補(bǔ)0下去，最后就變成了
『010000』『010000』『000000』『000000』
用Base64一對(duì)照看到是（0用=表示）QQ==
OK
圖片的Base64編碼例如：url：data:text/jpeg;base64,XXXXXXX==
data:[
];[ =chartset];[ ],
/**
data:font/woff，字體
data:text/plain,文本數(shù)據(jù)
data:text/html,HTML代碼
data:text/css;base64,css代碼
data:text/javascript;base64,javascript代碼
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)
data:image/gif;base64,base64編碼的gif圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
*/
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
特點(diǎn)
不像訪問(wèn)圖片地址那樣緩存起來(lái)，而是直接存在css/js中,隨著css/js緩存的
由于是base64編碼的，一般都比原圖片要大1/3（故而一般得配合gzip壓縮）
解決啥？
減少對(duì)服務(wù)器的請(qǐng)求（這里帶出一個(gè)問(wèn)題--為什么要減少對(duì)服務(wù)器的請(qǐng)求？）
缺點(diǎn)
IE8之前都不會(huì)支持（需要hack技術(shù)，但I(xiàn)E9的IE7兼容模式可以）
適用
圖片比較?。ㄟ@個(gè)較小又是幾個(gè)意思？），如果圖片過(guò)大，會(huì)導(dǎo)致css或者js文件過(guò)大，而導(dǎo)致阻塞
同類
Image maps
css sprites
題外話為什么要減少對(duì)服務(wù)器的請(qǐng)求？
1.請(qǐng)求頭420byte和返回頭600多比特肯定少不了的，此外請(qǐng)求還可能會(huì)攜帶。
2.一次http連接又是：域名解析，開(kāi)啟TCP連接，發(fā)送請(qǐng)求，等待（網(wǎng)絡(luò)延遲和服務(wù)器處理時(shí)間），下載資源
較小是幾個(gè)意思
http://www.jianshu.com/p/486f...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86927.html
摘要：前言由于博主最近又閑下來(lái)了，之前覺(jué)得的官方文檔比較難啃一直放到現(xiàn)在。文章會(huì)逐步分析每個(gè)處理的用意當(dāng)然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會(huì)補(bǔ)上構(gòu)建生產(chǎn)的配置分析，案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下 前言 由于博主最近又閑下來(lái)了，之前覺(jué)得webpack的官方文檔比較難啃一直放到現(xiàn)在。細(xì)心閱讀多個(gè)webpack配置案例后覺(jué)得還是得自己寫個(gè)手腳架，當(dāng)然這個(gè)案例是基于vue的，...
摘要：前面介紹了導(dǎo)出到的代碼實(shí)現(xiàn)，詳見(jiàn)這里，里面有一部分涉及導(dǎo)出圖片到，在這里我再另外做一個(gè)詳細(xì)的介紹。在前臺(tái)用將生成的圖片轉(zhuǎn)成編碼，提交給后臺(tái)。 前面介紹了導(dǎo)出到word的代碼實(shí)現(xiàn)，詳見(jiàn)這里，里面有一部分涉及導(dǎo)出圖片到word，在這里我再另外做一個(gè)詳細(xì)的介紹。是這樣的，我項(xiàng)目有個(gè)功能，里面就涉及到要將echarts形成的柱狀圖或者地圖之類的圖表導(dǎo)出到word，在網(wǎng)上找了很久，都是說(shuō)將圖片轉(zhuǎn)...
摘要：前面介紹了導(dǎo)出到的代碼實(shí)現(xiàn)，詳見(jiàn)這里，里面有一部分涉及導(dǎo)出圖片到，在這里我再另外做一個(gè)詳細(xì)的介紹。在前臺(tái)用將生成的圖片轉(zhuǎn)成編碼，提交給后臺(tái)。 前面介紹了導(dǎo)出到word的代碼實(shí)現(xiàn)，詳見(jiàn)這里，里面有一部分涉及導(dǎo)出圖片到word，在這里我再另外做一個(gè)詳細(xì)的介紹。是這樣的，我項(xiàng)目有個(gè)功能，里面就涉及到要將echarts形成的柱狀圖或者地圖之類的圖表導(dǎo)出到word，在網(wǎng)上找了很久，都是說(shuō)將圖片轉(zhuǎn)...
摘要：體驗(yàn)地址項(xiàng)目地址一個(gè)能夠把字符串編碼成圖片，或者從圖片中解碼出字符串的超輕量級(jí)開(kāi)源庫(kù)，總代碼數(shù)甚至不超過(guò)行使用方法通過(guò)安裝通過(guò)標(biāo)簽引入值得注意的是，因?yàn)槭褂昧说囊约捌渌馨舻奶匦?，這意味著需要你的瀏覽器提供支持。 showImg(https://segmentfault.com/img/bVC6vf?w=172&h=209); 體驗(yàn)地址：https://jrainlau.github....
閱讀 3447·2021-11-24 09:39
閱讀 3213·2021-09-09 11:34
閱讀 3380·2021-09-07 09:58
閱讀 2446·2019-08-30 13:07
閱讀 3029·2019-08-29 15:09
閱讀 1742·2019-08-29 13:01
閱讀 2476·2019-08-26 12:18
閱讀 2126·2019-08-26 10:28
