首页 > 其他分享 >雪碧图

雪碧图

时间:2023-03-14 15:55:57浏览次数:33  
标签:hover HTTP 请求 TCP 雪碧图 图片

雪碧图

雪碧图的主要作用是减少 HTTP 请求数量。

假如你有 100 张小图片,你要发起 100 个请求。如果你合并成一个大图片,那你只需要发一个请求。

这在 HTTP/1 上是有不错的优化效果的,因为 HTTP/1 下不能充分利用 TCP 带宽,一个 TCP 同时只能有一个请求,请求太多就要排队,导致严重的阻塞。

到了 HTTP/2 因为多路复用特性的缘故,则没有太大必要了,所有的请求都是通过流的方式打散发送的,充分利用 TCP 的带宽。

另一个作用是 提前加载好需要用到的图片。

假设我们的一个按钮是用图片做的,hover 时会替换图片。如果分成独立的两个图片,hover 就会出现闪烁的效果。

这是因为图片还没有下载好,在图片完成下载前,显示的是空白,直到图片下载完成才替换上图片。

如果我们将按钮的所有状态都放到雪碧图了,就不会有这个问题了。当然还有一种方式就是通过 JS 手动做其他状态小图片的缓存。

标签:hover,HTTP,请求,TCP,雪碧图,图片
From: https://www.cnblogs.com/yangguanglei/p/17215202.html

相关文章

  • 19. 雪碧图
    一、什么是雪碧图  我们可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示图片,这样图片会同时加载到网页中,就可以有效的避免出现闪烁的......
  • H5 雪碧图 移动的机器猫
    精灵图(英语:Sprite),又被称为雪碧图或拼合图。在计算机图形学中,当一张二维图像集成进场景中,成为整个显示图像的一部分时,这张图就称为精灵图。本文中用的就是这张,来自爱给......
  • 雪碧图CSS Sprite
    CSSSprite也叫CSS精灵图,或者CSS雪碧图,是一种网页图片应用处理方式。它允许你讲一个页面涉及到的所有的小图标(或其他图)包含到一张大图。当前的问题虽然每个小图标或者小图片......
  • CSS - 08 雪碧图
    8.雪碧图定义和原理:将多个小图片统一保存到大图片中,然后通过调整background-position来显示响应的图片,这样就能解决因加载延迟带来的图片闪烁问题使用步骤:先确定......