理解JS异步加载：async与defer的运用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45311602/article/details/115263446

本文探讨了JavaScript异步加载的方式，包括JS加载时间线的理解，详细阐述了遇到link、script、img等元素时浏览器的处理顺序。重点介绍了async和defer属性在异步加载中的作用，以及如何通过动态创建script标签实现兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天又在JS异步加载的方式上出错了，所以又来复习一下JS异步加载

想要更加深刻的了解异步加载，我就得更深入了解JS加载的时间线，
所以我整理了一下我对JS时间线的理解。
首先，JS的时间线是在JS出生的那一刻开始记录所有浏览器按照顺序做的事，就是加载的顺序，可以用来优化什么。

创建document对象，开始解析web页面
遇到link外部css，创建线程加载，并继续解析文档
遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
当文档解析完成，document.readyState = ‘interactive’。先解析完，再加载完，然后状态位变为interactive
文档解析完成后，所有设置有defer的脚本会按照顺序执行。
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
例：同时打印出a和complete,而且onDOMContentLoaded是不好使的，只有绑定在addEventListener才好用。

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

当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState =
‘complete’，window对象触发load事件。
从此，以异步响应方式处理用户输入、网络事件等。
总结就是三个点：先生成document对象，代表js可以运行了，第二步就是文档解析完了，第三步就是文档加载完了并且执行完了

然后在来看异步加载的方式

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

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

2)defer 老版本IE专用

<script type="text/javascript" defer="defer">
</script>

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

       <script type="text/javascript">
            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中的函数
            })
        </script>