网站按钮操作图标的一种编程实践

最近在着手一些前端界面的工作，需要一个删除按钮的小图标。一时找不到的情况下，就想去网站上找个现成的。回忆了一下，百度云盘算是一个条目管理类的前端，里面应该有删除的功能图标。于是开始动手。

用firefox 打开百度云盘，按F12打开firebug插件。实际上看到的现象大大出乎我的预料：本来我以为每个功能图标都会是一个单独的小图片资源，直接找到删除图标对应的图片下载下来就OK了。显然事实上并非如此，如下图所示：

从右侧的CSS描述上可以看出。下载、打印、新增、删除、等等这些按钮，其"background"属性全部指向的是同一个图片链接，这部分是在一个通用的CSS配置中完成。指向的图片下载下来是这样：

然后每个按钮再根据自己的图标在大图中的位置，设置专属CSS配置中的“background-position”属性，例如要在按钮上显示删除图标，就需要将背景的坐标设置在"-156px -130px"的位置。

虽然跟想当然的做法不一样。不过稍一思索，不难发现这是一个非常好的编程实践，优点如下：

1、用户体验的考虑

      很显然，这些图标的文件大小都是极小的，也就是几KB的大小，但是在一个页面上，可能有大量的类似图标。如果每个图标都单独存储一个图片文件，就会造成页面加载的时候，同时产生大量并发的图片请求。一来从客户端到服务器请求再到应答是个耗费时间的过程，而来据说浏览器在同一个域名下的并发请求数时是有限的（虽然我不知道这个限值是多少），这就可能造成多个小图标产生串行的请求，延长了整个页面的加载时间，用过户体验不好。相反，如果只加载一个图片文件，虽然单个文件大一些，实际上也不过是几K到几十K的大小（这要得益于图片压缩技术的发展，越大的图像，可供压缩的空间越多）。而且只进行一次请求就可以获得渲染所有按钮的素材，不存在并发请求多个资源的问题。速度明显会快很多。

2、变更和维护方面的考虑

如今网站前端的更新频率越来越快，作为吸引眼球的图标，变化就更加频繁。如果每个按钮使用各自的图片资源，在更新的饿时候，恐怕需要每个链接每个链接的去修改。要实现换肤的功能更是非常困难。而使用一张图片资源的方式就可以很轻松的进行变更。只需要修改一个链接就可以了。用程序控制这个链接的切换也很简单，由此实现换肤功能也是很轻易的事情。

        相信这种做法对于大多数有经验的前端开发这来说，属于理所当然的做法。但是对于新晋者的我来说，还是全新的理念，需要思考一下才能领会。果然是只要有人从事的行业，没有一个简单的。