WEB前端

实现动态加载JS文件达到加快网站找开速度

位置:首页 > WEB前端 > js教程,2013-07-27
怎么实现动态加载JS文件达到加快网站找开速度呢,看下面的方式相对与HTML,CSS,javascript是最影响浏览器性能的,因为浏览器在遇到<script>标签时,必须等待js代码下载和...

怎么实现动态加载JS文件达到加快网站找开速度呢,看下面的方式

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


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


  2、将多个js文件合并到一个url中加载,以减少http请求。


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


function loadScript(url,callback){
      var script=document.createElement("script");
      script.type="text/javascript";
      if(script.readyState){
           //ie 浏览器
           script.onreadystatechange=function(){
                if(script.readyState=="loaded" ||        script.readyState=="complete"){
                     script.onreadystatechange=null;
                     callback();
                }    
           }
      }else{
           script.onload=function(){
                callback();
           }
      }      
      script.src=url;
      document.getElementByTagName("head")[0].appendChild(script);
 }
以上这种方式是一种跨浏览器的非常易用的方法,也可以通过XMLHttpRequest脚本注入的方式,但此方式有跨域的限制,所以推荐上面的方式。


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


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


    使用方法


<script type="text/javascript" src="lazyload-min.js"></script>
 <script type="text/javascript">
      LazyLoad.js("test.js",function(){
         Application.init();
     })
 </script>
同时加载多个文件


<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>
  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>


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

TAGS:加快网站找开速度动态加载JS

猜你喜欢

NewHot