1. 事件循环
JS引擎是单线程的,一个时间点下JS引擎只能做一件事情。
在浏览器环境中,有JS 引擎线程和渲染线程,且两个线程互斥。
Node环境中,只有JS 线程。
JS的任务分为异步和同步两种
- 异步:一个任务不是连续完成的,先执行第一段,做好准备之后,再回过头执行第二段(回调)。
- 同步:连贯完成的。
eg:读取文件、网络请求等任务属于异步任务:花费时间长,但中间的操作不需要JS引擎自己完成,它只需要等别人准备好,把数据给它,它执行回调部分。
如果没有特殊处理,JS 引擎在执行异步任务时,应该是存在等待的,不去做任何其他事情。用一个图来展示这个过程,可以看出,在执行异步任务时有大量的空闲时间被浪费。
为了不使JS引擎处于忙等的状态,采取了异步任务回调通知模式:
在等待异步任务准备的同时,JS 引擎去执行其他同步任务,等到异步任务准备好了,再去执行回调。这种模式的优势显而易见,完成相同的任务,花费的时间大大减少,这种方式也被叫做非阻塞式。
实现这个“通知”的,正是事件循环,把异步任务的回调部分交给事件循环,等时机合适交还给 JS 线程执行。事件循环并不是 JavaScript 首创的,它是计算机的一种运行机制。
2. 任务队列
事件循环是通过任务队列的机制进行协调的。
一个事件循环中,可以有一个或者多个任务队列(task source),源自同一个任务源的task必须放到同一个任务队列,从不同源来的则被添加到不同的队列。
事件循环是由一个队列或者多个队列组成的,异步任务的回调遵循先进先出,在 JS 引擎空闲时会一轮一轮地被取出,所以被叫做循环。
JS引擎常驻于内存中,等待宿主将JS代码或函数传递给它。
也就是等待宿主环境分配宏观任务,反复等待 - 执行即为事件循环。
Event Loop(事件循环)中,每一次循环称为tick,每一次tick的任务如下:
- 在此次 tick 中选择最先进入队列的任务(oldest task),如果有则执行(一次)
- 检查是否存在 Microtasks,如果存在则不停地执行,直至清空 Microtasks Queue
- 更新 render
- 主线程重复执行上述步骤。
对于每一次循环tick:
- JS分为同步任务和异步任务。
- 同步任务都在主线程上执行,形成一个执行栈。
- 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有运行结果,就在任务队列中放置一个事件。
- 一旦执行栈中所有同步任务执行完成(JS引擎空闲),系统就会读取任务队列,将可运行的任务队列加入执行栈中,开始执行。
根据队列中任务的不同,分为宏任务和微任务。
3. 宏任务、微任务
事件循环由宏任务和执行宏任务期间产生的所有微任务组成。
完成当下的宏任务后,会立即执行所有在此期间入队的微任务。
这种设计是为了给紧急任务一个插队的机会,否则新入队的任务永远被放在队尾。
区分了微任务和宏任务后,本轮循环中的微任务实际上就是在插队,这样微任务中所做的状态修改,在下一轮事件循环中也能得到同步。
举个小例子:
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {<