javascript - 很多网页前端都是一整个图片裁剪出来很多小的素材比如按钮图标等这是为什么?手机端开发也会这么操作吗?
淡淡烟草味
淡淡烟草味 2017-07-03 11:42:32
[HTML讨论组]

比如微博的这个加v认证的图标

为什么不让UI分成一批文件而是在用的时候再裁剪?
顺便问一问在真正的开发中,手机端也会这么操作吗?

淡淡烟草味
淡淡烟草味

全部回复(3)
大家讲道理

资源体积小, 数量多. 如果分成一批文件的话, 网页加载的时候会产生大量的 http 请求. http 请求的建立是需要消耗设备性能和网络带宽的.

与其说为什么不分成一批文件, 倒不如说是为了提升新能而把小文件整合在一起发布.

给我你的怀抱

可以搜一下 精灵图 雪碧图 sprite图之类的关键字

PHP中文网

这是CSS雪碧图效果.
原理: 将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分.
目的: 减少加载网页图片时对服务器的请求次数,提高页面的加载速度.
问题: 首次加载时, 内存消耗比较大, 而且会把不需要用到的图片或者图标也一起加载到内存中.


手机端一般不用雪碧图效果.
原因是手机内存本来就不富裕, 手机端资源加载一般都是用到的时候在去加载到内存中(lazy load), 而且使用雪碧图会提高图片维护成本, 在使用图片时需要更多的css操作来显示指定的图片. 同时在iOS中, 使用雪碧图也加大了不同的手机图片适配难度.

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号