JavaScript的事件循环机制浅析
前言
JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作。
类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等。
概念
在JavaScript代码执行过程中,可以分为同步队列和异步队列。
同步任务类似我们常说的立即执行函数,不需要等待可以直接进行,可以直接进入到主线程中去执行,类似正常的函数调用等。
异步队列则是异步执行函数,类似ajax请求,我们在发起的过程中,会进入到一个异步队列,加载到任务当中时,需要进行等待,之后才能进行返回值的处理。
举个栗子
下面一段代码,我们可以先了解一些一些关于事件循环机制的一些基本的原理
console.log('1');
setTimeout(function() {
console.log('4');
}, 0);
Promise.resolve().then(function() {
console.log('2');
}).then(function() {
console.log('3');
});
console.log('5');
我们将代码打印到控制台当中,输出结果是:1,5,2,3,4
我们知道,在JavaScript中,类似定时器,以及ES6新增的promise是异步函数,回到我们上面所说的队列的概念当中,不难得出,1和5为同步执行队列
在执行完同步队列中的代码之后,再执行异步队列中的代码。
TIP
在解析异步队列的promise和定时器中,我们发现,定时器setTimeout是后执行于promise,这里我们引入JavaScript规范中的宏任务(Macro Task)和微任务(Micro Task)的概念
在JavaScript中,宏任务包含了:script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
微任务:Promise、MutaionObserver、process.nextTick(Node.js 环境)
再回到上面的定时器和promise的问题,这时候我们知道,JavaScript中,当有异步队列的时候,优先执行微任务,再执行宏任务
再次举个栗子
假如在异步队列当中存在异步队列时,我们需要怎么处理
console.log(1);
setTimeout(function() {
console.log(5);
}, 10);
new Promise(resolve => {
console.log(2);
resolve();
setTimeout(() => console.log(3), 10);
}).then(function() {
console.log(4);
})
console.log(6);
将代码执行到控制台中,得出的打印顺序是:1,2,6,4,5,3
不同于例子1当中的promise,打印2是优先于6执行的,由此我们可以知道,new Promise在执行过程中,在未执行resolve或者rejected前,所执行的代码均为同步队列中的代码。
再看4,5,3的执行顺序,在执行微任务promise执行回调resolve之后,对应的then立即执行
在打印结果中,定时器5优先执行于---->属于微任务promise中的宏任务定时器3,定时器5这个宏任务是在promise微任务这个队列之后就加进去,在promise执行完成then回调之后,promise中的宏任务才加入到队列当中,因此在定时器5之后执行
总结
在JavaScript中,宏任务包含了:script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
微任务:Promise、MutaionObserver、process.nextTick(Node.js 环境);
在执行过程中,同步代码优先于其他任务队列中的代码,
定时器,promise这类任务,在执行过程中,会先加入队列,
在执行完同步代码之后,再根据宏任务和微任务的分类,先执行微任务队列,再执行宏任务队列。
文章个人博客地址:JavaScript的事件循环机制
JavaScript的事件循环机制浅析的更多相关文章
- 对javascript EventLoop事件循环机制不一样的理解
前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...
- 【运行机制】 JavaScript的事件循环机制总结 eventLoop
0.从个例子开始 //code-01 console.log(1) setTimeout(() => { console.log(2); }); console.log(3); 稍微有点前端经验 ...
- javascript的事件循环机制
JavaScript是一门编程语言,既然是编程语言那么就会有执行时的逻辑先后顺序,那么对于JavaScript来说这额顺序是怎样的呢? 首先我们我们需要明确一点,JavaScript是单线程语言.所谓 ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- JavaScript 运行机制:Event事件循环机制
JavaScript Event事件循环机制 JS是单线程的,浏览器只分配一个主线程给JS.一次只能执行一个任务,当前任务执行完后在可以执行下一个任务.任务多时,就会形成任务队列排队等待执行.但是非常 ...
- javascript事件循环机制 浅尝手记
引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...
- 深入浅出Javascript事件循环机制
一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.web ...
- 浏览器中的JavaScript事件循环机制
浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
随机推荐
- Android App发布遇到的问题总结【转】
感谢大佬:https://www.cnblogs.com/jeffen/p/6824722.html 问题描述(v1和v2) Android 7.0中引入了APK Signature Scheme ...
- 入门 - k8s伸缩应用程序 (六)
目标 使用 kubectl 伸缩应用程序. Scaling(伸缩)应用程序 在之前的文章中,我们创建了一个 Deployment,然后通过 服务 提供访问 Pod 的方式.我们发布的 Deployme ...
- git 撤销,放弃本地修改,放弃已提交修改
一, 未使用 git add 缓存代码时. 可以使用 git checkout -- filepathname (比如: git checkout -- readme.md ,不要忘记中间的 &quo ...
- 【转】Python 并行分布式框架 Celery
原文链接:https://blog.csdn.net/freeking101/article/details/74707619 Celery 官网:http://www.celeryproject.o ...
- P2678 [NOIP2015 提高组] 跳石头
#include<bits/stdc++.h> using namespace std; int l,n,m,a[100010];//与起点的距离 bool check(int d) { ...
- Lesson14——NumPy 字符串函数之 Par3:字符串信息函数
NumPy 教程目录 1 字符串信息函数 1.1 numpy.char.count char.count(a, sub, start=0, end=None) 返回一个数组,其中包含 [start, ...
- Typora软件的使用
Typora软件 一.简介 1.该软件编写文档采用markdown格式是目前最为频繁的一种格式 2.该软件生成的文档后缀名是.md结尾 3.下载网址 https://www.typora.io/ 二. ...
- Office RTF远程模板注入
远程模板插入 ProofPoin最近写了一篇文章,报告中提到近年来RTF模板注入进行office钓鱼攻击的数量增加.之前还没怎么了解过RTF模板注入的,现在和小编一起去看看吧(笑hhh). 相 ...
- GoJS 使用笔记
作为商业软件,GoJs很容易使用,文档也很完备,不过项目中没有时间系统地按照文档学习,总是希望快速入门使用,所以将项目中遇到的问题精简一下,希望对后来者有些帮助. 开始使用 这里先展示一个最简单的例子 ...
- Shell 函数带中横线问题排查
Shell 中编写的函数,如果函数名中带了中横线,在使用 /bin/sh 执行时会报错. ➜ subprocess git:(master) ✗ cat kubectl.sh _kubectl_api ...