首页 > 编程语言 >简单总结JavaScript中的微任务和宏任务

简单总结JavaScript中的微任务和宏任务

时间:2023-05-02 15:34:42浏览次数:54  
标签:总结 nextTick 队列 JavaScript js 任务 执行

在 JavaScript 中,任务被分为宏任务和微任务。

宏任务:常见的宏任务有 setTimeout、setInterval、I/O、UI 渲染等等。这些任务都是由浏览器或 Node.js 中的事件循环调度执行的,它们会被放入一个任务队列(task queue)中,等待执行。

微任务:常见的微任务有 Promise、MutationObserver 等。它们是在当前任务执行结束之后、下一个宏任务开始执行之前执行的,也就是说它们的优先级比宏任务高。微任务在执行时也会被放入一个微任务队列(microtask queue)中。

事件循环会不断从宏任务队列中取出任务执行,执行完当前宏任务后,会先清空微任务队列中的所有任务,然后再执行下一个宏任务,以此类推。

需要注意的是,微任务队列中的任务在执行时可以再次添加微任务到队列中,因此如果微任务中存在无限递归调用的情况,程序会陷入死循环。

 

关于nextTick

 

`nextTick` 是 Node.js 提供的一种在事件循环的下一轮中执行回调的方法。和其他异步代码一样,回调函数不会立即执行,而是会被放入事件循环的任务队列中等待执行。

在有些场景下,我们需要等待当前代码执行完成后才能执行下一步,但是又想要在下一轮事件循环中执行一些操作,这时就可以使用 `nextTick`。它可以在当前代码执行完成后立即执行回调函数,因此可以在保证当前代码执行完毕的前提下,尽快地执行下一步操作。这在一些需要优化性能、占用资源和提高响应速度的场景中会有帮助。

此外,在 Vue.js 中,`nextTick` 也是非常常用的,它会在 DOM 更新后执行回调函数,常用于在页面更新后执行一些操作,比如访问更新后的 DOM 元素。

需要注意的是,`nextTick` 并不是语言规范中定义的概念,而是 Node.js 提供的一个工具方法,因此在其他 JavaScript 运行环境中,可能不存在 `nextTick` 方法或者实现方式可能不同。

 

 

--ChatGPT

标签:总结,nextTick,队列,JavaScript,js,任务,执行
From: https://www.cnblogs.com/zjy4fun/p/17367752.html

相关文章

  • [Javascript] avoid mutation: Array.prototype.toSpliced() vs splice()
    Array.prototype.splice()mutatestheoriginalarray.Toavoidmutation,weuseArray.prototype.slice().newmethodArray.prototype.toSpliced()returnanewarraytoavoidthemutation.constmonths=["Jan","Mar","Apr",&quo......
  • [Javascript] Avoid mutation, Array.prototype.toSorted() vs sort()
    sort(),mutatestheoriginalarray,andreturnthereferencetooriginalarrayandsorted.The toSorted() methodof Array instancesisthe copying versionofthe sort() method.Itreturnsanewarraywiththeelementssortedinascendingorder.const......
  • [Javascript] Avoid mutation, Array.prototype.toReversed() vs reverse()
    reverse()mutatestheoriginalarray,returnthereferencepointtotheoriginalarray.The toReversed() methodof Array instancesisthe copying counterpartofthe reverse() method.Itreturnsanewarraywiththeelementsinreversedorder.constite......
  • [Javascript] Array.prototype.with
    Prevously,whenwewanttoupateaniteminsideaarray:constitems=[{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'},{id:4,name:'d'},{id:5,name:'e'}]constnewIt......
  • 磁盘单双缓冲区时间计算题总结
    题型一:问处理一个块所用的总时间是多少这是要处理多块数据,但是题目问处理一块的时间。这是一个套路,一般人会直接算出150。根据甘特图推出结论,单缓冲区处理每块数据用时为:MAX(缓冲区到磁盘所用时间,CPU处理所用时间)+工作区到缓冲区所用时间直接代入得出120。套路就是:求一个......
  • MySql在服务器上使用问题的总结
    服务器是WindowsServer2012,我自己安装了一个MySql数据库,然后一个Web程序和客户端程序都想访问数据库,但是遇到一堆问题。主要是我仍然坚持使用.net2.0,挂接MySql.Data6.7.4版本。解决后记录一下1.IIS访问数据库的问题未能加载文件或程序集“MySql.Data”或它的某一个依赖项。找......
  • 每日总结 5.2
    今天学习了语音输入的html。functionstart(){console.log('start')//开启recognition.continuous=true;recognition.start();}functionend(){console.log('end')//停止recognition.......
  • 2023.5.1 总结
    CF选做。CF1820E/CF1819C首先,若树是一个链,那么就直接这样:考虑在链上挂一些支链。若支链长度仅为1,那么很可做。如果支链长度大于1,无解。手玩一下即可。......
  • 每日总结2023-05-01
    今天继续学习了Android中的kotlin语言初始Java语言mportjava.util.ArrayList;importjava.util.List;publicclassRepository{privatestaticfinalRepositoryINSTANCE=null;privateList<User>users=null;publicstaticRepositorygetInstan......
  • 英语错题总结
    Amothermonkeyhadtwochildren.She loved  theyoungermonkeybetter.语法错误:此处应用过去式Sheheldtheyoungermonkeyinherarmsand climbed    upatree语法错误:此处应用过去式Oneday,theywereplayingina  forest   whenawolfca......