浅谈 JS 运行机制——事件循环（Event Loop）

提前知道

单线程

众所周知，JavaScript语言是单线程，即同一个时刻只做一件事。为何？因为，JavaScript作为浏览器脚本语言，如果它同时拥有多个线程，那么，它在操作DOM时，就会造成复杂的同步问题。比如，JavaScript的两个线程对同一个DOM节点进行操作，一个将其背景色改为蓝色，一个将其背景色改为黑色。那么，浏览器该先执行那个操作呢？所以，为了避免出现此种情况，它只能是单线程。

同步任务（synchronous）和 异步任务（asynchronous）

因为是单线程，所以，JavaScript所有任务都要排队。且只有前一个任务结束，才会执行后一个任务。但是，这会面临着一个问题：前一个任务耗时较长时，后一个任务就不得不一直等待。为解决这个问题，JavaScript语言的设计者，将所有任务分成了两种：

• 同步任务

在主线程上排队执行的任务。且只有前一个任务执行完毕，后一个任务才会执行。

• 异步任务

不进主线程，而是进任务队列的任务。且仅当任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

任务队列（task queue）

任务队列是一个事件的队列（也可以理解成消息的队列）。它是一个先进先出的数据结构，排在前面的事件，会被主线程优先读取。

在一个事件循环中，至少拥有一个任务队列，且一个任务队列便是一系列有序任务(task)的集合。每个任务都有一个任务源(task source)，同一个任务源的任务(task)必须放入同一个任务队列之中，换句话说，就是根据任务源将任务添加到各自相对应的队列之中。例如，setTimeout和Promise这两个API，便可看成是两个不同的任务源，它们注册的任务会依次进入自身对应的队列之中。

事件循环（Event Loop）

直奔主题