前端性能优化:使用媒体查询加载指定大小的背景图片
2023-09-11 14:20:44 时间
来源: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 极客社区
相关文章
- [转] 10 分钟彻底搞懂前端页面性能监控
- [转] Performance — 前端性能监控利器
- [转] 前端性能的几个基础指标
- FPS手游《战地先锋》性能案例精讲
- 如何确定电缆组件的性能
- 你还搞不定前端性能测试?这里有一大波测试工具请拿走
- webpack前端性能优化
- Spring Boot 2.2 正式发布,大幅性能提升 + Java 13 支持
- 《循序渐进Linux(第2版) 基础知识 服务器搭建 系统管理 性能调优 虚拟化与集群应用》——2.4 U盘安装过程
- 前端性能分析优化
- WEB前端性能分析--工具篇
- web前端性能分析--原理篇
- 第三方支付系统性能测试要点分析
- 我眼中的性能测试工程师
- Linux性能测试工具
- 前端网络(性能)监测工具 berserkJS
- 前端性能优化:使用Data URI代替图片SRC
- 前端性能优化:网络存储的静态缓存和非必要内容优化
- 右击 -> 查看源文件,和其他一些前端性能测试技巧
- 深入麒麟960 比性能更出众的是稳定性