js的循环机制、宏观任务与微观任务

javascript是单线程语言，EventLoop事件循环。
一、同步和异步：
所有的线程，都是有同步队列，和异步队列，立即执行的任务队列，这些都是属于同步任务，比如一个简单的函数；请求接口发送ajax，发送promise，或时间计时器等等，这些就是异步任务。

二、任务队列-事件循环：
同步任务会立刻执行，进入到主线程当中，异步任务会被放到任务队列当中。
等待同步代码执行完毕后，返回来，再将异步中的任务放到主线程中执行，反复这样的循环，这就是事件循环。
也就是先执行同步，返回来按照异步的顺序再次执行。

三、宏观任务和微观任务（先执行微观任务，再执行宏观任务）
在事件循环中，每进行一次循环操作称为tick，tick 的任务处理模型是比较复杂的，里边有两个词：分别是 Macro Task （宏任务）和 Micro Task（微任务）。
简单来说：
宏观任务主要包含：setTimeout、setInterval、script(整体代码)、I/O、UI 交互事件、setImmediate(Node.js 环境)
微观任务主要包括：Promise、MutaionObserver、process.nextTick(Node.js 环境)
规范：先执行微观任务，再执行宏观任务
那么我们知道了，Promise 属于微观任务， setTimeout、setInterval 属于宏观任务，先执行微观任务，等微观任务执行完，再执行宏观任务。

案例一：

console.log('开始111')setTimeout(function() {console.log('setTimeout111')
}, 0)Promise.resolve().then(function() {console.log('promise111')
}).then(function() {console.log('promise222')
})console.log('开始222')

猜想：
先走同步的代码，从上往下，先打印 “开始111”，再打印“开始222”。
中途的三个异步，进入到了异步队列，等待同步执行完（打印完），返回来再执行异步，所以是后打印出来。

分析：
1、遇到同步任务，直接先打印 “开始111”。
2、遇到异步 setTimeout ，先放到队列中等待执行。
3、遇到了 Promise ，放到等待队列中。
4、遇到同步任务，直接打印 “开始222”。
5、同步执行完，返回执行队列中的代码，从上往下执行，发现有宏观任务setTimeout 和微观任务Promise ，那么先执行微观任务，再执行宏观任务。
所以打印的顺序为：开始111 、开始222 、 promise111 、 promise222 、 setTimeout111

console.log('开始111')setTimeout(function () {console.log('timeout111');
})new Promise(resolve => {console.log('promise111');resolve()setTimeout(() => console.log('timeout222'));
}).then(function () {console.log('promise222')
})console.log('开始222');

分析：
1、遇到同步代码，先打印 “开始111” 。
2、遇到setTimeout异步，放入队列，等待执行。
3、中途遇到Promise函数，函数直接执行，打印 “promise111”。
4、遇到setTimeout ，属于异步，放入队列，等待执行。
5、遇到Promise的then等待成功返回，异步，放入队列。
6、遇到同步，打印 “开始222”。
7、执行完，返回，将异步队列中的代码，按顺序执行。有一个微观任务，then后的，所以打印 “promise222”，再执行两个宏观任务 “timeout111” “timeout222”。
所以，打印的顺序为：开始111 、 promise111 、开始222 、 promise222 、 timeout111 、 timeout222
先执行主任务，把异步任务放入循环队列当中，等待主任务执行完，再执行队列中的异步任务。异步任务先执行微观任务，再执行宏观任务。一直这样循环，反复执行，就是事件循环机制。

js的循环机制、宏观任务与微观任务相关推荐

JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...
JavaScript 执行— 事件循环、宏观任务、微观任务
从浏览器或者 Node 开发者的角度来看,我们应该如何使用 JS 引擎? 当拿到一段 JS 代码时,浏览器或者 Node 环境首先要做的就是:传递给 JS 引擎,并要求它去执行.然而,执行 JS 并非 ...
js事件循环机制（await-async-事件循环）
await和async 异步函数 async function async关键字用于声明一个异步函数: async是asynchronous单词的缩写,异步.非同步: sync是synchronous ...
js事件循环机制和优先级
浏览器的渲染进程是多线程,包括 GUI渲染线程 js引擎线程事件触发线程定时器触发线程异步http请求线程主执行栈和任务队列所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即 ...
彻底搞懂JS事件循环机制（event loop）
知识点: js异步实现 EventLoop.消息队列宏任务与微任务同步模式与异步模式首先要确定 js是单线程语言,js在设计之初用作用户互动,以及操作DOM.这决定了它只能是单线程(例如多线 ...
js 微观任务、宏观任务、循环机制
javascript是单线程语言,就是因为单线程的特性;就不得不提js中的同步和异步. 同步和异步: 所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就是同步任务 ...
js结束当前循环关键词_干货｜|什么是事件循环机制
事件循环机制经常有小伙伴问到我什么是 js 的事件循环机制,这里我就简单来给这些有困惑的小伙伴进行一下解答. 我将从下面几个方面来循序渐进的为大家来进行讲解: 区分进程和线程浏览器的多进程浏览器 ...
js事件循环——看输出顺序
js事件循环: 由于js是单线程的,同一时间只能干一件事情,当期宿主环境为浏览器时,若一个任务耗时过长会导致页面阻塞.因此有了js事件循环机制,它将任务分成同步任务和异步任务,同步任务在主线程不断执行 ...
对JavaScript事件循环机制的理解
前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS ...

js的循环机制、宏观任务与微观任务

js的循环机制、宏观任务与微观任务相关推荐

最新文章

热门文章