普歌-事件循环

事件循环和异步IO

一、事件循环是什么？

我们可以把事件循环理解成我们编写的JavaScript和浏览器或者Node之间的一个桥梁。

• 浏览器的事件循环是一个我们编写的JavaScript代码和浏览器API调用（setTimeout/Ajax/监听事件等）的一个桥梁，桥梁之间他们通过回调函数进行沟通。
• Node的事件循环是一个我们编写的JavaScript代码和系统调用（file system、network等）之间的一个桥梁，桥梁之间他们通过回调函数进行沟通。
  

二、进程和线程

进程和线程是操作系统中的两个概念：

进程（process）：计算机已经运行的程序
线程（thread）：操作系统能够运行运算调度的最小单位

直观一点解释：

进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）
线程：每一个进程中，都会启动一个线程用来执行程序中的代码，这个线程被称之为主线程

再用一个形象的例子解释：

操作系统类似一个工厂
工厂中里有很多车间，这个车间就是进程
每个车间可能有一个以上的工人在工厂，这个工人就是线程

1.多进程多线程开发

CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换
当进程中的线程获取到时间片时，就可以快速的执行编写的代码
对于用户来说感受不到这种快速的切换

2.浏览器和JavaScript

我们经常会说JavaScript是单线程的，但是JavaScript的线程应该有自己的容器进程：浏览器或者Node

浏览器是一个进程吗，它里面只有一个线程吗？

目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出
每个进程中又有很多线程，其中包括执行JavaScript代码的线程

但是JavaScript的代码执行是在一个单独的线程中执行的

这就意味着JavaScript的代码，在同一个时刻只能做一件事
如果这件事是非常耗时的，就意味着当前的线程就会被阻塞

三、JavaScript执行过程

四、浏览器的事件循环

如果在执行JavaScript代码的过程中，有异步操作呢？

• 中间插入了一个setTimeout的函数调用
• 这个函数被放到调用栈中，执行会立即结束，并不会阻塞后续代码的执行
  

那么，传入一个函数（比如我们称之为timer函数），会在什么时候被执行呢？

• 事实上，setTimeout是调用web api，在合适的时机，会将timer函数加入到一个事件队列中
• 事件队列中的函数，会被放到调用栈中，在调用栈中被执行
  

五、宏任务和微任务

事件循环中并非只维护一个队列，事实上是有两个队列：

• 宏任务队列（ macrotask queue ）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
• 微任务队列（ microtask queue ）：Promise的then回调、Mutation Observer API、queueMicrotask() 等

那么事件循环对于两个队列的优先级是怎样的呢？

1. main script 中的代码优先执行（编写的顶层script代码）
2. 在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列是否有任务需要执行

也就是宏任务执行之前，必须保证微任务队列是空的
如果不为空，那么优先执行微任务队列中的任务（回调）

接下来通过一道题来理解一下 ⭕️ ==>

---

更多推荐《普歌-事件循环-发布npm-Stream》

---

作者：Cnc_zj
本文源自：Cnc_zj的《普歌-事件循环》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。