晨风

之前pjblog的日志也懒得全部转过来，仅挑了几个最近的，所有日志保存了一个RSS文件留作纪念: cenfun.com.blog.feed.xml

所有用户数据、评论、留言等也都不要了，需要友情链接的朋友请重新申请，谢谢!

也就是利用CSS Sprites 图片整合技术，将网站所需的icon都放到一张图里面

优点：减小图片下载体积，减少对服务器的请求，从而提高了页面的加载速度

但怎么用才简单方便，就个人经验而言，一般是这样做的：
1，建一个名为icon_map的图，大小为宽高320px，因为一般icon为16×16大小，这样横竖可以放20个，完全够用了。并在ps中用辅助线划分好，直接往里填图标即可
2，格式采用gif，支持透明，因为icon一般可用像素图完成，且适用范围可覆盖所有浏览器，包括IE6的透明
3，书写css样式：
/* icons */
.icon { display:-moz-inline-box; -moz-box-align:center; }
.icon { display:inline-block; width:16px; height:16px; background-image: url(../images/icon_map.gif); vertical-align:middle; }
.icon_1_01 { background-position: 0 0; }
.icon_1_02 { background-position: -16px 0; }
.icon_1_03 { background-position: -32px 0; }
.icon_1_04 { background-position: -48px 0; }
.icon_1_05 { background-position: -64px 0; }
.icon_1_06 { background-position: -80px 0; }
.icon_1_07 { background-position: -96px 0; }
.icon_1_08 { background-position: -112px 0; }
.icon_1_09 { background-position: -128px 0; }
.icon_1_10 { background-position: -144px 0; }
.icon_1_11 { background-position: -160px 0; }
.icon_1_12 { background-position: -176px 0; }
.icon_1_13 { background-position: -192px 0; }
.icon_1_14 { background-position: -208px 0; }
.icon_1_15 { background-position: -224px 0; }
.icon_1_16 { background-position: -240px 0; }
.icon_1_17 { background-position: -256px 0; }
.icon_1_18 { background-position: -272px 0; }
.icon_1_19 { background-position: -288px 0; }
.icon_1_20 { background-position: -304px 0; }
/* icon line 2 */
.icon_2_01 { background-position: 0 -16px; }
.icon_2_02 { background-position: -16px -16px; }
.icon_2_03 { background-position: -32px -16px; }
.icon_2_04 { background-position: -48px -16px; }
.icon_2_05 { background-position: -64px -16px; }
.icon_2_06 { background-position: -80px -16px; }
.icon_2_07 { background-position: -96px -16px; }
.icon_2_08 { background-position: -112px -16px; }
.icon_2_09 { background-position: -128px -16px; }
.icon_2_10 { background-position: -144px -16px; }
.icon_2_11 { background-position: -160px -16px; }
.icon_2_12 { background-position: -176px -16px; }
.icon_2_13 { background-position: -192px -16px; }
.icon_2_14 { background-position: -208px -16px; }
.icon_2_15 { background-position: -224px -16px; }
.icon_2_16 { background-position: -240px -16px; }
.icon_2_17 { background-position: -256px -16px; }
.icon_2_18 { background-position: -272px -16px; }
.icon_2_19 { background-position: -288px -16px; }
.icon_2_20 { background-position: -304px -16px; }

这里只写了前2排，后面依次类推，用到时再补充
a，inline-block是方便直接与文字同行，并用-moz-兼容FF2
b，用数字表示横纵的位置，这样要用icon_map中的第几个，可以方便调用：
如要用第1排第5个图标，则css调用为：

<span class=”icon icon_1_05″></span>

第2排第20个则为

<span class=”icon icon_2_20″></span>

当然你还可以用具体的名字，而不用几排几个，毕竟是魔鬼数字，不好辨认
其实不仅仅是图标，其他图片都可以做相应的整合，修改下大小和位置即可

经常用gmail，有时明显感觉到它的点击响应速度比一般的快！
的确gmail是比很多邮箱速度快，这里我特别对鼠标点击响应速度进行了测试，发现它有一个极其细小的提速体验
那就是在部分地方用onmousedown代替onclick来完成响应

onclick事件是在同一对象上按下并释放鼠标时发生
onmousedown事件在对象上按下鼠标就发生

区分它们的简单办法就是，在鼠标按下后不释放，或者按下后移动到对象外释放，这样都不会触发onclick，而只要按下就响应了，那就是onmousedown。(在gmail用了很多调试工具，都没找到具体代码证实，只有这个办法，还望能高手补充证实)

onclick

所以onmousedown的响应速度比onclick快，但不是说就要取代，具体情况具体分析，上面也是说部分用
如，gmail中的分页功能，就是前一页，后一页的按钮都是onmousedown，还有打开垃圾邮件标题也是onmousedown
但，gmail左边的菜单，就是撰写邮件，收件箱等还是用onclick
除了gmail，还看过其他邮箱如qq，163，hotmail等都是onclick(a链接也相当于onclick)
当然一般情况下这种小速度几乎可以忽略不计，同时也非常钦佩gmail的工程师。

猜想一下什么情况用或者不能用onmousedown代替onclick提高响应速度呢？
1，删除操作肯定不能用，不然一不小心删错了后悔都来不及
2，关闭功能一般不用，很多时候都是都按下关闭按钮了，但此时突然又不想关闭，把鼠标移开释放即可
3，无关紧要可返回的，一般可以用，如分页，点错了再点回来就是
大家补充