网页优化之加速图片显示(CSS Sprite)
作者:一叶千鸟 来源:蓝色理想 发布时间:2007-09-29 21:39:00
原文:http://blog.rexsong.com/?p=746#comments
加速的关键,不是降低重量,而是减少个数。如果重量在200K以内,只要网络不是特别慢,效率都差不多。但是,如果图片个数多一倍,效率将明显低一个档次。
传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按Byte计算。客户端每显示一张图片都会向服务器发送请求,所以,图片越多请求次数越多,造成延迟的可能性也就越大。因为一张图片的传输时间,通常远小于请求等待的时间。
减少图片的三个技巧(CSS Sprite):
1. 图片限制(Image Slicing)
典型如文本编辑器,小图标特别多,打开时一张张跑出来,给用户的感觉很不好。如果能用一张图解决,则不会有这个问题,比如百度空间、163博客、Gmail都是这么做的。
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
2. 单图转滚(Single-image Rollovers)
触发切换图片的需求,传统方案得重新请求新图片,因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图,就能完美解决,然后再使用背景图技术模拟动态效果。
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. 延长背景(Extend Background Image)
如果图片的某边可以背景平铺无限延长,则不需要每个角、每条边单独搞出来,图片能少一个就少一个。其实,这个理论还可以扩展到四角容器里,好处是能大大简化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/
猜你喜欢
- 对于一个给定的字符串,逆序输出,这个任务对于python来说是一种很简单的操作,毕竟强大的列表和字符串处理的一些列函数足以应付这些问题 了,
- #!/usr/local/python import os import time import string source=['/
- 一、 yaml1、 准备支持的数据类型:字典、列表、字符串、布尔值、整数、浮点数、Null、时间等基本语法规则:大小写敏感使用缩进表示层级关
- 1、算术运算符:+、-、*、/、%。2、递增/递减运算符:如$a++,$a--,++$a,--$a.如:<?php$a=10;$b=5
- Python程序的注释感觉很不合群,对于习惯了使用/**/多行注释的人来说,到Python中只能使用#号进行单行注释很痛苦。# 这里是单行注
- 当用人问你MySQL 查询条件中 in 会不会用到索引,你该怎么回答?答案:可能会用到索引 动手来测试下1.创建一张表,给字段port建立索
- $("select").change(function(){ var n = $(t
- 项目场景:常见的表单填写中都会遇到,比如新增信息,修改信息等,如下图相信大家对上面的验证都非常熟悉了,不多哔哔 本篇文章主要 想写 验证规则
- 本文实例讲述了Python数据类型之String字符串。分享给大家供大家参考,具体如下:String(字符串)1、概述字符串是以单引号或双引
- 所谓的CSV(逗号分隔值)格式是电子表格和数据库最常用的导入和导出格式。尝试使用CSV格式进行标准化描述之前已经使用了很多年。该csv模块r
- 前言SQL模式影响MySQL支持的SQL语法和执行的数据验证检查。MySQL服务器可以在不同的SQL模式下运行,并且可以针对不同的客户端以不
- 出差到了中国雅虎,这里的风格和淘宝很不一样。和雅虎一比,淘宝的办公环境就是个菜市场,闹哄哄,到处是人,在走道里狂奔乱窜,在每个会议室争得面红
- 本文实例讲述了Python实现读取并保存文件的类。分享给大家供大家参考,具体如下:这个类写在一个叫class_format.py 的文件里,
- 这个是今年年初写的一篇,拿出来温习下。指针让程序结构变得混乱,也让程序执行效率提高,因此在oo的语言中不提倡指针的使用,使得程序结构清晰易读
- 最近在学习关于Python数据分析与挖掘方面的知识,在学习到Python数据分析工具方面时,需要安装一些第三方扩展库来增强Python的数据
- 不同于以往为大家介绍的函数使用,我们利用pivot函数可以实现的方式,就是用来重塑数据使用的,在python的使用上并不常见,但是如果需要利
- k近邻算法的介绍k近邻算法是一种基本的分类和回归方法,这里只实现分类的k近邻算法。k近邻算法的输入为实例的特征向量,对应特征空间的点;输出为
- var a = 0, b = 0;[0, 0].sort(function() {a = 1;return 0;});[0, 1].sort
- 本文实例讲述了python中__slots__的用法。分享给大家供大家参考。具体分析如下:定义__slots__ 后,可以再实例上分配的属性
- 01 创建不可见列创建不可见列:CREATE TABLE `t2` ( `id`&nbs