1、执行机制

JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务。同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定的事情完成时,Event Table会将这个函数移入事件队列Event Queue,等待主线程内的任务执行完毕,然后就会从事件队列 Event Queue 中读取对应的函数,进入主线程执行。

除了广义的同步任务和异步任务,JS 对任务还有更精细的定义:

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTick

微任务先于宏任务执行(除了一开始的整体代码 script)。执行过程中,不同类型的任务会进入对应的事件队列Event Queue,比如setTimeoutsetInterval会进入相同的Event Queue。

1.1、执行优先级

  • 同步代码执行顺序优先级高于异步代码执行顺序优先级
  • process.nextTick() > Promise.then() > setTimeout > setImmediate

(注意:process.nextTick 是 node 中的方法,而在浏览器中执行时(比如在vue项目中),会退化成setTimeout,所以在浏览器中 process.nextTick 会比 Promise.then() 慢)

1.2、总结

总得来说,在 JS 中,先是执行整体的同步任务代码,遇到微任务就会将其放在微任务事件队列,遇到宏任务就会放在宏任务事件队列中。

然后整体的同步任务代码执行完后,就会先执行微任务队列中的任务,等待微任务队列中的所有任务执行完毕后,此时才会从宏任务队列中找到第一个任务进行执行。该任务执行过程中,如果遇到微任务就会放到微任务队列中,等到该任务执行完后,就会查看微任务队列中有没有微任务,如果有就先执行完微队列中的任务,否则执行第二个宏任务。以此类推。

详细参考:https://juejin.im/post/59e85eebf265da430d571f89

JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)的更多相关文章

  1. js异步处理工作机制(setTimeout, setInterval)

    经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文—————————— ...

  2. JS 引擎的执行机制

    关于JS引擎的执行机制,首先牢记2点: .JS是单线程语言 JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 关于单线程相对还比较好理解,就是 ...

  3. js为什么是单线程的?10分钟了解js引擎的执行机制

    深入理解JS引擎的执行机制 1.JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setT ...

  4. JS引擎的执行机制:探究EventLoop(含Macro Task和Micro Task)

    在我看来理解好JS引擎的执行机制对于理解JS引擎至关重要,今天将要好好梳理下JS引擎的执行机制. 首先解释下题目中的名词:(阅读本文后你会对这些概念掌握了解) Event Loop:事件循环Micro ...

  5. JS引擎的执行机制

    深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4 ...

  6. [转]JS 引擎的执行机制

    转: https://www.cnblogs.com/wancheng7/p/8321418.html ------------------------------------------------ ...

  7. 深入理解JS引擎的执行机制

    深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4 ...

  8. 别再为了this发愁了------JS中的this机制

    别再为了this发愁了------JS中的this机制 题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对 ...

  9. 再次讲解js中的回收机制是怎么一回事。

    在前几天的一篇闭包文章中我们简单的介绍了一下闭包,但是并没有深入的讲解,因为闭包涉及的知识点比较多,为了能够更好的理解闭包,今天讲解一下关于js中的回收机制. 在初识闭包一文中我说过js中有回收机制这 ...

随机推荐

  1. 红帽学习笔记[RHCSA] 第二课[文件、目录、相关命令]

    第二课 常用的目录结构与用途 / 根目录 /boot 存储的是系统起动时的信息和内核等 /dev 存储的是设备文件 /etc 存储的是系统的配置文件 /root 存储的是root用户的家目录 /hom ...

  2. Nginx代理自动上线下线

    Nginx基于连接探测,如果发现后端异常,在单位周期为fail_timeout设置的时间,中达到max_fails次数,这个周期次数内,如果后端同一个节点不可用,那么接将把节点标记为不可用,并等待下一 ...

  3. Java 向上造型详解

    子类的对象可以向上造型为父类的类型.即父类引用子类对象,这种方式被称为向上造型. 在日常生活中,我们都扮演着不一样的角色.我们有可能是老师,有可能是学生,有可能是……, 但是我们都有共同的属性,例如: ...

  4. 2019 CSP-S初赛游记

    2019-10-19 ——这个注定要被载入史册的日子 作为一名初中生,和lpy大佬一同参加提高组的比赛,而今年普及组和提高组的时间竟然不一样,于是——凌晨六点半,来到了pdyz和高中生一起坐车去. 高 ...

  5. BZOJ 4033: [HAOI2015]树上染色题解

    BZOJ 4033: [HAOI2015]树上染色题解(树形dp) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1327400 原题地址: BZOJ 403 ...

  6. Linux下libaio的一个简单例子

    转载:http://www.cnblogs.com/aLittleBitCool/archive/2011/10/18/2216646.html 异步io,很好玩的一个东西,从接口来看,封装的比较厉害 ...

  7. CyclicBarrier、CountDownLatch、Callable、FutureTask、thread.join() 、wait()、notify()、Condition

    CyclicBarrier使用: import java.util.Random; import java.util.concurrent.BrokenBarrierException; import ...

  8. HDU1688-POJ3463-Sightseeing(求次短路的条数)

    题意 求出最短路和次短路的条数,当次短路比最短路长度小1时,输出条数之和,反之输出最短路条数. 题解  dis1[],cnt1[],dis2[],cnt2[] 分别表示最短路的长度和条数,次短路的长度 ...

  9. Nginx 的全局和虚拟主机配置

    Httpd.conf nginx.conf my-heavy-innode-4G.cnf php.ini  用中文注释 # user:指定 Nginx Worker 进程运行用户和用户组,默认 nob ...

  10. Tomcat报java.io.IOException: Broken pipe错误

    Tomcat报java.io.IOException: Broken pipe错误,如下图: 解决方案:我的原因是因为网络策略导致出现该问题,即网络端口未启用或被限制.