JavaScript事件循环中Call Stack与Task Queue的区别是什么？

在JavaScript的事件循环机制中，调用栈和任务队列是管控代码执行顺序的核心组件，明确二者的分工就能理清它们的差异：

调用栈（Call Stack） #

• 它是JavaScript引擎处理同步代码的核心容器，每当执行脚本、调用函数时，对应的执行上下文（函数）会被压入栈的顶部。
• 引擎会优先处理栈顶的任务，完成一个就从栈中弹出一个，直到调用栈完全清空，才会去处理任务队列中的内容。
• 举个直观的例子：

  function printFoo() {
    console.log('foo');
    printBar();
  }
  function printBar() {
    console.log('bar');
  }
  printFoo();
  

  执行时，printFoo()先入栈，执行到printBar()时，printBar()被压入栈顶；printBar()执行完毕弹出栈，接着printFoo()执行完毕弹出栈，整个过程都在调用栈中同步完成。

任务队列（Task Queue） #

• 这里存放的是异步任务的回调代码——也就是那些不会立刻执行，需要等待特定条件触发才会被安排执行的JavaScript代码，常见场景包括：
  • 程序初始启动后待执行的异步初始化逻辑
  • 点击、输入等DOM事件的回调函数
  • setTimeout、setInterval触发时的回调代码
• 只有当调用栈完全为空时，事件循环才会从任务队列中取出首个任务，将其压入调用栈开始执行。

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