haizlin/fe-interview

[css] 第17天 解释下 CSS sprites的原理和优缺点分别是什么？

haizhilin2013 opened this issue · 19 comments

haizhilin2013 commented

第17天 解释下 CSS sprites的原理和优缺点分别是什么？

github-linong commented

我来说下我的观点
原理：
多张图合并成一张图

优点&解决的问题

  1. hover效果，如果是多个图片，网络正常的情况下首次会闪烁一下。如果是断网情况下，就没图片了。sprites 就很好的解决了这个问题（第一次就加载好了）。
  2. 合并了请求数
  3. 制作帧动画方便

缺点

  1. 位置不好控制，有时候容易露底。。比如说3030的按钮，图片只有1212保不齐就漏出其他图片了。
  2. 合成时候比较费时（有工具代替）
  3. 位置计算费时（有工具代替）
  4. 更新一部分的时候，需要重新加载整个图片，缓存失效。
  • 👍1
tzjoke commented

在http2下，雪碧图最大的优势减少请求数已经荡然无存。。

Vi-jay commented

原理：多张小图标合并成一张图片，利用background-position来显示相对应的图标
优点：请求数量少，预先加载图标
缺点：难管理，资源大

Konata9 commented

CSS sprites 的原理是将许多小图标或小图片拼成一张大图，然后利用 background-position + 固定的宽高来显示对应大图位置的图片作为背景。Amazon 的图标就是用的 CSS Sprites 拼在一张大图上。

由于合并成了一张图，所以好处就是在于请求数减少。而缺点就在于如果图片拼位置出现错误，在显示的时候就有可能显示不完整或者错位。

Toeat commented

维护起来是真麻烦

aoxiangsky commented

在http2下，雪碧图最大的优势减少请求数已经荡然无存。。
为什么？

hayahayao commented

HTTP2多路复用，并行传输，多张图片也只需建立一次HTTP请求

yqh708 commented

原理：把项目需要用到的图标合并成一张大图，在使用的时候通过position定位来展示指定的图标
优点：大大减少了请求次数
确定：定位不太好控制，多用于小图标的展示。

xuxihua commented

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
原文链接：https://blog.csdn.net/sunnyjingqi/article/details/83064872

blueRoach commented

原理：将页面中所有用到的图片都剪切到一张图片上。
优点：减少请求；便于改变整个样式，只需要换一张图片即可

缺点：

  • 不利于修改，每当你要增加一张图片时，还要从新剪切一张图出来；
  • 定位图片位置麻烦

现在基本没见谁用过这东西了把

yqh708 commented
MrZ2019 commented

我来说下我的观点
原理：
多张图合并成一张图

优点&解决的问题

hover效果，如果是多个图片，网络正常的情况下首次会闪烁一下。如果是断网情况下，就没图片了。sprites 就很好的解决了这个问题（第一次就加载好了）。
合并了请求数
制作帧动画方便
缺点

位置不好控制，有时候容易露底。。比如说3030的按钮，图片只有1212保不齐就漏出其他图片了。
合成时候比较费时（有工具代替）
位置计算费时（有工具代替）
更新一部分的时候，需要重新加载整个图片，缓存失效。

xiezhenghua123 commented

俗称精灵图
原理：把所有的图片放到一张图片上进行加载，利用background-position进行图片定位
优点：网页加载速度快
缺点：合并麻烦，搞不好会错位

dealdot commented

现在webpack把这些缺点都解决了吧

amikly commented

原理

CSS 图像合并（Image sprites） 技术，亦作 CSS 贴图定位、图像精灵（sprite），被运用于众多使用大量小图标的网页应用之上

它可取图像的一部分来使用， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位

访问页面时避免图片载入缓慢的现象，使得使用一个图像文件替代多个小文件成为可能

注意: 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好

优点

  • CSS Sprites能减少网页的http请求，从而大大的提高页面的性能
  • CSS Sprites能减少图片的字节
  • CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
  • CSS Sprites只需要修改一张或少张图片的颜色或样式就能改变整个网页的风格

缺点

  • 图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景
  • 图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂
  • 图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置
  • 可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节
WangXi01 commented

已经好多年没用过了，雪碧图

Iambecauseyouare commented

原理：通过调整background-position数值，使背景图片以不同的样貌出现，图片整体没有改变
优点：能够提升网站性能，大量图片合成一个图片，大大减少了Http的连接数
缺点：维护性不高，而且由于图片的位置需要固定为某个绝对值，就失去了诸如center一样的灵活性，必须限制盒子的大小才能使用，否则会出现干扰图片的情况

never123450 commented

CSS sprites（CSS 精灵）是一种优化网页加载速度的技术。它的原理是将多个小图标或背景图像合并为一个大图像，并使用 CSS 的 background-position 属性来控制显示其中的特定部分。

优点：

  1. 减少HTTP请求：通过将多个图像合并为一个，减少了网页加载时需要发起的HTTP请求次数，从而提高了页面加载速度。
  2. 提高性能：由于只需要加载一个大图像，而不是多个小图像，因此减少了服务器和客户端之间的通信量，从而提高了性能。
  3. 减少带宽消耗：合并后的大图像的文件大小通常比多个小图像的总和要小，减少了带宽消耗。

缺点：

  1. 难以维护：合并图像后，如果需要修改其中一个图标或背景图像，需要重新生成整个精灵图，并更新相应的 CSS。这增加了维护的复杂性。
  2. 图像裁剪问题：由于使用了 background-position 来控制显示特定部分，因此如果图像的尺寸或位置发生变化，需要调整相应的 CSS，可能会导致图像裁剪不准确。

总的来说，CSS 精灵是一种有效的优化技术，可以减少HTTP请求和提高页面加载性能。然而，它也需要权衡维护复杂性和图像裁剪问题。在实际应用中，需要根据具体情况和需求来决定是否使用 CSS 精灵。

lili-0923 commented

1、CSS sprites的原理：
将许多小图标或者小图拼成一张大图，然后利用background-position + 固定的宽高来显示对应的图标

2、优点：
请求数量减少；预先加载图标；制作帧动画方便

3、缺点：
位置不好控制；更新一部分的时候，需要重新加载整个图片