資訊專欄INFORMATION COLUMN
摘要：前端圖片引入方式分析眾所周知，頁面內圖片的引入方式一般有這種雪碧圖，內聯，普通單圖。當然了，你非要把標簽寫在前面那我只能說，哥，我服了解了三種方式的優劣勢之后，對于使用場景簡單歸納一下頁面自身獨有的圖片，全部合并成一張雪碧圖。
前端圖片引入方式分析
眾所周知，頁面內圖片的引入方式一般有這3種：雪碧圖，base64內聯，普通單圖。（canvas,svg等非常規方式不在此次議題里），先簡單分析一下三種方式的優劣勢： ? ?
??
嗯，大概的情況是這樣的，然后我來稍微擴展解釋一下：
base64圖本身確實無法緩存，但是base64圖一般是存在于css里的，那么就可以隨著css被緩存而實現間接緩存，所以它的緩存屬性不是“無”。說它“差”是因為并不是直接被當做圖片緩存。當然如果是直接寫在html里的，那就沒法緩存了，這個要注意。
base64額外增加html/css大小并不是主要問題，問題是，因此造成的渲染堵塞有時候是致命的！而作為圖片文件加載則不存在這個問題，因為圖片是不會堵塞到html和css加載的，因此也不會影響首屏渲染。（當然了，你非要把img標簽寫在style前面那我只能說，哥，我服~~~~）
了解了三種方式的優劣勢之后，對于使用場景簡單歸納一下：
頁面自身獨有的圖片，全部合并成一張雪碧圖。
公共模塊或者公共組件，如果包含多張圖片，則各自為陣合并各自的雪碧圖；如果只有一兩個圖片，或者包含有可以被其他模塊、組件、頁面復用的圖片，則使用靈活性好的單圖模式或base64模式。
不過這種說法遺留了一個問題：例如所有頁面都有的吊頂區域，假如那里有一個小圖，注意，是一個喔（如果是很多的話就合并啦），這種時候是直接單圖引入呢？還是base64內嵌到吊頂的css里？
別急！
下面我們再對base64模式做一個簡單的分析：
先明確我們對于base64圖片劣勢的控訴點在于，1：丫會增大原始圖片文件；2：植入css之后會增大css文件大小。
做一個簡單的實驗，我把幾個全局經常出現的小圖標，用base64編碼，結果：平均增大35%
但是！gzip壓縮后 —— 4%~40%，平均增大22%
下面簡單歸納一下不同場景所應該使用的圖片引入方式：（正經臉 -_- !!!）
1、全局通用的，非特定頁面或模塊獨有的圖片，采用單圖或base64方式引入，二者區別如下：
1.1 若該圖片在多處使用或圖片本身較大（這類圖總體積大于20kb），則使用單圖模式
1.2 若該圖片只有少數地方使用且圖片本身較?。ㄟ@類圖總體積小于20kb），則使用base64模式
2、公共模塊/組件里的圖片（假設該模塊名為mod-prd）
模塊內有N(N>=3)個圖片，則全部放入slice/mod/prd里，使用雪碧圖模式，否則參考全局通用圖片處理方式
3、頁面自身獨有的圖片，全部合并成一張雪碧圖
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112658.html
摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...
摘要：可能造成危害利用已通過認證的用戶權限更新設定信息等利用已通過認證的用戶權限購買商品利用已通過的用戶權限在留言板上發表言論。二說說你說了解的前端性能優化方面減少請求合并文件精靈減少查詢查詢完成之前瀏覽器不能從這個主機下載任何任何文件。 一、說說你所知道的web安全及防護措施 常用攻擊手段：SQL注入、XSS(Cross Site Script)，跨站腳本攻擊、CSRF(Cross Sit...
摘要：可能造成危害利用已通過認證的用戶權限更新設定信息等利用已通過認證的用戶權限購買商品利用已通過的用戶權限在留言板上發表言論。二說說你說了解的前端性能優化方面減少請求合并文件精靈減少查詢查詢完成之前瀏覽器不能從這個主機下載任何任何文件。 一、說說你所知道的web安全及防護措施 常用攻擊手段：SQL注入、XSS(Cross Site Script)，跨站腳本攻擊、CSRF(Cross Sit...
閱讀 3569·2021-11-15 11:36
閱讀 1060·2021-11-11 16:55
閱讀 694·2021-10-20 13:47
閱讀 2993·2021-09-29 09:35
閱讀 3428·2021-09-08 10:45
閱讀 2553·2019-08-30 15:44
閱讀 848·2019-08-30 11:10
閱讀 1428·2019-08-29 13:43
