前言:
1.在了解js的事件循环之前,我们先了解一下浏览器的任务线程:
在浏览器执行各种进程,浏览器是多进程,每一个浏览器的标签都可以都可以理解为一个多进程的任务进程,浏览器渲染进程属于进程中的一种,主要负责,页面渲染,脚本执行,任务处理,那么线程大概有:(html的结构解析,css解析成dom树,),js脚本的主线程,事件触发线程,定时器线程,http线程
2.关于事件循环:
虽然说js是一个单线程执行,但是还是分为同步和异步,也可以说为主线程,和异步线程,那么如果在异步线程中,任务队列绝对起到绝对重要的作用,同步任务一般都会在主线程去执行,执行完之后,再去执行异步任务,也就是在异步线程,那么这时候异步任务就可以进入任务队列去执行异步任务,上诉不断地过程,让我们叫做循环事件(Event loop)
3.关于宏任务和微任务
在事件循环中,每进行一次循环操作称为tick,通过阅读规范可知,每一次 tick 的任务处理模型是比较复杂的,其关键的步骤可以总结如下:
1.在此次 tick 中选择最先进入队列的任务( oldest task ),如果有则执行(一次)
2.检查是否存在 Microtasks ,如果存在则不停地执行,直至清空Microtask Queue
3.更新 render
4.主线程重复执行上述步骤
规范中规定,task分为两大类, 分别是 Macro Task (宏任务)和 Micro Task(微任务), 并且每个宏任务结束后, 都要清空所有的微任务,这里的 Macro Task也是我们常说的 task
宏任务:script( 整体代码),setTimeout,setInterval,UI交互事件
微任务:promise,nextTick
5.例题
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
正确答案是
script start
script end
pormise1
promise2
setTimeout