用CSS/JS技巧优化HTML页面加载速度

如果一个网页中有很多小图片，例如评论时的表情，投票时的“星级”，这些小图片确实很小，但是每张小图片显示一次都要往返一次HTTP服务器，每次往返都需要发送请求、接受请求。如果图片小而且多，会严重影响页面呈现的速度。如果我们把这些小的图片合成一个大的图片，那么浏览器只要发送一次请求，就可以把所有这些“小图片”下载到本地。然后使用CSS显示这些小图片。下面看代码：

原始图片：

显示小红旗代码：

<div style="width:16px;height:16px;background-image: url(http://img.baidu.com/img/iknow/icons.gif);background-position:0 -32px;"></div>

效果：

显示星星的代码：

<div style="width:16px;height:16px;background-image: url(http://img.baidu.com/img/iknow/icons.gif);background-position:0 -112px;"></div>

效果：

因为每个小图片的长宽分别是16px，所以显示第一个图片坐标就是0 0，第二个图片的坐标是：0 -16px，第三个图片的坐标是0 -32px，以此类推……

从JS角度优化页面加载速度，主要是从JS会缓存到浏览器，所以我们把页面公共部分做成JS文件调用。然后每个页面再调用这个JS，这里还有另一个主要因素：如果您的带宽有限，比如流量达到了15万，而你使用的是100M共享带宽。这时带宽已经跑满了，你需要想办法给网页减肥，让页面更小，这样就可以减少带宽占用，缓解带宽的危机。