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. 【web前端】前段时间的面题整理(1)

    这是我的试题答案整理,可能有多种答案.我也就写了一两种.在慢慢整合中 第一题 用js实现随机选取10-100之间的10个数字,存入一个数组,去重后求和(保证这10个数字不能出现重复) 要求:去重不能使 ...

  2. 【MM系列】SAP MM模块-如何修改物料的移动平均价

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-如何修改物料的移动 ...

  3. 【ABAP系列】SAP Web Dynpro 技术简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP Web Dynpro 技 ...

  4. django 的 MTV 流程图

  5. Spring对Jdbc的封装——JdbcTemplate的使用

    链接:https://pan.baidu.com/s/15luDElW4oeEaP0nvEQ_40w 提取码:i2r1 JdbcTemplate是Spring对JDBC的封装,目的是使JDBC更加易于 ...

  6. Hibernate 日期映射 条件查询

    1. hql: ...and accopt_time > ?" 2. query.setDate Query query = session.createQuery(hql); int ...

  7. python day2-爬虫实现github登录

    GitHub登录 分析登录页面 开发者工具分析请求 从session请求分析得知: 1.请求的URL为:https://github.com/session 2.该请求为post请求,即需要上传dat ...

  8. spring security OAuth2.0之客户端Client的实现

    项目代码:https://github.com/hankuikuide/microservice-spring-security-oauth2 网上多数的项目客户端都是采用纯js写,或用postman ...

  9. python 框架

    支持异步的 python web 框架 tornado 轻量级 flask 框架 flask中文文档 import base64 import random import io import time ...

  10. c++ Socket客户端和服务端示例版本一

    客户端 #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <sys/soc ...