JS 执行机制（包括同步与异步）

一、JS 是单线程

• JS 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事，这是因为JS这门脚本语言诞生的使命所致——JS 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。
• 单线程意味着，所有的任务需要排列，前一个任务结束，才会执行后一个任务，这样会导致：如果JS 执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

二、同步和异步

• 为解决JS单线程问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JS 脚本创建多个线程。于是出现了同步和异步。

1. 同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

同步任务
同步任务都在主线程上执行，形成一个执行栈

2. 异步
在做一件事的时，因为这件事会花费很长时间，在做这件事的同时，还可以去处理其他事情。

异步任务
异步任务不进入主线程，而是进入“任务队列”（task queue）的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行
异步任务：JS 的异步是通过回调函数实现的

一般有以下三种类型：

1. 普通事件，如 click、resize 等
2. 资源加载，如 load、error 等
3. 定时器，包括 setInterval、setTimeout等

• 异步任务相关的回调函数添加到重新创建的一个任务队列中（任务队列也成为消息队列）
• 当有多个回调函数时，利用“异步进程处理”
  • 例：有一个点击的回调函数document.onclick=fn();
  • 先把 fn() 提交到“异步进程处理”中，“异步进程处理”来决定要不要把它写到“任务队列”中，只有点击了鼠标，即执行了 fn() ,“异步进程处理”才会把它放到“任务队列”中
  • 例：有一个定时器函数
  • 也是先将回调函数提交到“异步进程处理”中，等时间到了之后，再将其放到“任务队列”中

3.两者的本质区别
这条流水线上各个流程的执行顺序不同

三、JS 执行机制步骤

1. 先执行执行栈中的同步任务
2. 遇到回调函数，异步任务（回调函数）先放到任务队列中，不执行
3. 继续执行执行栈中的同步任务
4. 一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
   

四、事件循环(event loop)

由于主线栈不断的重复获得任务、执行任务、再获得任务、再执行，所以这种机制被称为事件循环