前端性能优化：使用媒体查询加载指定大小的背景图片

日期：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 极客社区

来源：前端性能优化：使用媒体查询加载指定大小的背景图片