JavaScript事件循环Event Loop

执行栈

在代码运行过程中,主线程(JavaScript引擎线程)中有一个执行栈,执行栈中,又存在两个东西,一个是堆,一个是栈,栈里面则是当前要执行的代码

• 堆: 一种存放复杂或者说引用类型的内存区域
• 动态分配的内存，大小不定，不会自动释放，存放引用类型，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针(地址)。
• 栈:一种存放数据的内存区域,当前要执行的代码
• 先进先出,后进后出,一个有序的列表
  流程图:
  

同步和异步

• 同步任务在执行栈中执行,而异步任务执行完毕后进入任务队列
• 当前所有同步任务执行完毕后,才会进入人物队列中执行等待中的异步任务
• 流程图:
  

1. 同步任务由JavaScript主线程次序执行
2. 异步任务委托给宿主环境执行
3. 已完成的异步任务对应的回调函数,会被加入到任务队列中
4. JavaScript主线程的执行栈被清空后,会读取任务队列中的回调函数,次序执行
5. JavaScript主线程不断的重复上面的第4步

宏任务和微任务

宏任务

• 异步Ajax请求
• setTimeout,setInterval
• 文件操作
• 其他宏任务

微任务

• Promise.then , .catch和finally
• process.nextTick
• 其他微任务
  
• 优先级: 微任务 => DOM渲染 => 宏任务
• 每一个宏任务执行完之后,都会检查是否存在待执行的微任务,如果有,则执行完所有微任务,再继续执行下一个宏任务
• 你可以理解为宏任务和微任务都是任务队列，只是用来存放东西的队列。
  然后呢主线程可以执行代码，渲染UI之类的。主线程空闲的时候就会去轮询看看宏任务队列有没有要执行的任务，没有就过，有就取出来执行。
• 宏任务执行完会去看微任务队列。没有就过，有就取出来执行。