高性能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请求的开销。例如：

     
 
      
  
  
    1.    
      2.   
  
    2.   function loadScript(url, callback){  
      3.   
  
    3.     var script = document.createElement ("script");  
      4.   
  
    4. 　  script.type = "text/javascript";  
      5.   
  
    5.      
      6.   
  
    6.     if (script.readyState){ //IE script.onreadystatechange = function(){  
      7.   
  
    7.       if (script.readyState == "loaded" || script.readyState == "complete"){  
      8.   
  
    8.         script.onreadystatechange = null;   
      9.   
  
    9.         callback();  
      10.   
  
    10.       }   
      11.   
  
    11.     };  
      12.   
  
    12.   } else { //Others   
      13.   
  
    13.    script.onload = function(){  
      14.   
  
    14.    　　callback();   
      15.   
  
    15.    };  
      16.   
  
    16.   }  
      17.   
  
    17.   script.src = url;   
      18.   
  
    18.   document.getElementsByTagName("head")[0].appendChild(script);  
      19.   
  
    19. }  
      20.   
  
    20.  
      21.   
  
    21. loadScript("the-rest.js", function(){  
      22.   
  
    22. 　　Application.init();   
      23.   
  
    23. });  
      24.   
  
    24.  
      25.

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

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

     
 
      
  
  
    1.    
      2.   
  
    2.  
      3.   
  
    3.  　LazyLoad.js("the-rest.js", function(){   
      4.   
  
    4.  　　　Application.init();  
      5.   
  
    5.  　});   
      6.   
  
    6.  
      7.

    Summary 总结

    • 将所有