代码改变世界

动态加载JS文件提升访问网站速度

2013-05-29 22:28  那时me年少  阅读(3399)  评论(4)  编辑  收藏  举报

　　相对与HTML,CSS，javascript是最影响浏览器性能的，因为浏览器在遇到<script>标签时，必须等待js代码下载和执行完毕后再执行后面的内容，因此当页面中js文件过多时，网站访问速度明显下降。然而，现在的web应用用到js只会越来越多，那么我们如何有效组织js代码来提高网站的性能呢？通过相关资料，我总结了以下需要注意的几点。

　　1、将script标签置于网页底部，一般置于<body/>标签之前。这样用户不必等待js加载并执行完成后就可以完整的浏览整个网页。

　　2、将多个js文件合并到一个url中加载，以减少http请求。对于此点，可阅读 http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/

　　3、通过js动态创建<script>标签动态加载js文件，以达到无阻赛的加载脚本，可以写一个函数来做这个工作

 1 function loadScript(url,callback){
 2      var script=document.createElement("script");
 3      script.type="text/javascript";
 4      if(script.readyState){
 5           //ie 浏览器
 6           script.onreadystatechange=function(){
 7                if(script.readyState=="loaded" ||        script.readyState=="complete"){
 8                     script.onreadystatechange=null;
 9                     callback();
10                }    
11           }
12      }else{
13           script.onload=function(){
14                callback();
15           }
16      }      
17      script.src=url;
18      document.getElementByTagName("head")[0].appendChild(script);
19 }

以上这种方式是一种跨浏览器的非常易用的方法，也可以通过XMLHttpRequest脚本注入的方式，但此方式有跨域的限制，所以推荐上面的方式。

互联网上有很多这样的js库，供我们下载使用：

    Lazyload类库，下载地址：http://github.com/rgrove/lazyload/

    使用方法

1 <script type="text/javascript" src="lazyload-min.js"></script>
2 <script type="text/javascript">
3      LazyLoad.js("test.js",function(){
4         Application.init();
5     })
6 </script>
View Code

同时加载多个文件

<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
     LazyLoad.js(["test1.js","test2.js","test3.js"],function(){
        Application.init();
    })
</script>
View Code

    LABjs类库下载地址：http://labjs.com

    使用方法

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
    $LAB.script("test.js").wait(function(){
         Application.init();
    });
</script>
//加载多个
<script type="text/javascript">
    $LAB.script("test1.js").script("test2.js").wait(function(){
         Application.init();
    });
</script>

LAB的好处是可以灵活的处理是否加载。

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
    $LAB.script("test1.js").script("test2.js").wait().script("test3.js").wait(function(){
    Application.init();
});
</script>
View Code

这样就可以让test1.js和test2.js加载执行完成后再加载执行test3.js。