JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)
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,比如setTimeout
和setInterval
会进入相同的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、宏任务、微任务)的更多相关文章
- js异步处理工作机制(setTimeout, setInterval)
经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文—————————— ...
- JS 引擎的执行机制
关于JS引擎的执行机制,首先牢记2点: .JS是单线程语言 JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 关于单线程相对还比较好理解,就是 ...
- js为什么是单线程的?10分钟了解js引擎的执行机制
深入理解JS引擎的执行机制 1.JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setT ...
- JS引擎的执行机制:探究EventLoop(含Macro Task和Micro Task)
在我看来理解好JS引擎的执行机制对于理解JS引擎至关重要,今天将要好好梳理下JS引擎的执行机制. 首先解释下题目中的名词:(阅读本文后你会对这些概念掌握了解) Event Loop:事件循环Micro ...
- JS引擎的执行机制
深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4 ...
- [转]JS 引擎的执行机制
转: https://www.cnblogs.com/wancheng7/p/8321418.html ------------------------------------------------ ...
- 深入理解JS引擎的执行机制
深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4 ...
- 别再为了this发愁了------JS中的this机制
别再为了this发愁了------JS中的this机制 题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对 ...
- 再次讲解js中的回收机制是怎么一回事。
在前几天的一篇闭包文章中我们简单的介绍了一下闭包,但是并没有深入的讲解,因为闭包涉及的知识点比较多,为了能够更好的理解闭包,今天讲解一下关于js中的回收机制. 在初识闭包一文中我说过js中有回收机制这 ...
随机推荐
- python3 基本数据类型_1
不得已,要学习python3了,之前了解到py2与py3有很大不同,不过学起来才能感觉到,比如print. 不过,同样的代码,可以使用py3,py2执行,结果也相似,大家可以看看. 大概因为初学,还未 ...
- Linux操作系统目录一览表
/ // 根目录 /bin //存放必要的命令 比如ls.cp.mkdir等命令 /boot //存放内核以及启动所需的文件 /dev //存放硬件设备文件 比如声卡.磁盘.光驱 /etc //存放系 ...
- [Web 前端] 021 js 初识 Javascript
1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...
- windows系统IO性能测试
关键词:sql server io测试 下载链接:http://www.onlinedown.net/soft/57364.htm CrystalDiskMark(硬盘检测工具),一个测试你的硬盘或者 ...
- Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享
启用 Mod_rewrite 模块:sudo a2enmod rewrite 另外,也可以通过将 /etc/apache2/mods-available/rewrite.load 连接到 /etc/a ...
- Python 入门之数据类型之间的相互转换 以及 在编程中会遇到的数据类型的坑
Python 入门之数据类型之间的相互转换 以及 在编程中会遇到的数据类型的坑 1.数据类型总结: 可变,不可变,有序,无序 (1)可变的数据类型:list dict set (2)不可变的数据类型: ...
- 使用Log4Net将系统日志信息记录到记事本和数据库中
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hxpjava1/article/details/32714855 一.使用Log4Net将日志记录到 ...
- 使用 ref 和 out 传递数组注意事项
1.与所有的 out参数一样,在使用数组类型的 out 参数前必须先为其赋值,即必须由被调用方为其赋值 示例 :在此例中,在调用方(Main 方法)中声明数组 theArray,并在 FillArra ...
- 剑指offer-顺序打印二叉树节点(系列)-树-python
转载自 https://blog.csdn.net/u010005281/article/details/79761056 非常感谢! 首先创建二叉树,然后按各种方式打印: class treeNo ...
- vue filters过滤
<template> <div class="filters"> <h1 v-text="filtersTitle">< ...