控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

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

作者:未知 出处:cnblog 2013年05月30日 阅读:

 相对与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文件,以达到无阻赛的加载脚本,可以写一个函数来做这个工作
 
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。
 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统