仓酷云

标题: 来谈谈：利用 CSS sprite 的优点和害处 [打印本页]

作者: 老尸 时间: 2015-1-15 23:20
标题: 来谈谈：利用 CSS sprite 的优点和害处
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
网页制造poluoluo文章简介：CSSSprites：鱼翅仍是三鹿？
原文：CSSSprites:UsefulTechnique,orPotentialNuisance?
译文：CSSSprites：鱼翅仍是三鹿？
无处不在的CSSsptites－为数未几的几个能够间接跳过”盛行”这个历程，而能够即刻而且紧紧地跻身于最好CSS理论当中的几个手艺之一。固然它真正盛行是在AListApart注释并承认这个手艺以后，可是早在2003年7月份，PeterStanicek就已入手下手议论它了。
今朝年夜多半的开辟职员对这个手艺都有相称地把握，也有良多关于它的教程和文章。几近一切的文章中都传播鼓吹计划师和开辟职员都应当利用CSSsprite来削减HTTP哀求数，而且节俭一些流量。这个手艺被大批网站利用，包含利用了年夜型sprite的Amazon.
可是这些被普遍热议的优点真的是值得的吗？计划师们是不是在没有周全思索到一切情形的情形下，在自觉地利用这个手艺呢？计划师们是否是过于存眷CSSsprite的盛行，而疏忽了别的应当细心推敲的要素了呢？这篇文章会会商下利用CSSsprite的优点和害处，特别存眷”滥用”sprites的情形，并且会注释下为何“滥用”sprite实际上是华侈工夫。
扫瞄器缓存一切图片

sprite手艺的个中一个优点是图片的加载工夫(在有很多sprite时，单张图片的加载工夫)。由所需图片拼成的一张GIF图片的尺寸会分明小于一切图片拼合前的巨细。单张的GIF只要相干的一个色表，而独自支解的每张GIF都有本人的一个色表，这就增添了整体的巨细。因而，独自的一张JPEG大概PNGsprite在巨细上十分大概比把一张图分红多张得来的图片总尺寸小。可是这真的有设想的那末好吗？
一样平常来讲，扫瞄器会缓存一切的图片–不管图片sprite与否。sprite手艺只是在页面第一次加载的时分才会节俭带宽，同时缓存也会对利用不异图片的其他页面无效。

Firefox缓存显现的扫瞄器缓存的来自amazon.com的图片(在Firefox地点栏输出“about:cache”来检察)。
思索到如今的广泛网速已比2003-2004年时提出这个手艺的时分要快多了，因而大批利用sprite手艺就不是那末需要了。有一点必要明白，不是说不该该用sprite，而是不该该为了无限的优点来滥用这个手艺。
拼合图片的工夫本钱会增添

设想一下一个有三个形态的图片按钮是怎样制造的：代表分歧的形态的图片必要邻近安排在一同构成一张图片。在利用Photoshop或其他软件切图时，分歧的形态其实不会在一同；必要把他们独自切出来再兼并为一张图片。
假如个中任一个图片形态必要改动，全部图片就必要从头制造保留。对一些计划师来讲这不是甚么成绩，大概他们会独自保存分歧按钮形态的源文件，如许必要兼并的时分就复杂了。可是这个历程有点庞大，远没有切出一个独自图片来的复杂。
为了节俭几k的流量和几个服务器哀求(还只产生在第一次加载页面时)，sprite手艺是不是真的值得？
编码和保护的工夫本钱会增添

图片切片输入以后，贫苦仍然存在。固然习气这个历程以后，按钮sprite能够很复杂地编码到CSS中，可是其他的sprites就不这么复杂了。
单一的一个按钮一样平常会是个有定宽的<ul>元素。假设按钮的sprite是相互自力的，就对照复杂：<ul>的宽高会和列表项和锚点的宽高分歧，每一个形态的sprite对齐摆放。sprite的地位也能够很简单地依据每一个按钮的宽高盘算出来。
可是碰到之条件到的，像Amazon大概Google用到的年夜型sprite的情形时，会怎样呢？你能设想到到保护这么一个文件，而且在CSS中改动sprite项的地位会是甚么样吗？另有第一次创立CSS代码的情形？相对一个能够轻松盘算出来形态地位的复杂按钮来讲，年夜型的sprite会招致无尽地测试和图片形态的从头摆放。

一些用于定位Google的sprite图片的款式
Amazon的sprites的确节俭了最少30个HTTP毗连，功能方面也的确有了很年夜的进步。可是把这些优点拿来和开辟和保护本钱做个对照，再把缓存和网速等要素思索出去，决意利用云云年夜型的sprites大概就不那末使人佩服了。
Sprites是不是真的必要“保护”？

固然了，有些人不以为sprite是主要引发头疼的成绩。年夜部分情形下，一个sprite创立并编码完以后，就很少会被修改了，也不会受举行中的网站保护的影响。假设你感到sprite保护不是个成绩的话，那末大概利用年夜型sprite是最好的选择。
不是一切图片都是背景

另外一个不倡始滥用CSSsprite的来由是这会招致开辟职员毛病地利用背景图片。有履历的开辟职员会在项目中思索可会见性成绩，他们分明并非每一个图片都是背景。背景图片应当留给按钮和用来粉饰元素，而用来转达主要信息的图象应当内联在XHTML中。

Amazon准确是利用了内联图象元素和粉饰用的背景。
毛病得利用Sprites影响可会见性

