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

直到CSS @supports被廣泛支持，CSS媒體查詢的使用接近于CSS中寫邏輯控制。我們經常用CSS媒體查詢來根據設備調整CSS屬性（通常根據屏幕寬度調 整CSS屬性），例如根據不同的屏幕寬度來設置不同的元素寬度或者是懸浮位置。那么我們為什么不用這種方式來改變背景圖片呢？

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

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

開發人員普遍會將他們的代碼習慣優先于用戶體驗。但是很多很小的改變可以讓用戶體驗有個飛躍提升，所以任何一點兒小小的優化都會提升你網站的庫存。再回顧一下之前的這些優化，我將在以后繼續介紹其他的優化。

• 前端性能優化：DocumentFragments或innerHTML取代復雜的元素注入
• 前端性能優化：高頻執行事件/方法的防抖
• 前端性能優化：網絡存儲的靜態緩存和非必要內容優化
• 前端性能優化：使用異步加載，延遲加載依賴
• 前端性能優化：使用Array.prototype.join代替字符串連接
• 前端性能優化：盡可能使用CSS動畫
• 前端性能優化：使用事件委托
• 前端性能優化：使用Data URI代替圖片SRC

via 極客社區

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

轉載于:https://www.cnblogs.com/java20130725/p/3215515.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。