如何提升网页的加载速度？
首先，应该有一个好的服务器。这是根本要素。如果在这个基础上谈提升网页的加载速度应该如何做呢？
1，选取一款测试网页加载速度的工具
firefox 的插件 page speed
2.3 nginx的gzip压缩
检测工具:http://gzip.zzbaike.com/
Nginx的gzipwiki：http://wiki.nginx.org/NginxChsHttpGzipModule
code
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 可以用
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
2.7 压缩css 和 js 代码
bundle-fu
https://github.com/timcharper/bundle-fu