Web前端開(kāi)發(fā)工程師是一個(gè)很新的職業(yè)，是從事Web前端開(kāi)發(fā)工作的工程師。主要進(jìn)行網(wǎng)站開(kāi)發(fā)，優(yōu)化，完善的工作。網(wǎng)頁(yè)制作是Web 1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。
給你學(xué)習(xí)路線，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd
圖片的處理是每個(gè)前端工程師都會(huì)面對(duì)的問(wèn)題，你一般會(huì)如何處理圖片呢？直接src引用,還是先壓縮一下？今天來(lái)和大家介紹一種新的方式：base64
小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 五四七，三零二，三八三 】，無(wú)論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來(lái)了解一起進(jìn)步一起學(xué)習(xí)！裙內(nèi)有開(kāi)發(fā)工具，很多干貨和技術(shù)資料分享！
Base64編碼是一種圖片處理格式，通過(guò)特定的算法將圖片編碼成一長(zhǎng)串字符串，在頁(yè)面上顯示的時(shí)候，可以用該字符串來(lái)代替圖片的url屬性。說(shuō)白了就是用一段編碼代替圖片文件。舉個(gè)例子，我們一般引入圖片會(huì)這樣寫：
轉(zhuǎn)換成base64后就可以這樣表示：
小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 五四七，三零二，三八三 】，無(wú)論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來(lái)了解一起進(jìn)步一起學(xué)習(xí)！裙內(nèi)有開(kāi)發(fā)工具，很多干貨和技術(shù)資料分享！
base64的編碼很長(zhǎng)，這里沒(méi)有完全展示
那么base64的好處是什么呢？
1.減少了HTTP請(qǐng)求
2.某些文件可以避免跨域的問(wèn)題
3.圖片更新不要重新上傳，不用清理緩存
但是不能只看到base64的優(yōu)勢(shì)，只有全面了解它的特性才能很好的運(yùn)用。那base64有什么缺點(diǎn)呢？
base64 編碼后的文本，大小比原文件大 1/3左右
HTML 文件會(huì)變大，會(huì)影響加載速度
base64 無(wú)法緩存，要緩存只能緩存包含 base64 的文件
小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 五四七，三零二，三八三 】，無(wú)論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來(lái)了解一起進(jìn)步一起學(xué)習(xí)！裙內(nèi)有開(kāi)發(fā)工具，很多干貨和技術(shù)資料分享！
既然既有優(yōu)點(diǎn)又有缺點(diǎn)，該如何取舍呢？
這個(gè)問(wèn)題由一個(gè)解決的利器，webpack--url-loader可以根據(jù)文件的大小自動(dòng)決定是否base64化，幫開(kāi)發(fā)者省心。
關(guān)于base64的問(wèn)題就和大家介紹到這里，歡迎大家給我留言~
