简述 JavaScript 的执行机制

一、单线程

为了解决这个问题，防止下一个任务等待上一个任务等待太长的时间，所以提出了 Web Worker标准，允许 JS 创建多个线程，于是JS出现了同步 和 异步 ，异步就是可以同时进行多个任务，这样，大大的提高了我们代码的执行效率

栗子：

打印结果为：

（一） 同步任务

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

（二）异步任务

• JS的异步通过回调函数来实现，一般而言，异步任务有三种类型

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

• 同步任务是放到啊主线程的执行栈中，异步任务相关回调函数是放到任务队列（消息队列）中
  
  

二、JS执行机制

三、事件循环 (event loop)

遇到多个任务的时候，JS是如何去进行处理的呢

所有的异步任务都要放到任务队列中去吗？或者谁放在前面，谁放在后面呢？这时候就引入JS的异步进程进行处理

1. 先执行console.log(1) 打印 1

2. 然后将 document.onclick 提交给异步进程处理，决定是否写入任务队列中，只有点击了才会把回调函数的异步任务就放到任务队列中去，如果不点击就不写入到任务队列中去

3. 再执行console.log(2) 打印2

4. 将setTimeout提交给异步进程进行处理，只要3秒时间到了，才会把异步回调写到任务队列中去，只是写入，尚未执行，要等到所有的同步任务都结束了才去执行

5. 在没有执行点击事件的时候，结果为1，2，3
   
   

6. 如果在3秒之前就点击的话，那么就会先执行点击事件的回调函数
   
   

7. 假设在3秒之前没有进行，那么当定时器的任务执行完之后，就把任务队列中清空，但是同步任务会反复查看任务队列中是否还有任务，如果此时执行点击事件的话，又会把点击事件的回调函数放入到任务队列中去执行，当执行完后又会清空，此时如果再次点击的话，又会把点击的回调放到队列中去执行

上图理解：

总结：

由于主线程不断的重复获取任务，执行任务，再获取任务，再执行任务，所有这种机制就被称为 事件循环 （event loop）