2021-03-02 分類: 網(wǎng)站建設(shè)
圖片處理在前端工作中可謂占據(jù)了很重要的一壁江山。而圖片的 base64 編碼可能相對(duì)一些人而言比較陌生,本文不是從純技術(shù)的角度去討論圖片的 base64 編碼。標(biāo)題略大,不過只是希望通過一些淺顯的論述,讓你知道什么是圖片的 base64 編碼,為什么我們要用它,我們?nèi)绾问褂貌⑶曳奖愕氖褂盟⒆屇愣萌绾稳ピ谇岸说膶?shí)際工作中運(yùn)用它。
什么是 base64 編碼?
我不是來講概念的,直接切入正題,圖片的 base64 編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串,使用該字符串代替圖像地址。
這樣做有什么意義呢?我們知道,我們所看到的網(wǎng)頁上的每一個(gè)圖片,都是需要消耗一個(gè) http 請(qǐng)求下載而來的(所有才有了 csssprites 技術(shù)的應(yīng)運(yùn)而生,但是 csssprites 有自身的局限性,下文會(huì)提到)。
沒錯(cuò),不管如何,圖片的下載始終都要向服務(wù)器發(fā)出請(qǐng)求,要是圖片的下載不用向服務(wù)器發(fā)出請(qǐng)求,而可以隨著 HTML 的下載同時(shí)下載到本地那就太好了,而 base64 正好能解決這個(gè)問題。
那么圖片的 base64 編碼長(zhǎng)什么樣子呢?舉個(gè)栗子。www.google.com 的首頁搜索框右側(cè)的搜索小圖標(biāo)使用的就是base64編碼。我們可以看到:
上面分別是圖片的 base64 編碼在 css 里面的寫法和在 html 標(biāo)簽里的寫法。base64 編碼長(zhǎng)得就是這個(gè)樣子,當(dāng)然 base64 編碼不僅僅運(yùn)用在圖片編碼,還可以:
thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa(不要復(fù)制我我真的不是種子)
嘿嘿?zèng)]錯(cuò),迅雷的“專用地址”也是用 Base64 加密的,有興趣自行 google,不做贅述。
為什么要使用 Base64 編碼?
那么為什么要使用 base64 傳輸圖片文件?上文也有提及,因?yàn)檫@樣可以節(jié)省一個(gè) http 請(qǐng)求。圖片的 base64 編碼可以算是前端優(yōu)化的一環(huán)。效益雖小,但卻缺能積少成多。
說到這里,不得不提的是 CssSprites 技術(shù),后者也是為了減少 http 請(qǐng)求,而將頁面中許多細(xì)小的圖片合并為一張大圖。那么圖片的 base64 編碼和 CssSprites 有什么異同,又該如何取舍呢?
所以,在這里要明確使用 base64 的一個(gè)前提,那就是被 base64 編碼的圖片足夠尺寸小。以博客園的 logo 為例:
如圖所示,博客園的 Logo 只有 3.27KB,已經(jīng)很小了,但是如果將其制作轉(zhuǎn)化成 base64 編碼,生成的 base64 字符串編碼足足有 4406 個(gè),也就是說,圖片被編碼之后,生成的字符串編碼大小一般而言都會(huì)比原文件稍大一些。即便 base64 編碼能夠被 gzip 壓縮,壓縮率能達(dá)到 50% 以上,想象一下,一個(gè)元素的 css 樣式編寫居然超過了 2000個(gè) 字符,那對(duì) css 整體的可讀性將會(huì)造成十分大的影響,代碼的冗余使得在此使用 base64 編碼將得不償失。
那么,是不是表示 base64 編碼無用武之地呢?不然。當(dāng)頁面中的圖片滿足以下要求,base64 就能大顯生手。
如果圖片足夠小且因?yàn)橛锰幍奶厥庑詿o法被制作成雪碧圖(CssSprites),在整個(gè)網(wǎng)站的復(fù)用性很高且基本不會(huì)被更新。
那么此時(shí)使用 base64 編碼傳輸圖片就可謂好鋼用在刀刃上,思前想后,符合這個(gè)規(guī)則的,有一個(gè)是我們經(jīng)常會(huì)遇到的,就是頁面的背景圖 background-image 。在很多地方,我們會(huì)制作一個(gè)很小的圖片大概是幾px*幾px,然后平鋪它頁面當(dāng)背景圖。因?yàn)槭潜尘皥D的緣故,所以無法將它放入雪碧圖,而它卻存在網(wǎng)站的很多頁面,這種圖片往往只有幾十字節(jié),卻需要一個(gè) http 請(qǐng)求,十分不值得。那么此時(shí)將它轉(zhuǎn)化為 base64 編碼,何樂而不為?
下面是一個(gè)只有 50 字節(jié)的2*2的的背景圖。將其轉(zhuǎn)化成 base64 編碼,只有 100 多個(gè)字符,相比一個(gè) http 請(qǐng)求,這種轉(zhuǎn)換無疑更值得推崇。
CssSprites與Base64編碼
簡(jiǎn)單陳述一下我對(duì)何時(shí)這使用這兩種優(yōu)化方法的看法。
使用CssSprites合并為一張大圖:
使用base64直接把圖片編碼成字符串寫入CSS文件:
更便捷的將圖片轉(zhuǎn)化為Base64編碼
將圖片轉(zhuǎn)化為 base64 編碼有許多工具,例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ,但是很多這些網(wǎng)站是國外網(wǎng)站,經(jīng)常被墻登陸不了。這里介紹一個(gè)更為快捷的方法,就是利用 Chrome 瀏覽器(我想 FEer 都應(yīng)該有Chrome 瀏覽器吧=。=)。
在 chrome 下新建一個(gè)窗口,然后把要轉(zhuǎn)化的圖片直接拖入瀏覽器,打開控制臺(tái),點(diǎn) Source,如下圖所示,點(diǎn)擊圖片,右側(cè)就會(huì)顯示該圖片的 base64 編碼,是不是很方便。
一些誤區(qū)
Base64 雖有優(yōu)點(diǎn),但是缺點(diǎn)也很明顯,在使用上存在一些明顯的缺陷。
1. 使用 Base64 不代表性能優(yōu)化
是的,使用 Base64 的好處是能夠減少一個(gè)圖片的 HTTP 請(qǐng)求,然而,與之同時(shí)付出的代價(jià)則是 CSS 文件體積的增大。
而 CSS 文件體積的增大意味著什么呢?意味著 CRP 的阻塞。
CRP(Critical Rendering Path,關(guān)鍵渲染路徑):當(dāng)瀏覽器從服務(wù)器接收到一個(gè)HTML頁面的請(qǐng)求時(shí),到屏幕上渲染出來要經(jīng)過很多個(gè)步驟。瀏覽器完成這一系列的運(yùn)行,或者說渲染出來我們常常稱之為“關(guān)鍵渲染路徑”。
通俗而言,就是圖片不會(huì)導(dǎo)致關(guān)鍵渲染路徑的阻塞,而轉(zhuǎn)化為 Base64 的圖片大大增加了 CSS 文件的體積,CSS 文件的體積直接影響渲染,導(dǎo)致用戶會(huì)長(zhǎng)時(shí)間注視空白屏幕。HTML 和 CSS 會(huì)阻塞渲染,而圖片不會(huì)。
2. 頁面解析 CSS 生成的 CSSOM 時(shí)間增加
Base64 跟 CSS 混在一起,大大增加了瀏覽器需要解析CSS樹的耗時(shí)。其實(shí)解析CSS樹的過程是很快的,一般在幾十微妙到幾毫秒之間。
CSS 對(duì)象模型 (CSSOM):CSSOM是一個(gè)建立在web頁面上的 CSS 樣式的映射,它和DOM類似,但是只針對(duì)CSS而不是HTML。
CSSOM 生成過程:
CSSOM 生成過程大致是,解析 HTML ,在文檔的 head 部分遇到了一個(gè) link 標(biāo)記,該標(biāo)記引用一個(gè)外部 CSS 樣式表,下載該樣式表后根據(jù)上述過程生成 CSSOM 樹。 這里我們要知道的是,CSSOM 阻止任何東西渲染,(意味著在CSS沒處理好之前所有東西都不會(huì)展示),而如果CSS文件中混入了Base64,那么(因?yàn)槲募w積的大幅增長(zhǎng))解析時(shí)間會(huì)增長(zhǎng)到十倍以上。
而且,最重要的是,增加的解析時(shí)間全部都在關(guān)鍵渲染路徑上。
所以,當(dāng)我們需要使用到 Base64 技術(shù)的時(shí),一定要意識(shí)到上述的問題,有取舍的進(jìn)行使用(大家在開發(fā)vue的時(shí)候,配合webpack打包,應(yīng)該會(huì)發(fā)現(xiàn)有一些圖片會(huì)被webpack打包成base64格式,一般是1024個(gè)字節(jié)以內(nèi)的)。
新聞標(biāo)題:JavaScript不得不知的圖片Base64編碼小知識(shí)
網(wǎng)站網(wǎng)址:http://aaarwkj.com/news32/103782.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容