开发者需要做的事情,就是利用CSS中的backgroundposition、background-repeat,background-position的组合,来定义每个小图标在大图上的对应位置,通过大图加精准位置定位切割
使用CSSSprite技术。市面上的浏览器,均有并发HTTP请求数量限制,即会限制一个APP同时发出的HTTP请求数量,在发出的HTTP请求没有被结束的时候,新的HTTP请求不会被开始。因此,每一个请求都是非常。在电商APP中,如果每一个图片,包括零碎的小图标,都占用一个请求去获得,那十分浪费请求。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。
CSSSprite技术,允许开发者将众多零碎的图片,诸如小图标等,通过Photoshop或其他图片工具,切片合并成一个大图(如图3),然后统一通过一个请求,发送到浏览器端。开发者需要做的事情,就是利用CSS中的backgroundposition、background-repeat,background-position的组合,来定义每个小图标在大图上的对应位置,通过大图加精准位置定位切割的方式,去显示出多个小图标。这样,就是通过一个CSS代码,再加上一个合并而成的图片,就代替了同时传送多个小图标的方法。
在电商APP开发中,均存在大量的小图标,如商品分类logo、设置菜单logo等。采用CSSSprite能够大量地减少APP的HTTP请求,降低APP臃肿度。同时可以加快页面加载速度,大大地提高APP的性能。
