高性能Javascript：脚本的无阻塞加载策略

Javascript在浏览器中的性能，可以说是前端开发者所要面对的最重要的可用性问题。

在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部 。原因是，事实上，大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务，而同一时间只能有一个任务被执行。Javascript运行了多长时间，那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。　

从基本层面说,这意味着

当浏览器遇到一个

此代码展示了所推荐的

此 URL 调用 2.7.0 版本的 yahoo-min.js 和 event-min.js 文件。这些文件在服务器上是两个分离的文件,但是当服务器收到此 URL 请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个

一个带有defer属性的

如果浏览器不支持defer，那么弹出的对话框的顺序是“defer”，“script”，“load”。

如果浏览器支持defer，那么弹出的对话框的顺序是“script”，“load”，“defer”。

Dynamic Script Elements 动态脚本元素

DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容，一个新的

loadScript("the-rest.js", function(){

　　Application.init();

});

将此代码放置在body的关闭标签之前。这样做的好处是，首先，这样确保Javascript运行不会影响其他页面的其他部分显示。其次，当第二部分Javascript文件完成下载，所有应用程序所必须的DOM已经创建完毕，并做好被访问的准备，避免使用额外的事件处理（如window.onload）来得知页面是否已经准备好了。

另一个选择是直接将loadScript()函数嵌入在页面中，这可以减少一个http请求的开销。例如：

 
 
  
       
    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 { //Others     
     script.onload = function(){    
     　　callback();     
     };    
    }    
    script.src = url;     
    document.getElementsByTagName("head")[0].appendChild(script);    
  }    
     
  loadScript("the-rest.js", function(){    
  　　Application.init();     
  });

一旦页面初始化代码下载完成，还可以使用loadScript()函数加载页面所需的额外功能函数。

介绍一个通用的工具，Yahoo! Search的Ryan Grove创建了LazyLoad库（参见：http://github.com/rgrove/lazyload/ ）。LazyLoad是一个强大的loadScript()函数。LazyLoad精缩之后只有大约1.5KB。用法举例如下：

 
 
  
       
     
   　LazyLoad.js("the-rest.js", function(){     
   　　　Application.init();    
   　});

Summary 总结

将所有

宣威网站建设

高性能Javascript：脚本的无阻塞加载策略