异步函数是否会等待上方同步代码执行后再启动执行？

首先明确结论：是的，asyncFunc必须等它上方的所有同步代码执行完毕后，才会执行到它的调用行。

JavaScript是单线程语言，代码执行严格遵循从上到下的同步执行顺序，只有当前执行栈里的所有同步任务都处理完，才会去处理任务队列中的异步任务。结合你的代码来拆解：

//some sync code...

const asyncFunc = async() => {
await console.log('executing async func');
}
asyncFunc()

//asyncFunc went to the background and the rest of sync code goes on...

• 第一步：先同步执行//some sync code...部分，这部分代码会从头到尾执行完毕，不会被打断。
• 第二步：同步定义asyncFunc函数——函数定义是同步操作，不会触发异步逻辑，只是把函数体存入内存。
• 第三步：执行asyncFunc()调用——这一行是同步执行的，只有等上方所有同步代码都跑完，才会走到这里。调用后，函数内部代码会立即执行，直到遇到第一个await：
  • 这里await后面跟着的console.log是同步操作，所以会先打印executing async func；
  • 之后await会将函数后续的逻辑（这里没有后续代码）放入微任务队列，函数暂停执行，让出线程给后续同步代码。
• 第四步：同步执行//asyncFunc went to the background and the rest of sync code goes on...部分，直到所有同步代码执行完毕，事件循环才会去处理微任务队列里的剩余逻辑。

关键误区纠正：程序启动后不会自动把所有异步函数都放进调用栈，只有当代码执行到异步函数的调用语句时，才会触发它的执行流程，而调用语句本身必须等上方的同步代码都执行完才会被执行。

内容的提问来源于stack exchange，提问作者Adrian