事件循环-宏任务-微任务

概述

Javascript是一门单线程的脚本语言
时间循环（EventLoop）是JavaScript的运行机制

首先我们先看一下以下代码

setTimeout(function() {console.log('s1')}, 0)setTimeout(function() {console.log('s2')Promise.resolve().then(() => {console.log('s2 - promise')})
}, 0)
new Promise(function executor(resolve) {console.log('p1')resolve()console.log('p2')
}).then(function() {console.log('promise then')
})
console.log('end')

在公布结果之前先分析一下以上代码的知识点有哪些?
1.宏任务 2.微任务3.事件循环

事件循环（EventLoop）

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

JS程序进入JS引擎线程，函数入栈，遇到同步代码就顺序执行执行，遇到异步代码时，把异步代码任务抛给WebAPIs执行，然后继续执行接下来的同步代码，直到栈为空。
WebAPIs执行异步任务，当执行完一个异步任务就将其对应的回调函数放入任务队列（Callback Queue）中等待。（WebAPIs是由C++实现的浏览器创建的线程，处理Dom事件，http请求，定时器任务等异步任务）
当执行调用栈（Call Stack）为空时，从回调队列（Callback Queue）中取出对队首的任务放入函数栈中执行，消费完出栈。
事件循环机制不断的循环上面步骤，直到队列为空。

任务队列

JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。

宏任务

宏任务是JavaScript中最原始的异步任务，包括setTimeout、setInterVal、AJAX等，在代码执行环境中按照同步代码的顺序，逐个进入工作线程挂起，再按照异步任务到达的时间节点，逐个进入异步任务队列，最终按照队列中的顺序进入函数执行栈进行执行。

微任务

微任务是随着ECMA标准升级提出的新的异步任务，微任务在异步任务队列的基础上增加了【微任务】的概念，每一个宏任务执行前，程序会先检测中是否有当次事件循环未执行的微任务，优先清空本次的微任务后，再执行下一个宏任务，每一个宏任务内部可注册当次任务的微任务队列，再下一个宏任务执行前运行，微任务也是按照进入队列的顺序执行的。
Promise.then catch finally 就为微任务

上边的代码执行结果为

p1
p2
end
promise then
s1
s2
s2 - promise

分析

从上往下来看 setTimeOut为宏任务放到栈里面不执行 ,new Promise为同步代码块先执行 then为微任务不执行

console.log(‘p1’)
console.log(‘p2’)
console.log(‘end’)

同步代码执行完成后我们发现既有微任务和宏任务，微任务和宏任务同时存在则优选执行微任务。

console.log(‘promise then’)

执行宏任务每一个宏任务是单独的，如果宏任务中既有宏任务又有微任务也有同步代码，我们需要按照同步代码>微任务>宏任务的执行顺序

console.log(‘s1’)
console.log(‘s2’)
console.log(‘s2 - promise’)

参考链接：https://www.ruanyifeng.com/blog/2014/10/event-loop.html

事件循环-宏任务-微任务相关推荐

js---对事件循环宏任务和微任务的理解
一.JS特点 Js作为一门单线程语言,即一次只能完成一个任务,当有多个任务时,任务就得进行排队等待执行,只能等待自己的前一个任务执行完成后自己才能执行. 二.JS事件循环要理解JS的事件循环的就必须 ...
js的事件循环机制，同步和异步，以及宏任务与微任务的执行顺序
前置知识点(重要): 1.什么是事件循环:js是单线程语言,同个时间执行一件事(同步),但是他可以有一个异步队列,遇到异步操作(比如说ajax这种阻塞时间很久的事情)把它们先放入异步队列,并且继续往下 ...
onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到文中涉及到的代码demo地址:drag-and-eventloop ...
事件循环机制 + ES7：Async/Await（基于generator原理实现）附详细示例分析
文章目录一.事件循环任务队列宏任务和微任务循环机制简单示例二.Async/Await 1. async 2. await 3. 原理 4. 示例(红字分析为关键) 一.事件循环任务队列 ...
浏览器中的事件循环机制
浏览器中的事件循环机制网上一搜事件循环, 很多文章标题的前面会加上 JavaScript, 但是我觉得事件循环机制跟 JavaScript 没什么关系, JavaScript 只是一门解释型语言, ...
带你了解事件循环机制(Event Loop)
什么是事件循环机制? 事件循环分为两种,分别是浏览器事件循环和node.js事件循环,本文主要对浏览器事件循环进行描述. 我们都知道JavaScript是一门单线程语言,指主线程只有一个.Event ...
JavaScript中事件循环的理解 Event Loop
为了解决单线程运行阻塞问题,JavaScript用到了计算机系统的一种运行机制,这种机制就叫做事件循环(Event Loop) 事件循环(Event Loop) 在JavaScript中,所有的任务都 ...
nodejs 事件循环机制
nodejs事件循环机制 nodejs是基于v8引擎的JavaScript运行时.(注意nodejs不是一门新的编程语言) nodejs是基于libuv实现异步非阻塞式i/o 操作的.而事件循环是n ...
JavaScript事件循环机制
众所周知JS是一门单线程执行环境的语言,对于同步任务而言,同一时刻只能执行一个任务,后续的任务都要在当前执行的任务后面排队.这种模式在遇到一些执行时间较长的任务的时候就会出问题,会导致页面失去响应.所 ...

事件循环-宏任务-微任务

概述

事件循环（EventLoop）

任务队列

宏任务

微任务

分析

事件循环-宏任务-微任务相关推荐

最新文章

热门文章