CSS sprites 的优点及如何使用？

2019-01-01

回答

CSS sprites 将多张图片合并为一张图片，从而减少浏览器对 HTTP 的请求数量，进而减少网页的加载时间。即使在 HTTP/2 协议下，这依旧可以减少网页的加载时间。

在 HTTP/1.1 中，每个 TCP 连接只允许一个请求。现代浏览器虽然可以打开多个（2-8）并行的 TCP 连接，但连接数量依旧有限。

HTTP/2 允许浏览器和服务器之间的多个请求在一个 TCP 连接上进行复用。 这意味着 TCP 连接被更有效的使用了：同一个页面在打开和关闭 TCP 连接的次数被减少了，客户端和服务器之间的延迟也被减少了。这样一来，数十个图片就可以在同一个 TCP 连接中并行加载了。

根据基准测试结果，尽管 HTTP/2 比 HTTP/1.1 要快 50％，但在大多数情况下，多个图片合并为一张图片的加载速度依旧要快于多个未合并的图片的加载。

想要在 CSS 中使用 sprites 需要用到 CSS 中的 background-image、background-position 及 background-size 属性，他们可以通过改变元素背景的图片、位置及大小来达到预期的效果。

加分回答

• CSS Sprite 可以使用 Gulp 或 Webpack 等工具减轻图片重构、像素调整的困扰
• 为什么使用 SVG 可以提升网页性能和体验
• 如何实现 SVG sprites

返回总目录

每天 30 秒