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

日期：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

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

前端性能优化——如何提高页面加载速度？
1.将样式表放在头部首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止"白屏". 我们 ...
前端性能优化学习 08 资源加载优化
图片延迟加载什么是延迟加载首先来想象一个场景,当浏览一个内容丰富的网站时,比如电商的商品列表页.主流视频网站的节目列表等,由于屏幕尺寸的限制,每次只能查看到视窗中的那部分内容,而要浏览完页面所包含 ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
前端性能优化－－预加载技术
当我们谈到前端的性能时,总是会提到比如合并.压缩.缓存或者在服务器上开启gzip之类的,目的都是为了让页面加载的更快. 资源预拉取(prefetch)则是另一种性能优化的技术.通过预拉取可以告诉浏览器 ...
不加载执行js_前端性能优化：preload 预加载页面资源
网上看到一篇来自蚂蚁金服数据体验团队的文章,觉得不错,分享给大伙:https://juejin.im/post/5a7fb09bf265da4e8e785c38 本文主要介绍preload的使用,以及 ...
html src加载外部静态资源,前端性能优化2:静态资源加载与优化
css和js的装载与执行-HTML 页面加载渲染的过程一个网站在浏览器端是如何进行渲染的呢? 流程示意图.png HTML渲染过程的一些特点顺序执行.并发加载(单个域名的并发数量是有限的,所以多个 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞进阶篇
小程序性能优化之页面预加载方案进阶篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面预加载方案 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞集成篇
小程序性能优化之页面预加载方案集成篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言之前看到一篇文 ...
web前端页面性能优化（提升页面加载速度）
我们都知道,对于web应用来说性能很重要,然而性能的优化相关知识非常庞大而复杂,对于性能优化我们需要做些什么,或者瓶颈是什么通常是我们不太了解的.(当然技术大牛除外) 通过查阅相关资料,了解到了一些关 ...

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

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

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

最新文章

热门文章