JavaScript文件同步与异步加载解析-优快云博客

本文链接：https://blog.youkuaiyun.com/HelloWorld1626/article/details/105641170

本文介绍了JavaScript中的同步和异步加载机制。主线程是单线程，同步任务按顺序执行，异步任务放入任务队列。同步加载会阻塞后续文件加载，async异步加载不阻塞，可能在不同时间点执行，defer则确保在DOM解析完成后执行。load、error、setTimeout、setInterval及Promise均为异步加载。示例中，输出顺序为7、abc、time。

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

加载js文件

单线程：在JS引擎中负责解释和执行JavaScript代码的线程只有一个，一般称它为主线程。但是实际上还存在其他的线程，可以称之为工作线程。
同步：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。如果在函数A返回的时候，调用者还不能马上得到预期的结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。

<script src="./js/a.js"></script>
<script src="./js/b.js"></script>

同步加载，如果直接加载js文件，首先加载第一文件，并且执行这个js所有代码，完成后再加载b.js，然后再执行b中的代码；这是同步，在Dom树和CSS树生成前加载；

<script src="./js/a.js" async></script>
<script src="./js/b.js" async></script>

async异步加载，页面加载过程是先生成Dom树，再生成CSS树，然后将其合在一起生成渲染Dom树，之后再加载图片声音等；
异步加载可能在渲染完成时时加载，也可能在图片完成时加载，它不确定。
defer最后加载，它一定是在图片等加载完之后才执行的。
假如两个文件是这样的：

//a.js
var a=3;
var b=4;
console.log(a+b);
function abc(){
    console.log("abc");
}
setTimeout(function(){	//异步加载
    console.log("time");
},10000);

//b.js
var obj={
    a:1,
    b:function(){
        abc();
    }
}
obj.b();

那么结果的输出顺序是：7 abc time。
事件load、error与setTimeOut、setInterval都是异步加载；Promise也是异步加载。

JS文件同步异步加载

加载js文件