简述事件循环(event loop)、宏任务、微任务
首先明白以下几点:
JS为什么是单线程的?
js作为主要运行在浏览器的脚本语言,js主要用途之一是操作DOM。假如有两个线程,多线程的JS对同一个dom操作,一个发出删除,一个发出编辑,这时候浏览器究竟该如何执行呢?
JS为什么需要异步?
如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验
JS单线程又是如何实现异步的呢?
既然JS是单线程的,只能在一条线程上执行,又是如何实现的异步呢? 是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制
浏览器的多线程
- GUI 渲染线程 (负责渲染浏览器界面HTML元素)
- JavaScript引擎线程(主要负责处理Javascript脚本程序,例如V8引擎,GUI渲染线程和JavaScript引擎线程互斥!)
- 事件触发线程(如鼠标点击、AJAX异步请求等)
- 定时触发器线程( setTimeout, setInterval )
- 异步http请求线程
- 事件轮询处理线程 ( 作用:轮询消息队列,event loop )
说到浏览器的多线程,我们可以说一下,主线程和异步线程之间是怎么配合的:主线程发起一个异步请求(比如http请求),相应的工作线程接收请求并告知主线程已收到通知(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作之后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数);
javaScript 的事件循环(event loop)
因为js是单线程 所以所有的任务都要排队执行,任务分为两种:宏任务、微任务
宏任务
script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境)
微任务
Promise、 MutaionObserver、process.nextTick(Node.js环境)
事件循环流程
- 执行宏任务队列中第一个任务,执行完后移除它
- 执行所有的微任务,执行完后移除它们
- 执行下一轮宏任务(重复步骤2)
宏任务 > 所有微任务 > 宏任务 如此循环就形成了event loop,其中,每轮执行 一个宏任务 和所有的微任务
事件循环图示
示例
console.log(1)
setTimeout(function () {
console.log(2);
});
new Promise(function(resolve,reject){
console.log(3)
resolve(4)
}).then(function(val){
console.log(val);
})
console.log(5);
打印的结果是:1 3 5 4 2
解析:
- 首先执行主线程这个宏任务,从上到下执行,遇到console.log(1); 打印1出来
- 遇到setTimeout,把它丢给定时器线程处理,然后继续往下执行,并不会阻塞定时器,而此处定时器线程会在,主线程执行完后,把回调函数放入宏任务队列。
- 遇到new Promise,直接执行,先打印 ‘3‘ 出来
- 遇到promise的then, 属于微任务,则把回调函数放入微任务队列
- 遇到console.log(5) 打印 ‘5’ 出来
- 宏任务执行完后会执行所有待执行的微任务,所以会相继打印 ‘4’ 出来。
至此第一轮循环已经结束了,第一轮循环里的宏任务和微任务都会被移除出任务队列,接下来开启第二轮循环,
- 首先查找是否有宏任务,由于setTimeout 的回调被放入了宏任务队列,这里会执行回调函数的代码,打印了 ‘2’ 出来
- 接着查找是否有微任务,发现没有微任务,则本轮循环结束
接下来会重复上面的步骤,这就是event loop 了。后续当我们触发点击事件,有回调函数的话,回调函数也会被放入宏任务队列,一旦队列里重新有了任务,就会被执行。
扩展题
下面的代码打印出来的结果是什么?
console.log(1);
setTimeout(function(){
new Promise(function(resolve){
console.log('promise in setTimeout1');
resolve();
}).then(function(){
console.log('then in setTimeout1');
})
},10);
new Promise(function(resolve){
console.log(3);
for( var i=100000 ; i>0 ; i-- ){
i==1 && resolve();
}
console.log(4)
}).then(function(){
console.log(5);
});
setTimeout(function(){
console.log('setTimeout2');
},10);
console.log(7);
答案如下:
这个有多个宏任务, 第二个setTimeout 的回调函数,执行的比第一个setTimeout里面的promise.then()的回调要晚,因为每次循环只执行一个宏任务,但是却会执行所有待执行的微任务,而第二个setTimeout在宏任务队列的位置在第一个setTimeout后面。
本文参考了好多大牛解析 感谢观看 欢迎交流~