高性能JavaScript:加载和执行


  本文标签:JS JavaScript 浏览器

         在步入正题之前为大家介绍一本很好的书《高性能JavaScript》大家不妨看一下,在本文中我为大家分享我看这本书的一些收获  。

推荐的书

  阻塞特性
       JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的  。

  脚本位置:
       浏览器在碰到一个引入外部JS 文件的  

  • "text/javascript" src="file2.js">  
  • "text/javascript" src="file3.js">  
  •  
  •  
  •   组织脚本:
           为了改善上面的阻塞情况,应尽可能的减少页面中    

  •     
  •  
  •   无阻塞的脚本:
    为了阻塞状况,这里提供了几个实现并行下载JS 脚本的方案  。

      1. 延迟的脚本

      HTML4 为 

      2. 动态脚本元素
           这是最通用的解决方案,通过DOM 动态地创建    

  • "text/javascript">  
  • load_script(file1.jsfunction()  
  •  {     
  •    load_script(file2.jsfunction()  
  •      {        
  •       load_script(file3.js, functio()  {                   
  • //全部载入后的操作...           
  •          } );  
  •       } );  
  •   } );  
  •   
  •   3.XMLHttpRequest 脚本注入

      即通过AJAX 方式加载,不过这种方式无法实现跨域加载,不适用于大型网站  。

      推荐的无阻塞模式
           我们上面做的这些工作当然也已经被那些牛人们完成了,并写成了一些优秀的JS 类库以便我们使用,它们均能很好地解决JS 脚本的阻塞问题,实现并行下载,例如: YUI3、LazyLoad、LABjs 等  。