JS文件同步异步加载

本文介绍了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也是异步加载。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值