[JS]异步任务之事件循环

前言

常常会听到单线程和多线程这两个名词，单线程即一个时间段内程序从上到下执行任务，多线程即一个时间段内程序同时执行多个任务。

然而 JavaScript 是单线程的，它不像 Java 那样新开启一个线程执行任务。如果 JavaScript 要同时执行多个任务，需采取排队的方式实现。

任务队列

在 JavaScript 中，可以将任务分为两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务，每个任务从上到下依次执行；异步任务指的是任务不进入主线程执行，而是进入到任务队列中排队。只有当主线程上的所有同步任务执行完毕之后，主线程才会读取任务队列，开始执行异步任务。

请转至“[JS]回调函数”一文，了解什么是回调函数以及“同步任务”的案例。

如果前一个任务耗时很长，后一个任务不能一直等待。特别是对于长时间执行的任务，其他的任务就不能及时得到执行。对于这类情况，JavaScript 在主线程执行完所有的任务之后，再去读取任务队列上的异步任务。

在主线程中有两个任务需要被执行，异步任务会进入到任务队列中等待主线程把同步任务全部执行完成，然后主线程开始轮询任务队列中的异步任务，将异步任务全部执行完成。

如图所示，其运行结果是 “hello javascript” 在 “hello async javascript” 之前。

事件循环

主线程中的所有同步任务执行完毕，再读取任务队列中的异步任务，这个过程是不断循环的。因此，这种运行机制称为事件循环（Event Loop）。

在异步任务中，任务被分为两种，即宏任务（macrotask）和微任务（microtask）。微任务的优先级比宏任务的优先级高，所以主线程读取任务队列中的异步任务时，会优先读取微任务。

如上图，红色背景的任务是一个异步任务，它需要等待主线程的绿色背景的任务被执行完毕之后，主线程才会执行异步任务中的代码。

举例，直观地体验宏任务和微任务在优先度上的区别：

如上图，Promise 属于异步任务中的微任务，它优先于 setTimeout 宏任务。主线程任务先执行，然后进入到任务队列，先执行微任务，然后再执行宏任务。

声明：本篇文章（随笔）仅作为个人观点，仅供参考，如有错误，请在评论区指正！