异步加载js

admin

异步加载js
默认情况javascript是同步加载的，也就是javascript的加载时是会阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

(1) defer，只支持IE
        defer属性的定义和用法（我摘自w3school网站）
        defer属性规定是否对脚本执行进行延迟，直到页面加载完成为止。
        有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

        如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
        示例：

1. <script defer="defer">
   
2. alert(document.getElementById("p1").firstChild.nodeValue);
   
3. </script>

复制代码

      补充：defer相当于告诉浏览器立即下载，但延迟执行。脚本会被延迟到整个页面都解析完毕后再运行。(2) async：
        async的定义和用法(是HTML5的属性)
        async 属性规定一旦脚本可用，则会异步执行。
        示例：

1. <script src="demo_async.js" async="async"></script>

复制代码

        注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
        注释：有多种执行外部脚本的方法：
                •如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
                •如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
                •如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

        补充：与defer类似，不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。
                因此，确保脚本间互不依赖非常重要。
                建议异步脚本不要在加载期间修改DOM。

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：

1. function loadScript(url, callback){
   
2.         var script = document.createElement_x("script")
   
3.         script.type = "text/javascript";
   
4.         if (script.readyState){ //IE
   
5.                 script.onreadystatechange = function(){
   
6.                         if (script.readyState == "loaded" || script.readyState == "complete"){
   
7.                                 script.onreadystatechange = null;
   
8.                                 callback();
   
9.                         }
   
10.                 };
    
11.         } else { //Others: Firefox, Safari, Chrome, and Opera
    
12.                 script.onload = function(){
    
13.                         callback();
    
14.                 };
    
15.         }
    
16.         script.src = url;
    
17.         document.body.appendChild(script);
    
18. }

复制代码