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

最新推荐文章于 2023-03-10 19:57:30 发布

hexudong08

最新推荐文章于 2023-03-10 19:57:30 发布

阅读量796

点赞数 1

分类专栏： ruby on rails 开发环境 web优化 rails 调优服务器管理部署文章标签： firefox 测试工具 function image javascript nginx

本文链接：https://blog.csdn.net/hexudong08/article/details/7234806

版权

ruby on rails 同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

rails

13 篇文章 0 订阅

订阅专栏

部署

8 篇文章 0 订阅

订阅专栏

首先，应该有一个好的服务器。这是根本要素。如果在这个基础上谈提升网页的加载速度应该如何做呢？
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

hexudong08

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何提升网页的加载速度？

首先，应该有一个好的服务器。这是根本要素。如果在这个基础上谈提升网页的加载速度应该如何做呢？1，选取一款测试网页加载速度的工具firefox 的插件 page speedhttp://code.google.com/intl/zh-CN/speed/page-speed/2，根据page speed的建议操作，如下是我的一些总结2.1 首先做rails的页面缓存cache
复制链接

扫一扫