亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端圖片最優(yōu)化的引入方式分析

蘇丹 / 1481人閱讀

摘要：前端圖片引入方式分析眾所周知，頁(yè)面內(nèi)圖片的引入方式一般有這種雪碧圖，內(nèi)聯(lián)，普通單圖。當(dāng)然了，你非要把標(biāo)簽寫在前面那我只能說(shuō)，哥，我服了解了三種方式的優(yōu)劣勢(shì)之后，對(duì)于使用場(chǎng)景簡(jiǎn)單歸納一下頁(yè)面自身獨(dú)有的圖片，全部合并成一張雪碧圖。

前端圖片引入方式分析

眾所周知，頁(yè)面內(nèi)圖片的引入方式一般有這3種：雪碧圖，base64內(nèi)聯(lián)，普通單圖。（canvas,svg等非常規(guī)方式不在此次議題里），先簡(jiǎn)單分析一下三種方式的優(yōu)劣勢(shì)： ? ?


??

嗯，大概的情況是這樣的，然后我來(lái)稍微擴(kuò)展解釋一下：

base64圖本身確實(shí)無(wú)法緩存，但是base64圖一般是存在于css里的，那么就可以隨著css被緩存而實(shí)現(xiàn)間接緩存，所以它的緩存屬性不是“無(wú)”。說(shuō)它“差”是因?yàn)椴⒉皇侵苯颖划?dāng)做圖片緩存。當(dāng)然如果是直接寫在html里的，那就沒(méi)法緩存了，這個(gè)要注意。

base64額外增加html/css大小并不是主要問(wèn)題，問(wèn)題是，因此造成的渲染堵塞有時(shí)候是致命的！而作為圖片文件加載則不存在這個(gè)問(wèn)題，因?yàn)閳D片是不會(huì)堵塞到html和css加載的，因此也不會(huì)影響首屏渲染。（當(dāng)然了，你非要把img標(biāo)簽寫在style前面那我只能說(shuō)，哥，我服~~~~）

了解了三種方式的優(yōu)劣勢(shì)之后，對(duì)于使用場(chǎng)景簡(jiǎn)單歸納一下：

頁(yè)面自身獨(dú)有的圖片，全部合并成一張雪碧圖。

公共模塊或者公共組件，如果包含多張圖片，則各自為陣合并各自的雪碧圖；如果只有一兩個(gè)圖片，或者包含有可以被其他模塊、組件、頁(yè)面復(fù)用的圖片，則使用靈活性好的單圖模式或base64模式。

不過(guò)這種說(shuō)法遺留了一個(gè)問(wèn)題：例如所有頁(yè)面都有的吊頂區(qū)域，假如那里有一個(gè)小圖，注意，是一個(gè)喔（如果是很多的話就合并啦），這種時(shí)候是直接單圖引入呢？還是base64內(nèi)嵌到吊頂?shù)腸ss里？

別急！

下面我們?cè)賹?duì)base64模式做一個(gè)簡(jiǎn)單的分析：

先明確我們對(duì)于base64圖片劣勢(shì)的控訴點(diǎn)在于，1：丫會(huì)增大原始圖片文件；2：植入css之后會(huì)增大css文件大小。

做一個(gè)簡(jiǎn)單的實(shí)驗(yàn)，我把幾個(gè)全局經(jīng)常出現(xiàn)的小圖標(biāo)，用base64編碼，結(jié)果：平均增大35%
但是！gzip壓縮后 —— 4%~40%，平均增大22%

下面簡(jiǎn)單歸納一下不同場(chǎng)景所應(yīng)該使用的圖片引入方式：（正經(jīng)臉 -_- !!!）

1、全局通用的，非特定頁(yè)面或模塊獨(dú)有的圖片，采用單圖或base64方式引入，二者區(qū)別如下：
1.1 若該圖片在多處使用或圖片本身較大（這類圖總體積大于20kb），則使用單圖模式
1.2 若該圖片只有少數(shù)地方使用且圖片本身較?。ㄟ@類圖總體積小于20kb），則使用base64模式
2、公共模塊/組件里的圖片（假設(shè)該模塊名為mod-prd）
模塊內(nèi)有N(N>=3)個(gè)圖片，則全部放入slice/mod/prd里，使用雪碧圖模式，否則參考全局通用圖片處理方式
3、頁(yè)面自身獨(dú)有的圖片，全部合并成一張雪碧圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112658.html

相關(guān)文章

  • 前端每周清單第 34 期：Vue 現(xiàn)狀盤點(diǎn)與 3.0 展望，React 代碼遷移與優(yōu)化，圖片優(yōu)化詳論

    摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會(huì)談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過(guò)本文卻是打破砂鍋問(wèn)到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會(huì)拖慢性能，過(guò)度的性能優(yōu)化反而會(huì)有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

    CoderStudy 評(píng)論0 收藏0

  • 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略、Vue 單元測(cè)試、Headless Chrom

    摘要：前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測(cè)試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略...

    HackerShell 評(píng)論0 收藏0

  • 前端面試題（五）（安全、性能優(yōu)化）

    摘要：可能造成危害利用已通過(guò)認(rèn)證的用戶權(quán)限更新設(shè)定信息等利用已通過(guò)認(rèn)證的用戶權(quán)限購(gòu)買商品利用已通過(guò)的用戶權(quán)限在留言板上發(fā)表言論。二說(shuō)說(shuō)你說(shuō)了解的前端性能優(yōu)化方面減少請(qǐng)求合并文件精靈減少查詢查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件。 一、說(shuō)說(shuō)你所知道的web安全及防護(hù)措施 常用攻擊手段：SQL注入、XSS(Cross Site Script)，跨站腳本攻擊、CSRF(Cross Sit...

    tuomao 評(píng)論0 收藏0

  • 前端面試題（五）（安全、性能優(yōu)化）

    摘要：可能造成危害利用已通過(guò)認(rèn)證的用戶權(quán)限更新設(shè)定信息等利用已通過(guò)認(rèn)證的用戶權(quán)限購(gòu)買商品利用已通過(guò)的用戶權(quán)限在留言板上發(fā)表言論。二說(shuō)說(shuō)你說(shuō)了解的前端性能優(yōu)化方面減少請(qǐng)求合并文件精靈減少查詢查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件。 一、說(shuō)說(shuō)你所知道的web安全及防護(hù)措施 常用攻擊手段：SQL注入、XSS(Cross Site Script)，跨站腳本攻擊、CSRF(Cross Sit...

    aaron 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<