文档章节

CSS Sprite使用简介

不朽灵都
 不朽灵都
发布于 2014/06/05 10:50
字数 467
阅读 48
收藏 0

CSS Sprite 作为减少HTTP请求数量,从而提高网站页面加载速度的一种方式,并被很多网站广泛的应用,比如我们大家所熟知的淘宝。


首先,来看看CSS Sprite所带来的一些问题:

1、CSS Sprite的最大问题是内存使用。比如一张CSS Sprite png图片的大小为600*600,那么浏览器渲染它时需要的内存约为600*600*4=1.4Mb,当然这对于现在的电脑来说,不算一个很大的开销,这里只是为了说明这个问题。

2、CSS Sprite不利于网页缩放。

3、CSS Sprite调用的图片不能被打印,除非在@media中特别添加print声明。

4、如果要修改雪碧中的一个图片,你就要修改整张图片,这会给后续的开发和维护工作带来一些困难。


然而,为了减少HTTP请求数量,优化网站修饰图片是一个行之有效的好方法,相对于CSS Sprite来说,目前也还没有一个更好的能普遍应用的方法去替代它,我们需要做的是合理的使用CSS Sprite。

1、合理利用空间:我们可以用CSS Sprite合并一些大小相同的图片、图标到一个图片文件中,这样可以减少CSS Sprite文件中的空白,让浏览器减少对没用图片的渲染。

2、使用CSS Sprite时,尽量选择不会经常修改的图片,这样可以降低维护成本。

3、ie6 CSS sprites重复加载:如果你使用CSS sprites,那么在ie6下并不能发挥sprites的作用,它还是会每次再重新加载这个图片,解决方法为为ie6添加下面这条js:

<!--[if IE 6]>
<script>
    try {
          document.execCommand("BackgroundImageCache", false, true);
    } catch(e) { }
</script>
<![endif]-->




© 著作权归作者所有

共有 人打赏支持
上一篇: IE6 JS 开发
不朽灵都
粉丝 8
博文 38
码字总数 18073
作品 0
海淀
高级程序员
私信 提问
Google LOGO的CSS Sprite

css-sprite 为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰,Google Doodle推出了一款极其炫酷的LOGO,整个LOGO使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,实现了动画,而...

bestvist
2017/11/11
0
0
.NET性能调优之三:YSlow相关规则的调优工具和方法

.NET性能调优系列文章 系列文章索引 .NET性能调优之一:ANTS Performance Profiler的使用 .NET性能调优之二:使用Visual Studio进行代码度量 .NET性能调优之三:YSlow相关规则的调优工具和方...

达摩院法师
2013/01/08
0
0
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang
2016/11/17
9
0
移动端使用 rem 单位时 css sprites 定位问题

现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;为了减少网络请求数量,提高网页访问性能,一般都会把多个小 icon 合并成一张 sprite 图,然后根据 backgr...

幽涯
2018/06/17
0
0
CSS Sprites vs. Data URIs:在移动端,谁更快?

这篇文章是调查data URIs在移动端的行为三部曲中的最后一部,你可以查看我前面发表的文章,'On Mobile, Data URIs are 6x Slower than Source Linking' (在移动端,data URIs比source Link...

徐继开
2013/09/11
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
28分钟前
1
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
32分钟前
2
0
Java并发编程:深入剖析ThreadLocal

ThreadLocal 的理解 ThreadLocal,很多地方叫线程本地变量,或线程本地存储。ThreadLocal为变量在每个线程中都创建了一个副本,每个线程可以访问自己内部的副本变量。===》解决的问题是线程间...

细节探索者
38分钟前
1
0
【Python3之异常处理】

一、错误和异常 1.错误 代码运行前的语法或者逻辑错误 语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) def test: ^SyntaxError: invalid...

dragon_tech
今天
2
0
编写可维护的 JavaScript

几乎每个程序员都有接手维护别人遗留项目的经历。或者,有可能一个老项目某一天又被重新启动。 通常情况下,接手老项目都会让人恨不得抛弃掉整个代码库从头开始。老代码凌乱、文档缺失、需要...

前端小攻略
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部