JavaScript event loop

最新推荐文章于 2022-11-21 10:58:17 发布
最新推荐文章于 2022-11-21 10:58:17 发布
阅读量70 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45484646/article/details/108758813
版权

  1. javascript 事件机制是单线程运行机制

  2. 运行时将任务分为同步任务和异步任务

  3. 异步任务又分为宏任务和微任务

  4. 运行时又分为主线程和调用栈（执行栈）

  5. 在运行时，首先将任务分为同步任务和异步任务，同步任务进入调用栈，并等待主线程依次执行。待调用栈执行完毕，清空调用栈。接着将宏任务放入入主线程。待宏任务执行完毕，清空宏任务队列，将微任务放入主线程，最后，所有的任务都执行完毕，清空微任务队列，再进行下一次循环。

  6. 宏任务包括 setTimeout, setIntervals setImmediate , I/O, UIRendering

  7. 微任务包括 promise的then, catch, finally , process. nextTick, MutationObserver（监测dom的变更）

yxlazy
关注
专栏目录
NodeJs EventLoop与JavaScript EventLoop详解
qq_41634455的博客
01-28 332
EventLoop是什么 EventLoop是一个代码执行模型，它规定了代码的执行顺序，nodeJs和JavaScript拥有各自的EventLoop，理解EventLoop能让我们更加理解代码的执行，更好地掌控代码 宏任务和微任务 ​ JavaScript中的代码执行分为同步执行和异步执行，而异步执行的代码中又分为宏任务和微任务，它们的执行顺序有所不同。它们并没有什么概念性的差别，只是根据执行顺序的不同而进行区分，仅此而已。因此，只需要硬性的记住哪些是宏任务哪些是微任务就可以了。 宏任务（macrota
JavaScript 运行机制 Event Loop 学习
springLilly的博客
02-10 406
这个事件机制我看了好多的文章，有不少被指出有理解错误或问题，我一直对这个东西处于迷迷糊糊的状态，今天看到一道题，决定好好研究一下。本文只是我自己的的学习总结，不免有问题，希望看到问题的朋友批评指正。 事件循环机制是js实现异步的核心，在每一轮事件循环中都涉及到了同步任务和异步任务，异步任务的返回结果会被放到一个任务队列中，根据异步事件的类型，这个事件实际上会被放到对应的宏任务和微任务队列中去。具体对于宏任务和微任务的理解可以参考下图。具体的理解我写在了文章里，因为对node还一知半解，所以本次只涉及浏览器端
JavaScript Event Loop理解
weixin_38982114的博客
10-09 125
JavaScript是单线程，这里的单线程指的是只有一个主线程，主线程通过回调函数处理其他异步任务。 Event Loop很多地方中文翻译成事件循环，我感觉翻译的不能准确表达JavaScript异步事件的执行逻辑。事件循环很容易让人理解成放入任务队列的事件依次循环执行。这种理解我认为是不对的。应该是放入任务队列的事件被叫号执行。任务队列的事件都是晚于同步代码块执行的。同步代码块中的代码按照顺序执行，回调函数放入异步任务队列，等待主线程的叫号。被叫到的回调函数会被立即执行。 function task1()
JavaScript Event Loop
zthtt的博客
01-09 324
​ JavaScript是一门单线程的语言，他的多线程和异步是通过eventloop循环机制实现，大体有三个部分组成，调用栈（call stack）、消息队列(Message Queue)、微任务队列（Microtask Queue） ​ EventLoop开始时会从全局栈一行一行执行，遇到函数调用，会把他压入调用栈中，被压入的函数叫做帧（Frame）,当函数返回后会从调用栈中弹出 Javascript中的异步操作，比如Fetch事件回调，setTimeout和setInterval中的回调函数，会入队到消
浏览器环境下的JavaScript Event Loop
hkw20的博客
10-04 117
浏览器环境下的JavaScript Event Loop 正文从这开始~~ 什么是JavaScript的Event Loop？ 在JavaScript中有一个很重要的Event Loop概念，从字面意思理解为事件循环，为什么会有Event Loop这个概念呢？我们得先从JavaScript语言的特征说起。 细心的读者可能发现了，文章的标题中我们着重强调了是在浏览器环境，这是为什么呢？ 因为JavaScript的Event Loop不仅存在于浏览器环境下，还存在于Node环境下，而且两者还存在一些差别。 本
JavaScript 之 Event Loop
weixin_44051815的博客
12-06 464
概述 JavaScript 属于单线程语言（除了 web work）。单线程，必然导致了代码需要一行行的去执行，但是一些耗时的操作（http 请求等），如果还是使用同步的方式，比如会导致页面阻塞，所以这个时候就需要异步操作。在 JavaScript 中，处理这种异步操作的机制就是 事件循环(Event Loop)。 Event Loop 执行逻辑 JavaScript 从上到下开始执行代码，当遇到异步任务时，将异步任务放到任务队列中，当整个文件的代码都执行完成后（也可以理解成执行栈中的代码都执行成），
javaScript Event loop 机制
qq_42837255的博客
12-06 397
1.JavaScript是一门单线程语言，单线程意味着他只有一个栈，一次只能去做一件事情，所以要知道他是如何去处理异步问题还得搞清楚JavaScript的代码执行运行机制。 首先我们先写一段简单同步线程的代码 function one(n){console.trace(n);} function tow(n){one(n)} function three(n){tow(n)} three(3) 如图所示callStack中是正在执行的代码，我们使用console.trace()打印...
Javascript Event Loop
zhuchuji的博客
01-20 141
Javascript concurrency model and event loop on MDN
JavaScript EventLoop
djph26741的博客
12-16 122
转自：http://cek.io/blog/2015/12/03/event-loop/ What is JavaScript What is JavaScript anyway? Some words: It’s a single-threaded, non-blocking, asynchronous, concurrent language” It has a c...
JavaScript运行机制：Event Loop
weixin_45663697的博客
11-15 997
JavaScript运行机制：Event Loop 注：对阮一峰老师的JavaScript 运行机制详解：再谈Event Loop，做的学习笔记 1. 为什么JavaScript是单线程的 先来了解一下进程和线程这两个概念 比喻 进程就是一个公司，每个公司都有自己的资源可以调度；公司之间是独立的；线程就是公司里的每一个员工，多个员工一起合作，完成任务，公司可以有一名员工或多个，员工之间共享公司的空间 什么是进程 进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位） 什么是线程 线程：是c
JavaScript Event Loop相关原理解析
11-20
JavaScript Event Loop相关原理解析 JavaScript的设计理念是基于单线程模型，这意味着它只能在一个线程上顺序执行代码。这是为了简化浏览器环境，避免多线程间的资源共享与冲突导致的复杂性。JavaScript引擎，如V8...
JavaScript运行机制之事件循环(Event Loop)详解
10-25
在深入探讨JavaScript的事件循环（Event Loop）之前，我们首先要明白JavaScript为何采用单线程模型。单线程模型意味着在任何时刻，JavaScript都只能处理一件事情，这与它的主要用途息息相关。JavaScript的使命是在...
FormData多文件上传并同时添加其他数据
热门推荐
qq_45484646的博客
09-13 1万+
前言 在做项目时，有一个接口要求上传文件的同时能携带其它数据，在这里使用的是FormData对象来进行操作。简单介绍一下这个对象。 FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。(以上出自这里) 单文件上传 这里使用FormData的append()方法，该方法
eslint 搭配 vscode 的简单使用
qq_45484646的博客
05-12 3607
前言 刚开始时，由于嫌麻烦，并没有安装eslint，最近在新的项目上使用了eslint再配合vscode的插件，真是爽的不要太爽。因此打算写一篇简单的食用说明来记录食用过程 前期准备 没啥好准备的，作为开发肯定是具备yarn和node的，编辑器使用的是微软的亲儿子vscode 然后新建一个文件夹eslint-example，cd进入这个文件夹并初始化一个package.json 初始化package.json命令 $ yarn init -y 文件结构 - eslint-example - packag
使用puppeteer获取网页信息
最新发布
qq_45484646的博客
11-21 3043
Puppeteer 是一个运行在Node端的浏览器，为我们提供了强大的功能，例如抓取页面数据，对页面进行截图等功能...
koa2中的app.context.xxx与ctx.xxx以及Object.create
qq_45484646的博客
10-08 676
koa2 app.context 当在使用koa2框架时，好奇为什么通过 app.context.xxx 添加的属性可以通过ctx.xxx 调用，于是乎看了下相关源码 在application.js文件中，看到了构造函数中初始化部分代码如下： this.middleware = [];//用来存储中间件，也就是洋葱模型的核心 this.context = Object.create(context);//实例化this.context对象 this.request = Object.create(requ
var, let, const 声明变量详解
qq_45484646的博客
03-21 448
var 是ES6之前用来声明变量的关键字，而let和const是ES6之后的版本出现的。let和const是为了解决var带来的怪异行为。 var 声明 var声明的变量存在变量提升（hoist） function test() { console.log(a) var a = 10 } test() //undefined var声明的变量会先将变量a提升到作用域的顶部（在这里是test函数作用域)，并初始化为undefined，然后等到执行var a = 10 才真正进行变量的赋值，其
集合引用类型篇（一）
qq_45484646的博客
04-06 379
Object 显示创建Object的实例对象有两种方法，一种是new Object()来实例化一个对象，另一种是使用对象字面量形式 在使用对象字面量表示法定义对象时，其实并没有调用Object()构造函数 Array 有几种方式可以创建数组，一种是数组字面量，一种是通过new关键字调用但不传递参数或者传递参数，也可以直接使用Array()创建，在ES6中新增了两个静态方法创建数组：Array.from和Array.of let a = [] let a1 = [1, 2,] let a2 = [, 1,
集合引用类型篇（二）
qq_45484646的博客
04-09 292
定型数组 //创建一个12字节的缓冲 const buf = new ArrayBuffer(12) //创建一个引用buf缓冲的Int32Array const ints = new Int32Array(buf) console.log(ints) //Int32Array(3) [0, 0, 0] //length属性，打印长度 console.log(ints.length) //3 //与DataView一样，也有一个指向关联缓冲的引用 console.log(ints.buffer) //Arr
JavaScript单线程与EventLoop深入解析
JavaScript引擎的单线程执行意味着所有代码都会进入一个执行队列，而异步任务的回调函数则会被放入Event Loop，待主线程空闲时进行处理。 定时器是JavaScript中常用的异步工具，包括`setTimeout`和`setInterval`。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值