JavaScript 里的“较小忙”和较大忙，到底有哪些差别？

哎哟喂，说起 JavaScript 的这一些玩意儿，我这老实人一听就头较大！ 不过咱还是得良好良好说说这宏任务和微任务，不然以后上线代码，客户确定又要喷了。 你们了解吗？ JavaScript 就像个没上过学的孩子，有时候会慌慌张张，有时候又特别缓慢吞吞的。 要是搞不清楚宏任务和微任务的差别，那可就糟了！

啥叫宏任务？

先说说宏任务吧。 宏任务就像一个领导，它负责安排全部的较大事。 JavaScript 里最常见的宏任务就是渲染页面、处理用户点击、加载数据哪些的。 这一些事情都很十分沉关键， 我舒服了。 必须要先干完！ 而且领导一完成，下个项目就启动了。 不过有个较小保密：领导说完之后会让底下的较小帮手赶紧把事情办完！

注意 我说的“办完”是指全部干完啊！ 不是一会儿就停一下，太魔幻了。。

然后来了微任务。 微任务就像一个个较小弟，他们得在领导说完之后立刻落实。 听起来良好像没哪些较大不了的吧？ 但关键是它们要“一次性”地把全部的事情都干完！ 就像一群蚂蚁一样， 就算.... 齐心协力把东西搬运过去。 所以说呢，只要还有微任务没完成的，它们就会一直等着下去，直到全部都办完了才肯放手。 这叫做“清空队列”，是不是很酷炫？

它们到底有哪些不一样？

大胆一点... 想象一下： 你正在给客户打 常见的较小帮手 ： MutationObserver、Promise.n/catch/finally 等等... 你了解哪些是这一些较小帮手的名字吗？ 最主要有 MutationObserver 和 Promise.n/catch/finally 这一些家伙们。 他们都在等着被调用呢！ 还有 queueMicrotask 当前这个函数呢, 它也属于微任務那一类的哦! 记住他们的名字很十分沉关键! 有些东西不是真实的 “微任務” : "伪" 微任務 嘿, 这里还有一个陷阱! 有些东西看起来像微任務, 其实不然! 特别是那一些用 script 标签写的代码, 会直接变成第一个宏任務; 而 setTimeout 的回调函数会被塞进后面的宏任務队列里; 而 Promise的回调函数则进入到下面的微任務队列里. 所以要区分清楚啊! 不要被表面的样子迷惑了哦! 例子: javascript // script标签: 直接触发第一个宏任务 // setTimeout => { console.log; }, 0); // 进入下一个非阻塞操作队列 // .n => { console.log; }); // 进入 Micro Task Queue // console.log; //立刻输出1 当前这个例子说明了 setTimeout的回调是不是伪微任務? 如果是伪的任务, 那它就会被塞进下一个非阻塞队列里等待落实. 反之, 如果是真实正的那么就会进入micro task队列等待落实. 搞错它们会引起哪些后果? 如果搞错了的话, 会发生哪些呢? 举个例子: 把很更多微任務塞进去了 , 就有可能引起 UI 卡死! 这是因为浏览器不允许同时也进行更多个不同非同步操作, 它会优先响应UI渲染和其他事件, 所以如果你的代码写错了, 让一个巨较大的微任務一直占用主线程 , UI 就彻底 unresponsive 了!，切记... 怎样避免这一些坑? 想要避免这一些问题呢? 一定要记住两点: 不要让 Micro Task 自己调用自己: 举个例子 queueMicrotask => queueMicrotask) 这玩意儿太存在风险因素了! 会形成递归调用, 让你的程序永远卡住! 采用其他方式代替 Micro Task: 如果你需要时常会刷崭新页面或者做一些定时操作, 尽量用 setTimeout 或 requestAnimationFrame 代替吧. 这一些方法更可靠可靠! 注意虽然 setTimeout 比 Micro Task "缓慢"，但它们不会阻塞浏览器渲染! 希望这篇文章能协助较大家明白 JavaScript 中的宏和微的任务的差别！记住啦, 上面讲的这一些知识点一定要牢牢记在心里哦! 下次遇到类似的问题的时候 , 就不会哭晕在代码区啦 !