网站性能优化之css sprites

Markxu 发布于2019-08-28 17:57 / 2676人阅读

摘要：什么是打开一些网站可以看到每张图片相应需要请求一次后台，如下图请求是比较消耗资源的，当网站中存在较多的请求时，性能就会相应的降低，加载就会变慢，甚至卡住。减少请求能提高性能，就是通过合并多张图片达到减少请求目的的一种技术。

  什么是css sprites?

打开一些网站可以看到每张图片相应需要请求一次后台，如下图：

http请求是比较消耗资源的，当网站中存在较多的http请求时，性能就会相应的降低，加载就会变慢，甚至卡住。
减少http请求能提高web性能，css sprites就是通过合并多张图片达到减少请求目的的一种技术。

  css sprites工作原理

将多张图片合并成一张大的图片，然后利用css中的background-image,background-repeat以及background-position来实现。
background-image用于指定容器的背景图片，比如background-image:url(xxx.png);,
background-repeat用于指定是否及如何重复背景图像，比如background-repeat:no-repeat;,
最重要的是background-position,用于控制我们想要显示的图片位置，比如background-position:6px 6px;表示背景图片的左上角将相对容器元素的左上角向右以及向下移动6px。

  适用场景

1.一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分

2.需要通过降低http请求数完成网页加速。

3.网页中含有大量小图标。或者，某些图标通用性很强。

4.网页中有需要预载的图片。主要是a与a:hover背景图这种关系的。如果a与a:hover的背景图分别加载，那么，就会出现用户鼠标移到某个按钮上，按钮的背景突然消失再出来，产生“闪烁”，如果按钮文字色与大背景相同或相近，就更囧了，有可能让人产生按钮“消失”了的错觉。

  注意事项

1 把几乎不会改变的通用性很强的图标或者其他图片合并最好，可以避免每次更新图片都要重新合并图片
2 利用一些自动工具生成CSS代码，省去自己用ps找偏移量的工作

  推荐工具

css sprite tools(客户端工具)，此工具生成的部分代码如下，选择器的名字就是你的小图片的文件名：

.pic1{background:url(../imgs/allbgs.png) no-repeat 0px 0px;width:6px;padding-top:6px;}
.pic2{background:url(../imgs/allbgs.png) no-repeat -6px 0px;width:6px;padding-top:6px;}
.pic3{background:url(../imgs/allbgs.png) no-repeat -12px 0px;width:16px;padding-top:13px;}
.pic4{background:url(../imgs/allbgs.png) no-repeat -28px 0px;width:15px;padding-top:17px;}

  测试结果

jsfiddle地址

  一些文章

CSS Sprites（截取部分图片）是怎么工作的

csszengarden

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites的概念、原理、适用范围和优缺点

在线工具

在线工具sprite-creator

云服务器 GPU云服务器网站性能优化网站性能监测与优化 css优化性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110919.html

浅探前端图片优化

摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...

CocoaChina 2019-08-30 15:54 评论0 收藏0
浅探前端图片优化

摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...

X1nFLY 2019-08-23 14:14 评论0 收藏0
Java Web 前端高性能优化（一）

摘要：一引言前端的高性能部分，主要是指减少请求数减少传输的数据以及提高用户体验，在这个部分，图片的优化显得至关重要。 Web 发展的速度让许多人叹为观止，层出不穷的组件、技术，只需要合理的组合、恰当的设置，就可以让 Web 程序性能不断飞跃。所有 Web 的思想都是通用的，它们也可以运用到 Java Web。这一系列的文章，主要讲解网页前端性能优化，是与用户最直接接触的。事实证明，与其消耗...

lemon 2019-08-14 12:53 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0