网页性能优化01-精灵图利弊与应用场景

Posted 2022-12-03 坤小

网页性能优化01-精灵图利弊与应用场景

精灵图：通过减少页面网络请求的数量，来提高网页加载速度

1.1-精灵图介绍

• 1.什么是精灵图
  • 精灵图就是就是将几张较小的图片放在一张大图上，这张大图称之为精灵图，又叫雪碧图（CSS Sprites）
• 2.为什么要有精灵图？
  • 因为浏览器在渲染DOM树的时候，会把所有的外部资源路径(例如img标签的src属性作为网络请求，向服务器发送资源)
    • 例如淘宝网页，一个首页会有300多以上的请求，每一个请求都需要占用网络资源，无形中会降低网页加载速度
      
• 3.精灵图的作用
  • 将多个小图片放入一个大图中，可以减少页面网络请求的数量。从而提升网页的加载速度。
    • 前端如何使用精灵图：只需要使用背景图来加载精灵图即可，通过设置背景图的位置可以加载不同的精灵图。
      
      

1.2-精灵图利弊与适用场景

• 既然只需要将多个小图片放入大图中，那为什么很多网页不把每一个图片都做成精灵图呢？

1.精灵图的利弊

• 1.好处：减少页面网络请求数量
• 2.弊端：维护不便。一但大图中某一个小图片要修改，那么整张大图浏览器需要重新加载(反而会影响性能）

2.精灵图的适用场景

• 1.适合场景 ： 图片固定，几乎很少更换。
  • 例如淘宝页面右侧的话费，手机小图标等
  • 例如携程移动web端的导航小图标
    
• 2.不适合场景：需要经常更换的图片
  • 例如电商类的一些商品图片，基本上不适合使用精灵图
  • 例如京东移动web的小图标，也不适合使用精灵图