异步加载JS

 

异步加载的方法：

异步加载就相当于是添加了一条线程，与HTML和CSS并行加载，不会阻塞

 

1.defer：

<script type="text/javascript" src="demo.js" defer="defer"></script>

这样这个JS就是异步加载形式的了

但是只能IE来用，其他浏览器不支持

可以引入外部文件

 

2.async：

 <script type="text/javascript" src="demo.js" async="async"></script>

IE9以上都能执行，比较普遍

注意，这个在script标签里面不能写代码

只能引入外部文件

 

3.标准的开发异步加载形式

<script type="text/javascript" >
    var script=document.createElement("script");
    script.type="text/javascript";//设置Type
    script.src="toos.js";//设置src
    document.head.appendChild(script);//异步加载
    script.onload=function(){
        test();
    }
    </script>

我们创建一个script标签，并且引入我们的工具toos.js文件，里面有一个方法：

function test(){
    console.log("a");
}

当我们把它加入到head标签里面的时候就是异步加载，但是我们不能紧接着直接调用test，因为可能还没有加载完这个js文件，所以我们要

script.onload=function(){
        test();
    }

当他加载完以后再执行

这种形式的异步加载除了IE浏览器无法执行，其他都是可以的

那么IE的方法是什么呢：

IE提供了自己的方法：

readyState:这是一个状态码

当我们的readyState变成complete或者是loaded的时候表示加载完成我们才能调用这个函数

当然我们需要一个方法来监听这个状态码是否发生变化：onreadystatechange

var script=document.createElement("script");
script.type="text/javascript";//设置Type
script.src="toos.js";//加载文件
if(script.readyState){
        script.onreadystatechange=function(){
            if(script.readyState=="complete"||script.readyState=="loaded"){
                test();
            }
        }
    }

注意：

但是有一种情况，先说明一下，onreadychange是一个监听变化过程的函数，也就是说必须要有一个变化过程出现才能调用下面的test函数，但是如果因为一些外部条件，让toos.js加载的非常快，在监听之前，readyState就已经变成了completed，事件都还没来得及绑定，那么就触发不了这个函数了，所以我们把加载文件放在绑定事件的后面，先绑定事件：

var script=document.createElement("script");
script.type="text/javascript";//设置Type
if(script.readyState){
        script.onreadystatechange=function(){
            if(script.readyState=="complete"||script.readyState=="loaded"){
                test();
            }
        }
    }
script.src="toos.js";//加载文件

所以我们为了兼容性的问题，我们封装一个函数:

function loadScript(url,callback){//url是文件名，callback是需要调用的函数
    var script=document.createElement("script");
    script.type="text/javascript";//设置Type
    if(script.readyState){
        script.onreadystatechange=function(){
            if(script.readyState=="complete"||script.readyState=="loaded"){
                callback();
            }
        }
    }
    else{
        script.onload=function(){
        test();
        }
    }
    script.src="url";//设置src
    document.head.appendChild(script);
}

 

注意：异步加载JS中不能又doucument.write()方法