My Computer · 2011/04/18 42

提高网页加载速度的4个小技巧

如果你的网页内容比较多,可以利用以下4个技巧来提高网页的加载效率。

图片随页面滚动加载

很多大型网站都使用了的方法,比如淘宝、拍拍等等。首先,将图片的路径存储在img标签的一个非src属性中,如存储在rel属性中,此举是避免页面直接加载图片。然后使用JS的监听方法(IE是attachEvent,其他浏览器是addEventListener),监听页面的scroll事件。一旦页面滚动,就会执行一个编写的函数,来判断图片是否处于浏览器的当前一屏内,如果是,将rel属性内的地址赋值给src属性,如果不是,继续监听。当板块内的所有图片都被加载后,取消监听。

轮播广告按需加载

以往轮播广告的加载模式是一次性全部加载,虽然采用延迟加载,但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时,第二张广告图片以后的图片加载就没有必要了。当用户访问网站时第一次加载第一张广告图片,当5秒后,判断第二张图片是否加载过,如果没有,加载第二张图片,以此类推。这样,如果用户在首页停留时长只有14秒,那么就节省了第4、5张广告图片的下载量。

页卡内容按需加载

对于新闻页卡,以往的方式是使用include载入,并将看不到的页卡隐藏掉。但如果用户并没有切换到其他页卡,那么直接加载这些页卡的内容就是不必要的。只加载第一个可见页卡的内容,当用户点击切换页卡时,再加载对应页卡的内容。这样不仅减少了一定的下载量,也减少了一部分浏览器的渲染工作。

IIS\Nginx或Apache启用GZIP压缩

先来了解一下GZIP,gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式。启用gzip会占用一定的系统资源。减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间。以我秀我爱-手工艺者的乐园为例 http://www.ishow-ilove.com ,启用gzip压缩后的效果如下:
压缩类型    gzip
原始文件大小    30412 字节
压缩后文件大小    11252 字节
压缩率(估计值)63%

相关文章