浏览器事件循环 event loop，同步任务微任务宏任务

示意图

理解

事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列

测试代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="button">click</button>
</body>


<script>

  //测试1 开始

  let btn = document.querySelector("#button")
  queueMicrotask(() => { //微任务
    console.log("micro1")
  })
  setTimeout(() => { //settimeout 也是宏任务
    console.log("big1")
  }, 0)
  btn.addEventListener('click', function () { //根据执行顺序，说明用户点击事件是宏任务
    console.log('click3')
    queueMicrotask(() => {
      console.log("queueMicrotask4")
    })
  })

  queueMicrotask(() => {
    console.log("micro2")
  })


  // 测试2 开始


  const mytodo = new Promise((resolve, reject) => {
    console.log("quick1") //这里是同步任务，优先执行
    setTimeout(() => {
      console.log("big2")
      resolve(true)
    }, 1000)
  })


  setTimeout(() => {
    console.log("big3")
  }, 1000)

  //微任务的优先级高于宏任务
  mytodo.then(res => {
    console.log('micro4')
  })



</script>

</html>

总结

1、同步任务优先级最高，一般指的是直接执行的代码
2、微任务执行优先级次于同步任务，优先级第二，一般微任务主要是promise、then、async、queueMicrotask等。
3、宏任务优先级最后，但是宏任务内的微任务优先级次于宏任务本身。宏任务一般指的是用户操作事件，或者定时器等。

posted on 2024-06-03 00:14 joken1310 阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 浏览器 performance 测试页面性能，查看阻塞代码

· 浏览器渲染引擎线程和js执行引擎线程的关系

· 同步任务和微任务和宏任务

· 事件队列（EventLoop）【宏任务，微任务】

· 浏览器事件循环

joken-前端工程师

最新随笔

我的标签

阅读排行榜

评论排行榜

最新评论

示意图

理解

测试代码

总结