相信大家和我一样之前都没听过sprites这个东西吧,我也是在一次面试题中遇到,这个问题经常会出现在企业面试题中。
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需 顾忌这个问题。
加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求,所以,图片越多请求次数越多,造成延迟的可能性也就越大。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点
在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具(以后用到的时候要记得),虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!
CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。
CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。
有几篇关于CSS Sprites的文章,基本上把其原理和机制说明得很清楚。
What Are CSS Sprites?
How to create CSS sprites
Creating Rollover Effects with CSS Sprites
Building a Dynamic Banner with CSS Sprites
High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites
1. 图片限制(Image Slicing)[1]
典型如文本编辑器,小图标特别多,打开时一张张跑出来,给用户的感觉很不好。如果能用一张图解决,则不会有这个问题,比如百度空间、163博客、Gmail都是这么做的。
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
2. 单图转滚(Single-image Rollovers)[1]
触发切换图片的需求,传统方案得重新请求新图片,因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图,就能完美解决,然后再使用背景图技术模拟动态效果。
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. 延长背景(Extend Background Image)[1]
如果图片的某边可以背景平铺无限延长,则不需要每个角、每条边单独搞出来,图片能少一个就少一个。其实,这个理论还可以扩展到四角容器里,好处是能大大简化HTML Structure。
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
综合案例
Google Korea(1和2技巧)
http://demo.rexsong.com/200705/google_korea/
CSS Menus(2和3技巧)
http://demo.rexsong.com/200705/css_background_menus/
由于IE6存在的background的flicker问题IE6/Win, background image on , cache=‘check every visit’: flicker!,有人针对此问题提出了解决方案Fast Rollovers Without Preload
关于IE6的flicker问题,fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6
另外:brunildo.org的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。
图片优化
补两条
10. 有的说定位时避免使用bottom或right等,当使用CSS sprite的时候,只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的,但是问题是,当你在宽度上或高度上扩展相关sprite图片的时候,原先设置的位置可能是错的,因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。
其实我感觉一般情况宽度图不片不会改应变,用RIGHT和 LEFT还是挺方便的,但从整体考虑,升级了。改版的。图片宽度还是有可能会改变的。必竟开始时做太宽也没什么好处,还是浪费很多空间。就是多费点时间去对坐标,最好还是不用RIGHT 和 LEIFT的了。
12 有的说竟给每个图片足够的空间
就像你在本文顶部的实例图片看到的那样,那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距,以至于其它图片不会意外出现。
文章浏览阅读1.2k次。如下图设置,File Setting中:或者在我们导入项目时,idea右下角界面会弹出提示框,询问我们是否要自动导入,选择Enable Auto-imort即可,如下图。但是这里选择仅仅是针对当前项目自动导入,所以还是乖乖在file setting中设置自动导入最为保险。_maven颜色
文章浏览阅读1.4w次,点赞6次,收藏37次。详细解释 @JsonProperty、@JsonFormat 和 @DateTimeFormat 注解的用法_@jsonproperty
文章浏览阅读326次。Linux使用docker搭建Mysql主从复制_linux 实现docker的mysql主从复制
文章浏览阅读870次。error C3872: ‘0x3000’: this character is not allowed in an identifier写的serialdll.cpp文件中报错如下,一大堆错误,但是反复查看了那几行代码,甚至重新写了一遍,还是报错。在网上帖子说可能是代码中有中文的全角空格,导致报错。但使用Ctrl + H查找当前的cpp文件,完全没有找到中文全角空格;继续排查原因,发现..._character not allowed in an identifier
文章浏览阅读46次。一般的android连接mac 很方便不用安装驱动就可以啦,可是不知道为什么特殊情况下有的android手机(小米2,华为等)就是连接不上,下来就说说特殊情况下如何连接。使用USB连接安卓手机后可以做2件事情:1.关于本机-->更多信息->概系统览->系统报告->usb->你所连接的device-->供应商ID(Vendor ID)2..打开终端,输..._macpro adb连接mix4
文章浏览阅读671次。What do you think, how many operations can be done on one eye? A clinical case of one of my patients confirms that more than 20 operations of various kinds are not the limit. Although, no doubt, thi..._更年期 眼压高
文章浏览阅读6k次,点赞11次,收藏122次。2015年U-Net的出现使得原先需要数千个带注释的数据才能进行训练的深度学习神经网络大大减少了训练所需要的数据量,并且其针对神经网络在图像分割上的应用开创了先河。当时神经网络在图像分类任务上已经有了较好的成果,但在很多视觉的任务中由于输出需要进行定位,也就是每个像素需要分配一个类标签,这导致成千上万的训练图像在生物医学任务中通常难以获得,从而急需要一个神经网络,它不需要那么多的数据来进行训练却依旧有较好的效果,这就导致了U-Net的诞生。U-Net几乎是当前segmentation项目中应用最广的模型。_医学图像分割
文章浏览阅读2.5w次,点赞22次,收藏202次。最近项目需求,要实现一个rtsp视频流,经过一番了解之后,最后选择两种方式进行测试对比,一个是基于ffmpeg编码实现rtsp拉流,另外一个则是基于VLC开源的qt第三方库,实在github上搜索到的 key: qt vlc。首先粗略讲下ffmpeg编码怎么实现rtsp拉流呢?没有接触之前,感觉很高深的样子,其实并不然,ffmpeg内部基本都帮你实现了,类似打开摄像头一样的流程,使用avfor..._qt rtsp拉流
文章浏览阅读10w+次,点赞2次,收藏11次。人工智能,零基础入门!http://www.captainbed.net/inner一、windows系统下运行cmd命令,直接打开cmd窗口输入对应命令执行就可以了,步骤:【1】输入快捷键:windows + R,如何输入cmd,按回车【2】然后会进入cmd命令的窗口界面:【3】执行一些cmd命令,看效果如下显示:二、但是在Java程序中如何执行本地windo...
文章浏览阅读403次,点赞6次,收藏7次。ALAPI:是一个免费的API接口平台,里面集成了上百个免费API接口WPUSH: 一个聚合消息推送平台,可以推送微信、短信、邮件、飞书、钉钉等消息Github Actions: 自动化CI工具,可以用这个实现自动化构建、定时任务等。_每日60s
文章浏览阅读139次。(2)单击主界面“卧铺售票分析”的选项卡,然后输入需要查询的“出发地”与“目的地”,然后单击“查询”按钮将显示如图3所示的卧铺售票分析数据。(1)在主界面“车票查询”选项卡中依次输入,出发地、目的地以及出发时间,然后单击“查询”按钮,将显示如图2所示的车票信息。(3)单击主界面“车票起售时间”的选项卡,然后输入起售车站,再单击“查询”按钮将显示如图4所示的车票起售时间。在PyCharm中运行《火车票分析助手》即可进入如图1所示的系统主界面。图2 车票查询区域的数据显示。图4 显示查询车票起售时间。_基于python的火车票助手分析的总体结构设计图
文章浏览阅读5.3k次,点赞8次,收藏22次。Nginx reload重启报错: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)_nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: no such f