浏览器中的JS事件循环机制

一、概述

JavaScript是单线程(只有一个主线程)的语言
Event Loop是JavaScript的执行机制
JavaScript的任务分为同步任务和异步任务
异步任务分为宏任务和微任务

二、几个概念:

  • 同步任务(synchronous):**指在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。
  • 异步任务(asynchronous):指不进入主线程、而进入"任务队列"的任务
  • 宏任务(macrotask)包括:
    setTimeOut 、 setInterval 、setImmediate 、 I/O 、 各种callback、UI渲染等
    优先级如下:主代码块 > setImmediate >MessageChannel > setTimeOut/setInterval
  • 微任务(microtask):包括process.nextTick 、Promise、MutationObserver 、async(实质上也是promise)
    优先级如下:
    process.nextTick > Promise >MutationOberser
  • 任务队列(task queue/callback queue):包括1个microtask队列和1个或多个macrotask队列

三、事件循环可以简单描述为:

主代码块->微任务->宏任务->微任务->宏任务...(主代码块也是一个宏任务)

详细解释如下

  1. 主代码块入栈
  2. 顺序执行代码块中的同步任务,遇到异步任务则交由浏览器内核的其模块处理,处理完后将异步任务的回调函数加入到任务队列中(一般不同异步任务的回调函数会放入不同的任务队列之中)
  3. 当函数执行栈为空时,若microtask队列中有任务则先将microtask队列中的所有微任务入栈执行,当函数执行栈为空,再从macrotask队列中取出一个宏任务入栈。
  4. 2~3步骤循环,直到所有任务执行完

图解如下:


四、代码实例

console.log(script start)
setTimeout(function() {
console.log('timer over')
},0)
Promise****.resolve().then(function() {
console*.log('promise1')
}).then(function() {
console.log('promise2')
})
console.log('script end')

输出结果:
// script start
// script end
// promise1
// promise2
// timer over
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容