文章目录
一、什么是事件循环机制?
//语句一
console.log(1);
//语句二
setTimeout(()=>{
console.log(2);
},1000);
//语句三
console.log(3);
执行结果为1,3,2
原因是JS引擎指向代码是从上往下执行的,首先会执行语句一
。
-
JS引擎会将
语句一
放在调用栈当中,然后执行代码,在控制台输出1,当语句一
执行完毕后,便将其从调用栈中移出去。 -
接着
语句二
进入调用栈,语句二
会调用Web API,1秒后进入回调队列,此时JS引擎将语句二
移出调用栈,继续执行后面的代码。所以控制台输出了3。 -
此时进入事件循环(
EventLoop
),他会不断循环的访问回调队列,等待1秒后Web API会将要执行的语句二
放入回调队列;事件循环(EventLoop
)将回调队列中的内容放入调用栈,开始执行,然后在控制台输出2。
JS的运行机制就是事件循环。
二、JS的执行顺序
- JS代码是从上到下一行一行执行的
- 如果某一行报错,则停止执行下面的代码
- 先执行同步代码,再执行异步代码
三、事件循环的执行过程
-
同步代码:调用栈执行后直接出栈
-
异步代码:放到Web API中,等待合适的时机放入回调队列,等到栈空时事件循环(
EventLoop
)开始工作,进行轮询。 -
微任务比宏任务执行时机要早
// 语句一
console.log(1);
// 语句二
setTimeout(()=>{
console.log(2);
},0);
//语句三
Promise.resolve().then(()=>{
console.log(3);
})
// 语句四
console.log(4);
//1,4,3,2 -
微任务在DOM渲染前触发,宏任务在DOM渲染后触发
四、微任务和宏任务的根本区别
**宏任务:**由浏览器规定的
- setTimeout
- setInterval
- Ajax
- DOM事件
**微任务:**由ES6语法规定的
- Promise
- async
- await
五、事件循环的整体过程
- 先清空调用栈(
call stack
)中的同步代码 - 执行微任务队列中的微任务
- 尝试DOM渲染
- 触发事件循环(
Event Loop
)反复询问回调队列中是否有要执行的语句,有则放入调用栈继续执行。
目前的理解:
JS是单线程的,浏览器在执行JS代码时先执行同步代码,再执行异步代码。
同步代码:调用栈执行后直接出栈
异步代码:放到Web API中,等待合适的时机放入回调队列,等到栈空时 事件循环(EventLoop
)开始工作,进行轮询。
主要过程是:
先清空调用栈(call stack
)中的同步代码,执行微任务队列中的微任务,尝试DOM渲染,触发事件循环(Event Loop
)反复询问回调队列中是否有要执行的语句,有则放入调用栈继续执行。
最后
深知大多数初中级Java工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则近万的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《Java开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
小编已加密:aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因,我们把网站通过base64编码了,大家可以通过base64解码把网址获取下来。