[深入04] 事件循环前端javascript

导航 [[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
[[深入04] 事件循环](https://juejin.im/post/684490...
[[深入05] 柯里化偏函数函数记忆](https://juejin.im/post/684490...
[[深入06] 隐式转换和运算符](https://juejin.im/post/684490...
[[深入07] 浏览器缓存机制（http缓存机制）](https://juejin.im/post/684490...
[[深入08] 前端安全](https://juejin.im/post/684490...
[[深入09] 深浅拷贝](https://juejin.im/post/684490...
[[深入10] Debounce Throttle](https://juejin.im/post/684490...
[[深入11] 前端路由](https://juejin.im/post/684490...
[[深入12] 前端模块化](https://juejin.im/post/684490...
[[深入13] 观察者模式发布订阅模式双向数据绑定](https://juejin.im/post/684490...
[[深入14] canvas](https://juejin.im/post/684490...
[[深入15] webSocket](https://juejin.im/post/684490...
[[深入16] webpack](https://juejin.im/post/684490...
[[深入17] http 和 https](https://juejin.im/post/684490...
[[深入18] CSS-interview](https://juejin.im/post/684490...
[[深入19] 手写Promise](https://juejin.im/post/684490...
[[深入20] 手写函数](https://juejin.im/post/684490...
[[react] Hooks](https://juejin.im/post/684490...
[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...
【[深入04] 事件循环】[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
js单线程

为什么js回事单线程？
设计js的目的是为了操作DOM等，如果是多线程，两个线程同时对同一个DOM元素执行了不同的操作，就会造成( 争夺执行权 )的问题

进程和线程的区别

一个进程可以有多个线程
一个线程只能属于一个进程
进程有自己独立的地址空间，一个进程崩掉不会影响其他进程
线程只是一个进程的不同执行路径，线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个线程死掉

一些单词

stack栈
heap堆
queue队列
macro-task: 宏任务
micro-task: 微任务
execution-context：执行上下文

栈和队列

栈：后进先出
队列：先进先出

同步任务，异步任务

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才会执行后面的任务

异步任务：未进入主线程，而进入任务队列的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，并且主线程的同步任务执行完毕后，该任务才会进入主线程执行

事件循环

一个线程中，事件循环是唯一的，但任务队列可以拥有多个
任务队列包括：
macro-task宏任务，和
micro-task微任务，在新标准中分别叫做
task 和
jobs
macro-task包括：script(整体代码)，setTimeout，setInterval，setImmediate，I/O，UI render
micro-task包括：Promise，process.nextTick，MutationObserver(html5新特性)

任务队列

任务队列分为宏任务（macro-task）和微任务（micro-task）也叫 task 和 jobs
在一个线程中，任务队列可以有多个

宏任务

包括 script（整体代码），setTimeout，setInterval，setImmediate，I/O，UI render

微任务

包括 Promise，process-nextTick，MutationObserver（html5新特性）

任务源和执行任务

任务源：setTimeout/setInterval等教程任务源
执行任务：进入任务队列的是任务源分发的执行任务，即回调函数
进入任务队列的是：任务源分发的执行任务，即回调函数

setTimeout

立即执行：setTimeout()函数本身是任务分发器，会立即执行
延时执行：延时执行的是setTimeout的第一个参数，即回调函数，并且会进入macro-task

window.setTimeout(function() { console.log('timer') }, 100) // setTimeout(callback, delay)会立即执行 // setTimeout的一个参数会在dalay毫秒后执行，前提是同步任务执行的时间要小于delay毫秒 // setTimeout()执行时，进入函数调用栈，或者叫执行上下文栈，执行完毕后，出栈 // 而callback回调会在delay毫秒后进入任务队列，等待进入主线程 // 任务队列：分为macro-task，micro-taskindow.setTimeout(function() { console.log('timer') }, 0) // setTimeout()的第二个参数是0，表示在执行完所有同步任务后，第一时间执行回调 // 关于setTimeout，即便主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒

事件循环的顺序！！！

事件循环的顺序，决定了js代码的执行顺序
每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈来完成
事件循环的顺序：
事件循环从宏任务开始，即从script整体代码开始第一次循环
全局执行上下文进入函数调用栈(执行上下文栈)，然后同步任务按调用顺序依次进入，同步任务进入主线程，异步任务进入分线程，定时器/事件等被浏览器的对应模块执行（定时器模块，事件处理模块），直到函数调用栈被清空（只剩全局，全局执行上下文永远在栈底）即同步任务执行完
然后执行任务队列中的微任务micro-task
当所有的micro-task微任务都执行完成后，循环再次从macro-task宏任务开始，然后再执行所有的micro-task，这样一直循环下去。
其中每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈（执行上下文栈）来完成的，即都是主线程的同步任务执行完后，任务队列的任务才进入主线程执行，即进入函数调用栈

解析：
(1) stack是执行上下文栈(函数调用栈)，最底部是全局执行上下文，上面是初始化函数
// 注意：函数分为初始化函数和回调函数，这样区分只是为了更好的理解事件循环而已
(2) 比如定时器，js会把定时器的回调和时间，交给浏览器的（定时器管理模块），在分线程上去执行，定时器管理模块仅仅是计时，时间到后，把回调函数放入到任务队列callback queue中，等待进入主线程执行。
(3) 比如事件，在事件发生的时候，浏览器的事件处理函数，会把回调放入到任务队列中

setTimeout(cb, delay) // setTimeout()进入函数调用栈执行完后，出栈 // cb和dalay进入浏览器的分线程，被浏览器的定时器管理模块执行，在delay时间后，将回调函数放入任务队列中// 有时候setTimeout()并不会在设置的时间后执行，是因为同步任务的执行超过了定时器指定的时间， // 因为任务队列的任务只有在主线程上的所有同步任务都执行完后（即调用栈中只剩全局上下文时），才会执行

示例1

执行结果：1 2 5 6 3 4

示例2 - 难度提升

示例3 - 巩固学习

nodejs事件循环机制

node事件循环机制1. timers阶段 - timers阶段也叫定时器阶段，主要是计时和执行到点的计时器2. pending callbacks阶段 - 系统相关，如tcp错误3. idea prepare - 准备工作4. poll阶段（轮询队列）// poll是轮询的意思 (1) 如果轮询队列不为空：依次从轮询队列中取出回调函数并执行，直到轮询队列为空或者达到系统的最大限制 (2) 如果轮询队列为空： - 如果之前设置过setImmediate函数：直接进入下一个阶段check阶段 - 如果之前没有设置过setImmedidate函数：在当前poll阶段等待 - 直到轮询队列添加回调函数，就会4(1)的情况执行 - 如果定时器到点了，也会去下一阶段check阶段5. check阶段 - 执行setImmediate函数6. close callbacks 阶段 - 执行close事件回调函数注意：process.nextTick()能在任意阶段优先执行

综合案例

nodejs事件循环setImmediate(() => { console.log('setImmediate') }) // 在poll阶段，轮询队列为空时，如果之前设置过setImmediate则直接跳到下一阶段check阶段就执行Immediate函数setTimeout(() => console.log('setTimeout'), 0) // 第一个阶段timer阶段，计时器delay是0，则在第一个阶段就执行process.nextTick(() => console.log('process.nextTick')) // 任意阶段优先执行执行结果： 'process.nextTick' 'setTimeout' 'setImmediate'

导航 [[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
https://yangbo5207.github.io/...
https://juejin.im/post/684490...
我的语雀：https://www.yuque.com/woowwu/...