如何提升网页的加载速度？

来源：互联网发布：java大转盘抽奖算法编辑：程序博客网时间：2024/05/16 12:03

首先，应该有一个好的服务器。这是根本要素。如果在这个基础上谈提升网页的加载速度应该如何做呢？
1，选取一款测试网页加载速度的工具
firefox 的插件 page speed

http://code.google.com/intl/zh-CN/speed/page-speed/

2，根据page speed的建议操作，如下是我的一些总结
2.1 首先做rails的页面缓存
caches_page :index

2.2 使用浏览器缓存
nginx设置是

       location ~ .*\.(gif|jpg|jpeg|png|bmp)$       {               expires 30d;       }       location ~ .*\.(js|css)?$       {               expires 1h;       }

2.3 nginx的gzip压缩
检测工具:http://gzip.zzbaike.com/
Nginx的gzipwiki：http://wiki.nginx.org/NginxChsHttpGzipModule
code

   gzip  on;   gzip_min_length  1000;   gzip_buffers     4 8k;   gzip_types       text/plain application/x-javascript text/css  application/xml;

2.4 大图的延时加载
参考方法：http://www.cnblogs.com/xingzhi/archive/2011/06/01/2067272.html
先将图片的src值放到一个叫做_src的值里，但运行到该图片区域的时候，将_src赋值src
可以先使用2.5的技术，预加载图片

2.5 图片的预加载技术
先使用Image对象，将图像loader加入内存，等到需要使用的时候，浏览器会从内存中去寻找。具体方法如下
    function preloader(){
       var i = 0;
       var imageObj = new Image();
       var images = new Array();
       images[0] = "/images/01.png";
       images[1] = "/images/02.png";
       images[2] = "/images/03.png";
       images[3] = "/images/04.png";
       for(i=0; i <= 3; i++){
              imageObj.src=images[i];
       }
   }
然后load
<body onLoad="javascript:preloader()">
或者
$(window).ready(function(){
});
如何判断图片已经加载完成？
同时使用两个属性
img = new Image();
if(img.complete){
do...
}
img.onload = function(){
do...
}

2.6 web网站限速测试工具
Fiddler 限速测试工具
http://www.fiddler2.com   (现在好像已经不能下载了)

另外：
用3.6 版本的 firefox throttle 可以用

用3.6 版本的 firefox throttle 可以用

2.7 压缩css 和 js 代码
bundle-fu
https://github.com/timcharper/bundle-fu