动态加载JavaScript文件——高性能JavaScript

在大多是情况下，你需要使用一个单一的方法来加载动态JavaScript文件，下面这函数封装了标准及IE特有的实现方法：

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.getElementsByTagName('head')[0].appendChild(script);
}

这个函数接受两个参数，JavaScript文件的url和完成加载后的回调函数。函数中使用了特征检测来决定在脚本处理过程中监听哪个事件。最后一步是给src属性赋值，然后将<script>元素添加到页面。loadScript()函数用法如下：

//单个文件加载
loadScript('file1.js',function(){
    alert('File is loaded')
})

//多个文件加载  会按顺序加载下去  但这样不好管理文件
loadScript('file1.js',function(){
    loadScript('file2.js',function(){
        alert('All file is loaded')
    })
})

推荐的无阻塞模式

向页面中添加大量JavaScript的推荐做法只需两步：先添加动态加载所需的代码，然后加载初始化页面所需的剩下代码。因为第一部分的代码尽量精简，甚至可能只包含loadScript()函数，它下载执行很快，所以不会对页面有太多影响。一旦初始化代码就位，就用它来加载剩余的JavaScript。例如：

<script type="text/javascript" src='loader.js'></script>
<script type="text/javascript">
    loadScript('the-rest.js',function(){
        Application.init();
    })
</script>

把这段加载代码放到</body>闭合标签之前。这样做的有几个好处：

1. 能确保JavaScript执行过程中不会阻碍页面其他内容的显示
2. 当第二个JavaScript文件完成下载时，应用所需的所有DOM结构已经创建完毕，并做好了交互的准备，从而避免了需要另一个事件来检测页面是否准备好

有多重无阻塞下载JavaScript的方法

• 使用 <script> 标签的defer属性
• 使用动态创建的<script>元素来下载并执行代码
• 使用xhr对象下载JavaScript代码并注入页面中