说说你对事件循环的理解.pdfVIP

说说你对事件循环的理解 ⼀、是什么 JavaScript 在设计之初便是单线程，即指程序运⾏时，只有⼀个线程存在，同⼀时间只能做⼀件事 为什么要这么设计，跟 JavaScript 的应⽤场景有关 JavaScript 初期作为⼀门浏览器脚本语⾔，通常⽤于操作 DOM ，如果是多线程，⼀个线程进⾏了删除 DOM ，另⼀个添加 DOM ，此时浏览器 该如何处理？ 为了解决单线程运⾏阻塞问题， JavaScript⽤到了计算机系统的⼀种运⾏机制，这种机制就叫做事件循环（Event Loop） 事件循环（Event Loo p） 在 JavaScript 中，所有的任务都可以分为 同步任务：⽴即执⾏的任务，同步任务⼀般会直接进⼊到主线程中执⾏ 异步任务：异步执⾏的任务，⽐如 ajax ⽹络请求， setTimeout定时函数等 同步任务与异步任务的运⾏流程图如下： 1.png 从上⾯我们可以看到，同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执⾏完毕为空，会去任务队列读取对应的任 务，推⼊主线程执⾏。上述过程的不断重复就是事件循环 ⼆、宏任务与微任务 如果将任务划分为同步任务和异步任务并不是那么的准确，举个例⼦： console.log(1) setTimeout(()={ console.log(2) }, 0) new Promise((resolve, reject)={ console.log(new Promise) resolve() }).then(()={ console.log(then) }) console.log(3) 如果按照上⾯流程图来分析代码，我们会得到下⾯的执⾏步骤： console.log(1) ，同步任务，主线程中执⾏ setTimeout() ，异步任务，放到 Event Table ，0 毫秒后 console.log(2) 回调推⼊ Event Queue 中 new Promise ，同步任务，主线程直接执⾏ .then ，异步任务，放到 Event Table console.log(3) ，同步任务，主线程执⾏ 所以按照分析，它的结果应该是 1 = new Promise = 3 = 2 = then 但是实际结果是： 1 = new Promise = 3 = then = 2 出现分歧的原因在于异步任务执⾏顺序，事件队列其实是⼀个“先进先出”的数据结构，排在前⾯的事件会优先被主线程读取 例⼦中 setTimeout 回调事件是先进⼊队列中的，按理说应该先于 .then 中的执⾏，但是结果却偏偏相反 原因在于异步任务还可以细分为微任务与宏任务 微任务 ⼀个需要异步执⾏的函数，执⾏时机是在主函数执⾏结束之后、当前宏任务结束之前 常见的微任务有 ： Promise.then MutaionObserver Object.observe （已废弃；Proxy 对象替代） process.nextTick （Node.js） 宏任务 宏任务的时间粒度⽐较⼤，执⾏的时间间隔是不能精确控制的，对⼀些⾼实时性的需求就不太符合 常见的宏任务有： script (可以理解为外层同步代码) setTimeout/setInterval UI rendering/UI事件 postMessage、MessageChannel setImmediate、I/O（Node.js） 按照这个流程，它的执⾏机制是： 执⾏⼀个宏任务，如果遇到微任务就将它放到微任务的事件队列中 当前宏任务执⾏完成后，会查看微任务的事件队列，然后将⾥⾯的所有微任务依次执⾏完 回到上⾯的题⽬ console.log(1) setTimeout(()={ console.log(2) }, 0) new Promise((resolve, reject)={ console.log(new Promise) resolve() }).then(()={ console.log(then) }) console.log(3)