网站建设

使用CSS Sprite技术。市面上的浏览器, 均有并发HTTP请求数量限制, 即会限制一个网站同时发出的HTTP请求数量, 在发出的HTTP请求没有被结束的时候, 新的HTTP请求不会被开始。因此, 每一个请求都是非常资源。在电商网站中, 如果每一个图片, 包括零碎的小图标, 都占用一个请求去获得, 那十分浪费请求资源。客户端每显示一张图片都会向服务器发送请求。所以, 图片越多请求次数越多, 造成延迟的可能性也就越大。

CSS Sprite技术, 允许开发者将众多零碎的图片, 诸如小图标等, 通过Photoshop或其他图片工具, 切片合并成一个大图 (如图3) , 然后统一通过一个请求, 发送到浏览器端。开发者需要做的事情, 就是利用CSS中的backgroundposition、background-repeat, background-position的组合, 来定义每个小图标在大图上的对应位置, 通过大图加精准位置定位切割的方式, 去显示出多个小图标。这样, 就是通过一个CSS代码, 再加上一个合并而成的图片, 就代替了同时传送多个小图标的方法。

在电商网站建设中, 均存在大量的小图标, 如商品分类logo、设置菜单logo等。采用CSS Sprite能够大量地减少网页的HTTP请求, 降低网站臃肿度。同时可以加快页面加载速度, 大大地提高网站的性能。