声明：1、本文只对非常大型的网站里一个小点的优化建议，普通网站不会用到；2、本文里写的js代码很烂，没有考虑性能，仅作为demo测试而已。
大型网站的首页加载速度是每个公司都非常重视的，而且还会列举各大同行的网站首页加载速度数据，来进一步提升自己网站的指标。网站加速无非那几点：服务器端的CDN、Gzip，后台的缓存、静态化，前端的CSS、js合并、减少http请求、DOM优化、懒加载等（随便列举）。本文讲的另外一个，背景图片的优化建议。
DOM懒加载
说到CSS Sprites，做前端的都知道，这个可以提升网站加载速度，减少http请求。但如果配合DOM懒加载，其实CSS Sprites还可以进一步优化！请看DEMO1。
如果你使用的是火狐浏览器，打开Firebug，选到“网络–图片”那里，是看不到有图片加载的，也没有http请求。拉动滚动条，到第五个box，这个时候狗狗的背景图才出现，才加载这个http请求。这个背景图片的div，我是通过DOM懒加载出来的。其实CSS里有这样一个定论：如有没用到的CSS，是不会加载里面属性的，里面如果有背景图片的话，一样不会加载背景图片。所以你常常看到那些hover换背景图片的时候第二个图片会一闪，就是因为hover后才触发加载那一句:hover的CSS，那图片才慢慢加载。
结论：对于首页需要DOM懒加载来提速的，建议把Sprites图分开来拼。首屏直接加载出来的背景图片拼到一起，后面加载出来的通栏背景图片拼到一起，最后加载出来的底部背景图片拼到一起。而不是把首页所有背景图片都拼到一张图里。
图片懒加载
不知道有几个人会用到Image Sprites这个小众技巧，其实也很简单，就是利用负边距来实现的。请看DEMO2。
因为我图片上默认加了个Loading图片，所以网页打开后只有一个图片http请求。一直把滚动条拉到第五个box，才请求狗狗的背景图。一般人做这种小图标，肯定会选择用CSS Sprites背景图片。其实尝试用Image Sprites也是个不错的选择，因为可以把他当作img标签来做图片懒加载，而背景图片是没办法图片懒加载的。
结论：如果你的网站结构不是很复杂，但图片多，会使用到图片懒加载的话，可以尝试下Image Sprites，这个比CSS Sprites更节省性能。
如果你们公司的网页加载速度标准很苛刻，做完基础的加速措施后，不妨也尝试下以上两点小优化。