js事件循环机制总结

前端 1,288° Views

js是一门单线程语言，但却能优雅地处理异步程序，在于js的事件循环机制。

浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等
其包含的线程有：GUI 渲染线程（负责渲染页面，解析 HTML，CSS 、构造 DOM 树）、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程。

js执行线程：

  1. 主线程：也就是 js 引擎执行的线程，这个线程只有一个，页面渲染、函数处理都在这个主线程上执行。
  2. 工作线程：也称幕后线程，这个线程可能存在于浏览器或js引擎内，与主线程是分开的，处理文件读取、网络请求、定时器等异步事件。

任务队列( Event Queue )

所有的任务可以分为同步任务和异步任务，同步任务一般会直接进入到主线程中立即执行；而异步任务会通过任务队列的机制(先进先出的机制)来进行协调。如图：

js事件循环机制总结

事件循环：主线程内的任务先执行完毕，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

宏任务和微任务：任务包含两种，宏任务（Macro Task）和微任务（Micro Task）。微任务要优先于宏任务执行。故主线程任务执行完毕后会先读取任务队列中的微任务，将微任务按照先进先出的原则全部执行且清空后，再去读取任务队列中的宏任务。。。若没有宏任务，则进行下一次事件循环（Next Tick）。在事件循环中，每进行一次循环操作称为tick。（如果有需要优先执行的逻辑，放入microtask 队列会比 task 更早的被执行。）

宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate（IE、Node.js ）

微任务主要包含：Promise、MutationObserver（变动观察器）是监视DOM变动的接口）、process.nextTick（Node.js ）

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, promise1, promise2, setTimeout

//-------------------------------------------

console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');

//注意new Promise并不是异步，只是一个实例化对象，期回调先被执行。
//setTimeout遵循先进先出执行
//输出的顺序依次是：script start, promise1, script end, then1, timeout1, timeout2

本文固定连接：https://code.zuifengyun.com/2021/03/1810.html，转载须征得作者授权。

加载中...
加载中...