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

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

     利用CSS的background-position 属性轻松设置；

 

 

定义

background-position 属性设置背景图像的起始位置。

继承性：No

说明

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

 

示例：

<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共享带宽。这时带宽已经跑满了，你需要想办法给网页减肥，让页面更小，这样就可以减少带宽占用，缓解带宽的危机。

 

 

参考：http://www.svnhost.cn/Article/Detail-234.shtml