深入浅出任务队列机制，非常浅

ideaa 发布于2019-08-23 15:13 / 1261人阅读

摘要：即任务执行完毕，接着执行完所有的任务后，此时本轮循环结束，开始执行。完毕之后接着下一轮循环。来道经典题目答案是先走完所有同步代码到微任务宏任务

前言

众所周知，js是单线程的，就像我们不能一边刷牙一边洗脸（或许有些大佬真的可以），那么单线程如何才能规划调度好要做的任务呢？
这个时候就要介绍一下这个任务机制了~

任务种类

宏任务

微任务

注意：浏览器环境和node环境是不一样的，本文只讨论浏览器环境

规则

执行一个宏任务(先执行同步代码)-->执行所有微任务-->UI render-->执行下一个宏任务-->执行所有微任务-->UI render-->

根据HTML Standard，一轮事件循环执行结束之后，下轮事件循环执行之前开始进行UI render。即：macro-task任务执行完毕，接着执行完所有的micro-task任务后，此时本轮循环结束，开始执行UI render。UI render完毕之后接着下一轮循环。但是UI render不一定会执行，因为需要考虑ui渲染消耗的性能已经有没有ui变动

需要注意的是，微任务是有优先级的，就如同上面的表格从上往下一样，nextTick>Promise>MutationObserver.

那么宏任务有没有优先级呢？？

大部分浏览器会把DOM事件回调优先处理因为要提升用户体验给用户反馈，其次是network IO操作的回调，再然后是UIrender，之后的顺序就难以捉摸了，其实不同浏览器的表现也不太一样，这里不做过多讨论。

来道经典题目

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案是
"script start"、"script end"、"promise1"、"promise2"、"setTimeout"
先走完所有同步代码-到promise微任务-宏任务setTimeout

云服务器 GPU云服务器异步任务队列浅复制浅拷贝设计浅谈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101710.html

一篇文章教会你Event loop——浏览器和Node

摘要：如果没到毫秒，那么阶段就会跳过，进入阶段，先执行的回调函数。参考文档什么是浏览器的事件循环不要混淆和浏览器中的定时器详解浏览器和不同的事件循环深入理解事件循环机制篇中的执行机制最近对Event loop比较感兴趣，所以了解了一下。但是发现整个Event loop尽管有很多篇文章，但是没有一篇可以看完就对它所有内容都了解的文章。大部分的文章都只阐述了浏览器或者Node二者之一，没有对比...

Leck1e 2019-08-22 15:33 评论0 收藏0
js基础深入浅出

摘要：当多个事件触发的时候，会把异步事件依次的放入里等同步事件执行完之后，再去队列里一个个执行拾遗常用方法总结面试的信心来源于过硬的基础参考高级程序设计你所不知道的深入浅出知识点思维导图经典实例总结那些剪不断理还乱的关系持续不断更新。。。基本类型和引用类型 vue props | Primitive vs Reference Types 基本类型和字面值之间的区别基本类型和字面值相等，...

phodal 2019-08-20 16:21 评论0 收藏0
深入前端-彻底搞懂JS的运行机制

摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址了解进程和线程进程是应用...

luckyw 2019-08-02 15:30 评论0 收藏0
深入前端-彻底搞懂JS的运行机制

摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址了解进程和线程进程是应用...

jaysun 2019-08-23 18:41 评论0 收藏0
前端基础进阶（十二）：深入核心，详解事件循环机制

摘要：前端基础进阶正是围绕这条线索慢慢展开，而事件循环机制，则是这条线索的最关键的知识点。特别是中正式加入了对象之后，对于新标准中事件循环机制的理解就变得更加重要。之后全局上下文进入函数调用栈。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的学习零散而庞杂，因此很多时候我们学到了一些东西，但...

whjin 2019-08-21 18:31 评论0 收藏0