Skip to content

[css] 第114天 为什么要使用css sprites? #1038

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第114天 为什么要使用css sprites?
#55

Activity

nowherebutup

nowherebutup commented on Aug 8, 2019

@nowherebutup
  • 减少HTTP请求
  • 增加图片显示速度
qp97vi

qp97vi commented on Aug 8, 2019

@qp97vi

减少页面向服务器请求次数,优化该页面的加载速度

HCLQ

HCLQ commented on Aug 8, 2019

@HCLQ

就像钱不够,省着用,一块搬开两块用

LinStan

LinStan commented on Aug 8, 2019

@LinStan

css sprites指的是将该页面请求的图片资源都拼接到一个图片文件上,通过css从拼接好的图片上获取需要的部分。
优点:
一个是减少了HTTP请求的发送次数
一个是合并后的图片一般小于合并前的图片大小总和
缺点:
如果发生改动需要重新做拼接

xiangshuo1992

xiangshuo1992 commented on Aug 8, 2019

@xiangshuo1992
Contributor

根据项目具体需求来做选择吧,现在小图片用base64 也是可以的,或者图标字体库

Konata9

Konata9 commented on Aug 19, 2019

@Konata9

CSS sprites 把许多小图片 icon 合成一张大图片。利用 background-position 来显示对应的图片。这样做的好处就是可以减少 http 请求,提高网页的加载速度。如果有 10 个小图标那就需要请求 10 次,如果合成 CSS sprites 就只需要请求一次。

以前一般使用 Photoshop 进行拼接,现在的话有工具可以直接生成。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@HCLQ@xiangshuo1992@LinStan

        Issue actions

          [css] 第114天 为什么要使用css sprites? · Issue #1038 · haizlin/fe-interview