日期：2013-7-8??來源：GBin1.com

直到CSS @supports被廣泛支持，CSS媒體查詢的使用接近于CSS中寫邏輯控制。我們經(jīng)常用CSS媒體查詢來根據(jù)設(shè)備調(diào)整CSS屬性（通常根據(jù)屏幕寬度調(diào) 整CSS屬性），例如根據(jù)不同的屏幕寬度來設(shè)置不同的元素寬度或者是懸浮位置。那么我們?yōu)槭裁床挥眠@種方式來改變背景圖片呢？

/* 默認(rèn)是為桌面應(yīng)用加載圖片 */ .someElement { background-image: url(sunset.jpg); }@media only screen and (max-width : 1024px) {.someElement { background-image: url(sunset-small.jpg); } }

上面的代碼片段是為手機(jī)設(shè)備或是類似的移動(dòng)設(shè)備加載一個(gè)較小尺寸的圖片，特別是需要一個(gè)特別小的圖片時(shí)（例如圖片的大小幾乎不可視）。

開發(fā)人員普遍會(huì)將他們的代碼習(xí)慣優(yōu)先于用戶體驗(yàn)。但是很多很小的改變可以讓用戶體驗(yàn)有個(gè)飛躍提升，所以任何一點(diǎn)兒小小的優(yōu)化都會(huì)提升你網(wǎng)站的庫(kù)存。再回顧一下之前的這些優(yōu)化，我將在以后繼續(xù)介紹其他的優(yōu)化。

• 前端性能優(yōu)化：DocumentFragments或innerHTML取代復(fù)雜的元素注入
• 前端性能優(yōu)化：高頻執(zhí)行事件/方法的防抖
• 前端性能優(yōu)化：網(wǎng)絡(luò)存儲(chǔ)的靜態(tài)緩存和非必要內(nèi)容優(yōu)化
• 前端性能優(yōu)化：使用異步加載，延遲加載依賴
• 前端性能優(yōu)化：使用Array.prototype.join代替字符串連接
• 前端性能優(yōu)化：盡可能使用CSS動(dòng)畫
• 前端性能優(yōu)化：使用事件委托
• 前端性能優(yōu)化：使用Data URI代替圖片SRC

via 極客社區(qū)

來源：前端性能優(yōu)化：使用媒體查詢加載指定大小的背景圖片

轉(zhuǎn)載于:https://www.cnblogs.com/java20130725/p/3215515.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的前端性能优化：使用媒体查询加载指定大小的背景图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。