一些刚进门的开辟职员会为了节俭HTTP哀求数(这是利用CSSSprite一向夸大的优点)而把一切的图片都当背景图片来处置–乃至是那些转达主要信息的图片。了局会招致一个缺少可会见性的网站，也会下降HTML中title和alt的潜伏好处。
因而，CSSsprite自己没错，并且也不会激发可会见性成绩(现实上，准确得利用会进步可会见性)。可是不分对错得过分利用sprite会拦阻具有可会见性和临盆率方面的网页建立历程。
HTTP哀求数又怎样？

很多人会力排众议，改良网站功能最主要的部分就是削减HTTP哀求数。也要晓得一项研讨标明一个网站一样平常的会见者中40-60%比例都是没有扫瞄器缓存的。这是不是足以申明应当在一切情形下利用年夜型sprites呢？也许是如许。特别是思索到用户的初次来访对一个网站的主要性。

Firefox的YSlow插件显现HTTP哀求数
以往的扫瞄器一样平常只同意2个并发HTTP毗连，3.0版本以来的Firefox和IE8默许同意6个并发HTTP毗连。这意味着每台服务器有6个并发毗连。援用SteveSouders的话：
“分明这是服务器的基本是很主要的。利用多个域名，如1.mydomain.com,2.mydomain.com,3.mydomain.com,等等，使开辟职员能够完整使用服务器毗连数。在一切域名是统一IP地点的CNAME时仍然无效。”
因而，也许在按钮形态以外利用CSSsprites也是无益的，在将来，跟着收集毗连速率的加速和新版扫瞄器的功能提拔，利用年夜型sprites所带来的优点将会变得何足道哉。
那些Sprites天生器呢？

另外一个喜好年夜型sprite的来由是能够使用一些sprite天生器来复杂得天生sprite。对此类工具的具体会商和评测不在本文会商局限。可是从作者对此类工具的研讨来看，匡助十分无限，而且保护这些sprites一样必要可不雅的事情量，这也是必要和收益衡量的。

有些工具，比方来自Fondue项目标这个，供应输入CSS选项。SteveSouders’的工具SpriteMe是另外一个供应CSS编码选项的。SpriteMe会把现有的网站背景图片转换成单张sprite图片（我之条件到的“年夜型”sprite）并供应下载以供编码进页面当中。但是这些工具只是有助于创立sprite，其实不能在保护方面供应几匡助。Souder的工具貌似对从头计划或结构的网站有效，并且只对那些现有的没有利用sprite办法的网站有效。

能够改善现有的工具，并且将来也会有新的工具呈现。可是，鉴于以上提到的这些弱点，是不是还存在这类大概，就是开辟职员仍然把精神会合在无限的所得上？
存眷多本性能提拔点

下面提到，HTTP哀求数是提拔网站功能必要思索的一个十分主要的要素。可是有其余办法能够削减毗连数，包含兼并剧本和款式表，利用远程库文件（即便用Google大概Yahoo！供应的库文件托管）。
除HTTP哀求数以外另有良多开辟职员能够存眷的用于提拔网站功能的要素。包含服务器启用Gzip，准确的安排外链剧本，优化CSS语法，紧缩较年夜的JavaScript文件，提拔Ajax功能，制止利用已知的会引发功能成绩的JavaScript语法，等等。

YSlow显现了HTTP哀求数以外能够提拔网站功能的要素
假如开辟职员花点工夫来思索下一切能够提拔网站功能的要素，再衡量下利害，大概就有较好的来由能够制止滥用CSSsprite了，而且会把精神放在那些物有所值的方面。
总结

请不要曲解我所说的。很多顶级的blogger和开辟职员已称赞sprite的优点良多年了，比来几年又把这些定见推行到利用年夜型sprite下去了–因而应当仔细得思索下这些概念。可是，这类有着完美的体系体例和体系，使得网站保护义务简化并流水化的公司，并非一切人都能出来的。年夜多半人都是自力事情，大概承受他人创立的项目。这类情形下，年夜型的sprite会招致得失相当的贫苦。
糖伴西红柿的总结

题目有点夺目:)原题目的礼貌翻译为CSSSprites：有效的手艺仍是潜伏的贫苦？
关于CSSSprite，在Web尺度交换会第二期的时分会商过。实在CSSSprite是很有效处的。可是条件是不要超越一个度的限定。基础上良多成绩终极城市回于怎样过度地利用的成绩。老话说：矫枉过正，实在仍是很有事理的。
关于削减HTTP哀求数成绩，能够稍作让步，把图片分类，只管把内容流动、前期不会有太多变化的图回进一个sprite中，比方一些icon。那些会常常修改的图片回进一类，分红几组sprite。关于计划花梢而性命周期很短的专题来讲，真得，消费在拼图上的工夫和履历其实是有点华侈了。
关于老外的文章，我如今以为有些罗唆了。也许良多人也会有这个感到。实在应当深思下，听说日本有专门的小册子来教人做一些十分基本的器材，内容步骤仔细到怒不可遏得境地。基本的器材年夜多人会嗤之以鼻，以为他人都议论奇技淫巧、初级使用了，我还在弄这些基本，多丢人啊。
基本的器材实在没那末复杂的，有谁能真得把握了这些看上往复杂的基本呢？看一下这个基本成绩你真的懂得HTML吗?
已经有一个妙手送我一本书，他写了”Backtobasic“送我，我在这里送给人人，但愿人人都能脚踏实地地勉力前进。
</p>
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

作者: 若相依 时间: 2015-1-21 09:55
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 飘飘悠悠 时间: 2015-1-30 14:34
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 活着的死人 时间: 2015-2-6 13:26
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 再现理想 时间: 2015-2-16 07:54
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 莫相离 时间: 2015-3-11 22:50
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 小魔女 时间: 2015-3-19 16:02
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 因胸联盟 时间: 2015-3-29 06:53
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

欢迎光临仓酷云 (http://ckuyun.com/)