这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

一、同步任务和异步任务是什么？

1、为什么会有同步任务和异步任务？

大家都知道java是一门多线程语言，我们常常使用多线程处理很多事情。但是由于JavaScript是一门单线程的语言，也就是说，JavaScript在同一时间只能做一件事，只能在一件事情执行完之后才能去执行下一件事情。但是如果在遇到某些消耗时间长的事件（比如读取数据或者是定时器），一件一件顺序执行则会导致性能大幅下降，降低用户体验。所以JS在设计之初就考虑到了这样的情况，并设计了同步任务和异步任务机制。

2、什么是同步任务？

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务。

3、什么是异步任务？

在JS的设计中有一个任务队列，这是不同于主线程的队列。在遇到异步任务时，会放置在任务队列中，等待同步任务执行完之后才会放入主线程当中。比如下面一段代码：

function fun1() {
  console.log(1);
}
function fun2() {
  console.log(2);
}
function fun3() {
  console.log(3);
}
fun1();
setTimeout(function(){
  fun2();
},0);
fun3();
 
// 输出
1
3
2

其中，fun1、2、3都是同步任务，但是在执行fun2的时候使用了定时器，这就是异步任务。所以执行到setTimeout的时候放入了异步任务队列中，执行完fun1、fun3之后，再去任务队列中取出fun2执行。

二、执行过程总结

简单来说，同步任务和异步任务的执行顺序可以总结为以下步骤：

1、同步任务在JavaScript主线程中按照顺序执行
2、遇到异步任务则交给宿主环境执行
3、当异步任务完成之后，执行的回调函数会被加入到任务队列中等待执行
4、主线程的执行栈被清空后则会读取任务队列中的回调函数按照顺序执行

在整个过程中会不断重复上面四步。由于整个过程是不断循环执行的，该过程便被称为EventLoop（事件循环机制）。