文章详情页
javascript - 很多网页前端都是一整个图片裁剪出来很多小的素材比如按钮图标等这是为什么？手机端开发也会这么操作吗？
浏览：128日期：2022-11-05 14:10:09
问题描述
比如微博的这个加v认证的图标 
为什么不让UI分成一批文件而是在用的时候再裁剪？顺便问一问在真正的开发中，手机端也会这么操作吗？
问题解答
回答1：资源体积小, 数量多. 如果分成一批文件的话, 网页加载的时候会产生大量的 http 请求. http 请求的建立是需要消耗设备性能和网络带宽的.
与其说为什么不分成一批文件, 倒不如说是为了提升新能而把小文件整合在一起发布.
回答2：可以搜一下 精灵图 雪碧图 sprite图之类的关键字
回答3：这是CSS雪碧图效果. 原理: 将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分. 目的: 减少加载网页图片时对服务器的请求次数,提高页面的加载速度. 问题: 首次加载时, 内存消耗比较大, 而且会把不需要用到的图片或者图标也一起加载到内存中.
手机端一般不用雪碧图效果. 原因是手机内存本来就不富裕, 手机端资源加载一般都是用到的时候在去加载到内存中(lazy load), 而且使用雪碧图会提高图片维护成本, 在使用图片时需要更多的css操作来显示指定的图片. 同时在iOS中, 使用雪碧图也加大了不同的手机图片适配难度.
标签：
JavaScript
相关文章：
1. docker-machine添加一个已有的docker主机问题2. angular.js - 为什么给 Angular 指令绑定事件无法生效3. html5 - 使用angular中，图片上传功能中选择多张图片是怎么实现的？有什么好的思路吗？4. golang - 用IDE看docker源码时的小问题5. docker - 各位电脑上有多少个容器啊？容器一多，自己都搞混了，咋办呢？6. 为什么我ping不通我的docker容器呢？？？7. MySQL 查询疑问？8. mysql 5个left关键 然后再用搜索条件 几千条数据就会卡，如何解决呢9. phpstudy 发现多个后门木马，有人遇到过吗？10. 请问一下，这是6.0的吗？为什么我下载的和老师讲的不一样呢？
排行榜
网公网安备