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. 超详细 SpringMVC @RequestMapping 注解使用技巧

    @RequestMapping 是 Spring Web 应用程序中最常被用到的注解之一.这个注解会将 HTTP 请求映射到 MVC 和 REST 控制器的处理方法上. 在这篇文章中,你将会看到 @R ...

  2. face-api.js 前端人脸识别,人脸检测,登录认证

    1.参考face-api.js https://github.com/justadudewhohacks/face-api.js#face-api.js-for-the-browser

  3. 【Linux开发】Linux启动脚本设置

    前言linux有自己一套完整的启动 体系,抓住了linux启动 的脉络,linux的启动 过程将不再神秘.阅读之前建议先看一下附图.本文中假设inittab中设置的init tree为:/etc/rc ...

  4. docker--docker 的web可视化管理工具

    12 docker 的web可视化管理工具 12.1 常用工具介绍 当 Docker 部署规模逐步变大后,可视化监控容器环境的性能和健康状态将会变得越来越 重要. Docker的图形化管理工具,提供状 ...

  5. Insertion Sort List(单链表插入排序)

    来源:https://leetcode.com/problems/insertion-sort-list Sort a linked list using insertion sort. 方法: 1. ...

  6. SwipeRefreshLayout和RecyclerView类

    1 SwipeRefreshLayout和RecyclerView之间的关系 内容栏上下滚动是RecyclerView控制的,只有当内容栏滑动到最顶上时,再也拉不动了的时候,这个时候将动作交给Swip ...

  7. [转帖]青岛uber偷拍设备

    爱彼迎民宿路由器暗藏摄像头:官方回应已移除房源 https://www.cnbeta.com/articles/tech/844233.htm 罚款 就是搞笑啊.. 不过现在偷拍设备真多... 5月5 ...

  8. JSP页面读取数据中的数据内容,出现乱码现象的解决方法

    1.首先要确保JSP页面的编码已修改为“utf-8”的字符编码: 2.然后再在jsp页面上添加代码进行设置: 先用getBytes()方法读出数据,然后再new String()方法设置格式为“utf ...

  9. 关于连接池和DBUtils

    1.关于数据库连接池 连接池就是创建和管理一个连接缓冲池的技术,这些连接好被任意线程所使用,数据库连接池负责分配和管理.释放数据库连接,总而言之数据库连接池就是提高对数据库的操作性能. 数据库连接池: ...

  10. 洛谷 P1631 序列合并(优先队列)

    传送门 解题思路 首先读入a.b数组后,sort一遍(从小到大),然后把a[1]+b[1],a[2]+b[1],a[3]+b[1]……a[n]+b[1]全部加入一个优先队列q(小根堆). 然后从一到n ...