js中同步异步代码的执行原理（调用栈和消息队列）

背景

总所周知，在js的代码执行过程中，代码是分为同步代码和异步代码的，同步代码和异步代码的区分在之前博客中已经解决，那么在浏览器中同步代码和异步代码的底层到底是怎么运转的呢？同步代码和异步代码里面的方法是如何被调用的呢？

调用栈和消息队列

在js中，有调用栈和消息队列两个地方执行js代码，调用栈中存放的是同步代码，而消息队列中存放的异步代码，有一个口诀是：同步执行，异步等待，意思就是说，所有的异步代码必须等同步代码执行完成之后才能开始执行，就算是异步代码在同步代码执行完成之前，就已经完成了，也不能立即被调用

栈的特点是先进后出，而消息队列的特点是先进先出

在js引擎线程执行整个js代码的时候，首先将碰到的同步代码入栈，执行完成之后才会出栈，如果碰到异步代码，就会挂起，放入消息队列，并且每一个消息都有一个与之对应的回调函数，后期执行栈中的任务执行完成之后，就会将消息队列中的任务一个个弹出到调用栈中执行，把那个消息队列的返回值作为回调函数的参数放入调用栈中执行。
同步代码首先在调用栈里面执行，由于是栈，所以先进去的东西后出来，这个要结合一个例子才好理解，这里我直接使用我参考的一个博客的内容

<script>
      const bar = () => console.log('bar');
      const baz = () => console.log('baz');
      const foo = () => {
          console.log('foo');
          bar();
          baz();
      }
      foo();
</script>

然后会有一个叫Event Loop的东西会一直检测调用栈中是否有任务，一旦没有任务了，就会立马将消息队列里面取出第一个任务压入栈中开始执行，由于消息队列是先进先出的，所以先入队的任务会先出队入栈

参考博客