您的位置：首页 > 其它

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

2012-02-06 11:48 344 查看
首先，应该有一个好的服务器。这是根本要素。如果在这个基础上谈提升网页的加载速度应该如何做呢？

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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航