前端试题-什么是css sprite?优缺点?

CSS Sprite是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,这样,在访问页面时,就只需请求一次就可以了,而不必一次次向服务器发送请求。

它的原理就是把见面中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,”background-repeat”,”background-position”的组合进行背景定位,实现多个位置的背景,一张图来搞定。

优点

1 减少网页的http请求,提高页面性能

2 减少图片字节

3 解决比较头疼的命名问题,以前好多张一个个想名字,现在一个名字就搞定

4 更换整个网页风格时更方便,更易维护

缺点

1 图片合并时,要把多张有序合理合并成一张,还要留好足够的空间,防止板块内出现不必要的背景,如果在宽屏,高分辨率的屏幕下的自适应页面,图片如果不够宽,很容易出现背景断裂

2 拼合图片的时间成本加大,CSS Sprites在开发时,需要通过photoshop或其他工具测量计算每一个背景单元的精确位置

3 编码和维护的时间成本会增加,CSS Sprites在维护时,如果页面背景有少许改动,一般就要改这张合并的图片,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。相对于一个可以轻松计算出来状态位置的简单按钮来说,大型的 sprite 会导致无尽地测试和图片状态的重新摆放。

4 不是所有图片都是背景, 背景图片应该留给按钮以及用来装饰元素,而用来传达重要信息的图像应该内联在 XHTML 中。

 

总之,CSS Sprite是很有用,但也不要一味滥用而超出一个度的限制,需明白过犹不及。

时间: 2024-10-13 00:52:56

前端试题-什么是css sprite?优缺点?的相关文章

百度前端学习日记19——CSS sprite(雪碧图)

原理 如图所示,无黑影处为浏览器中会显示的部分,通过改变backgroundPosition来使显示的地方不同,从而达到更换背景的目的 更多 浅谈CSS Sprite和实例解析 CSS Sprites:实用技术还是生厌之物? 原文地址:https://www.cnblogs.com/no-wing/p/9325669.html

前端优化总结-服务器端-减少Http次数-图片合成css sprite

先上一张整洁的前端优化总结图(之前的一篇总结图太烂了) 以前切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.客户每显示一张图片都会向服务器发送请求. 所以,图片越多请求次数越多,造成延迟的可能性也就越大.所以在这里我们要做的就是把网页中常用的图片整合到一张图片文件中,再利用CSS的“backg round-image”,“background- repeat”,“background-position”的组合进行背景定位,background-pos

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习

面试题2:BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这

【08】css sprite是什么,有什么优缺点

[08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地提高页面加载速度. 增加图片信息重复度,提高压缩比,减少图片大小. 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现. 缺点: 图片合并麻烦. 维护麻烦,修改一个图片可能需要从新布局整个图片,样式. ** 原文地址:https://www.cnblogs.com/moyuling/p/90

CSS Sprite的优缺点分析

目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被大量网站使用,包括使用了大型 sprite 的 Amazon . 但是这些被广泛热议的好处真的是值得的吗?设计师们是否在没有全面考虑到所有情况的情况下,在盲目地使用这个技术呢?设计师们是不是过于关注 CSS sprite 的流行,而忽略了其它应该仔细斟酌的因素了呢? 这篇文章会讨论下使用 CSS s

css sprite 雪碧图

一.什么是雪碧图? 1.我们先来看一下淘宝上面用到的雪碧图实例: a.前端展示 b.css雪碧图为 2.概念 CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 3.什么时候用到雪碧图? a.静态图片,不随用户信息的辩护而变化 b.小图片,图片容量比较小 c.加载量比较大 4.工具介绍 刚刚下载了一个比较实用的雪碧图工具Css Spri

谈谈CSS预处理技术中for循环的应用-CSS Sprite

各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算: 其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间: 假如我们的图

css sprite技巧详解

Css  sprite做为一个前端人员来说必须要掌握,但是这个对于刚学习的同学来说是由困难的,下面我就专门为这个内容做一次分享,这里没有网络图片地址,若内容显示不全面你可以到我的个人博客中?1. [代码][CSS]代码    CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载