cari

Rumah >hujung hadapan web >tutorial js >如何异步加载js？异步加载js的方法介绍

如何异步加载js？异步加载js的方法介绍

青灯夜游
青灯夜游ke hadapan
2019-01-05 10:33:363084semak imbas

如何异步加载js？本篇文章就给大家介绍三种异步加载js的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。【视频教程推荐：JavaScript视频教程】

js加载时间线 ：

它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事，形容的就是加载顺序，可以用来优化什么东西，理论基础，背下来.

1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。（生成document对象，document状态位变为loading） 

2、遇到link外部css，创建线程加载，并继续解析文档。

3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。 

4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

document.write()：特别特殊他是把里面的东西当成HTML文档输出到页面里去，但是有一点就是，有的时候，当你整个文档全部都解析的差不多的时候再用document.write()的话会把你之前所有的文档流都清空，用它里面的文档流代替

例：整个页面只显示a，这里的document.write();在这里有消除文档流的功能，连script都消除了。

<p style="height:100px;width:100px;background-color:red;"></p>
<script type="text/javascript">
    window.onload = function(){
        document.write(&#39;a&#39;);
    }
</script>

5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6、当文档解析完成，document.readyState = 'interactive'。

先解析完，再加载完，然后状态位变为interactive（活跃）

查看状态位的转换：

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用(document.write()）;

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

例1：同时打印出a和complete,而且onDOMContentLoaded是不好使的，只有绑定在addEventListener才好用。

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}
document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;a&#39;);
},false)

例2：window.onload和下面这个的区别

$(document).ready(function(){
    //当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
    /*它的原理就是interactive和DOMContentLoaded事件*/
})

区别就是：window.onload满需要都加载完，但是它解析完就可以操作了（这是jQuery的方法）

例3：当把script放在上面时候最好这样写，不要写onload，千万不要写onload，但是最好的方法还是写在下面

<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <script type="text/javascript">
        document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
            var p = document.getElementsByTagName(&#39;p&#39;)[0];
            console.log(p);
        },false)
    </script>
    script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完

9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。

10、从此，以异步响应方式处理用户输入、网络事件等。
总结就是三个点：先生成document对象，代表js可以运行了，第二步就是文档解析完了，第三步就是文档加载完了并且执行完了 

下面我们看看异步加载js的三种方式:

异步加载js的方法:

1)、async   HTML5的属性,让JavaScript代码进行异步加载

36fa79bca5f3317b9acb41ac36f86b382cacc6d41bbb37262a98f745aa00fbf0

2)defer   老版本IE专用

76cd4913e6ee9a69d0dba4fc797cdc002cacc6d41bbb37262a98f745aa00fbf0

3)动态的创建script的标签(可以解决兼容h5以及低版本ie的问题),代码如下:

8019067d09615e43c7904885b5246f0a
            function asyncLoaded(url,callback){
                var script = document.createElement("script");
//                script.src = url;   假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
                if(script.readyState){
                    script.onreadystatechange = function(){
                        if(script.readyState == "complete" || script.readyState =="loaded"){
//                            执行某个函数
                            callback()
                        }
                    }
                }else{
                    script.onload = function(){
//                        执行某个函数
                        callback()
                    }
                }
                script.src = url;    //异步的过程
                document.head.appendChild(script)    
            }
            asyncLoaded("05.js",function(){
                fn()　　　　　　　　　　//05.js中的函数
            })
        2cacc6d41bbb37262a98f745aa00fbf0

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

Atas ialah kandungan terperinci 如何异步加载js？异步加载js的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript html5 jquery css html 线程 JS 对象 事件 dom 异步
Kenyataan：
Artikel ini dikembalikan pada:cnblogs.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：jsonp如何进行跨域获取数据？（代码示例）Artikel seterusnya：浏览器是如何解析JavaScript的？解析原理介绍

Artikel berkaitan

Lihat lagi