一、JS的事件循环机制eventloop
1、 Eventloop是什么?
javascript中先分【同步和异步】,然后事件任务分为【宏任务和微任务】, 执行顺序是先执行微任务再执行宏任务。(异步顺序也是如此)
先执行主线程同步的微任务,发现异步之后,放入到异步队列中
然后执行同步的宏任务,宏任务执行完毕
执行刚才的异步任务。此顺序反复执行loop
宏任务:整体代码script,setTimeout, setInterval
微任务:Promise.then(非new Promise)
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
输出:
主线程同步代码console.log(‘1’)
没有发现微任务,发现 setTimeout异步,加入宏任务Event Queue,第一轮事件循环走完
第二轮事件循环开始,先执行主线程同步代码console.log(‘2’)
new Promise同步执行console.log(‘4’),发现then,加入微任务Event Queue
没有宏任务了
接下来执行微任务执行Promise.then
微任务执行完毕,第二轮事件循环走完,事件循环结束
2、执行栈和队列
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。
二、微任务和宏任务的区别
概念
-
宏任务:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等等)。
-
微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise.then,proness.nextTick等等)。
-
宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。
js执行顺序,(先执行宏任务列,微任务队列),
运行机制
-
在执行栈中执行一个宏任务。
-
执行过程中遇到微任务,将微任务添加到微任务队列中。
-
当前宏任务执行完毕,立即执行微任务队列中的任务。
-
当前微任务队列中的任务执行完毕,检查渲染,GUI线程接管渲染。
-
渲染完毕后,js线程接管,开启下一次事件循环,执行下一次宏任务(事件队列中取)