前端 js/浏览器/node /js 引擎的事件循环机制,宏任务、微任务

首先我们知道js是单线程的,所以有了事件循环机制来处理异步任务,

我们一般说的事件循环机制指 js  引擎的事件循环机制,js是一个编程语言,哪来的事件循环,前端常见的 js 引擎有浏览器和node。

所以在面试中问道【你知道事件循环机制的逻辑吗?】一般就是说的浏览器的事件循环机制,但是浏览器是一个很复杂的系统,浏览器本身有很多进程要处理很多事情。所以,我们在面试中提到的事件循环是指,浏览器内部的 js 引擎对于 js 代码执行时的事件循环,对于 chrome 浏览器就是 v8 引擎。

浏览器环境的事件循环机制则更广泛,包括了JavaScript引擎的事件循环,同时还处理浏览器的其他任务,比如DOM事件、渲染等。这两者共同协作,使得浏览器能够以用户友好的方式响应交互、处理异步操作,并渲染页面。

所以,当我们说"事件循环机制"时,通常是在讨论JavaScript引擎内部的机制,但在浏览器环境中,它还涉及到其他方面的任务和事件。

同理还有 node 环境中  js 引擎的事件循环机制。

JavaScript引擎的事件循环机制包括调用栈、任务队列、微任务队列等概念,用于协调和执行异步任务。它确保JavaScript代码的执行是单线程的,同时能够处理异步任务,如定时器、事件处理、Promise回调等。

不论哪种环境,我们需要熟悉掌握的就是 js 引擎的事件循环机制。

JavaScript 引擎事件循环机制基本概念:

  1. 调用栈(Call Stack): 保存执行上下文的栈结构。当函数被调用时,会将其执行上下文推入调用栈,当函数执行完成时,将其从调用栈中弹出。

  2. 任务队列(Task Queue): 异步任务的回调函数会被放入任务队列。任务队列中的任务在调用栈为空时,会被移到调用栈执行。

  3. 微任务队列(Microtask Queue): 用于存放微任务(例如Promise回调、process.nextTick【node】、MutationObserver等),微任务会在当前宏任务执行结束后立即执行。

  4. 事件循环(Event Loop): 负责协调调用栈、任务队列和微任务队列的执行顺序。

JavaScript 引擎事件循环机制顺序

  1. 执行同步代码: 从顶部执行调用栈中的同步代码,直到调用栈为空。

  2. 检查微任务队列: 执行微任务队列中的所有任务。微任务包括Promise回调、process.nextTick、MutationObserver等。

  3. 检查宏任务队列: 选择宏任务队列中的一个任务,将其回调函数推入调用栈执行。宏任务包括定时器回调、事件处理函数等。

JavaScript的事件循环遵循一个"执行栈 - 微任务队列 - 宏任务队列"的执行顺序。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录训练营第五十九天| ● 503.下一个更大元素II ● 42. 接雨水

503.下一个更大元素II 这道题和 739. 每日温度 几乎如出一辙&#xff0c;可以自己尝试做一做 代码随想录 这道题是循环数组&#xff0c;因此在遍历时要遍历nums.size()*2次&#xff0c;然后再读取nums中的元素时要使用i % nums.size()来得到对应的下标。 vector<int> ne…

吉他打谱软件Guitar Pro8苹果Mac电脑简体中文特别版

Guitar Pro 8 Mac是一款吉他编曲学习软件&#xff0c;用于吉他、贝和其他弦乐器的制谱和演奏&#xff0c;这是一个多轨编辑器&#xff0c;具有集成的 MIDI 编辑器、合唱绘图仪、吉他、节拍器和其他音乐家工具。它使您能够编辑吉他、贝司和尤克里里、乐谱、指法谱&#xff0c;并…

第11章 GUI Page462~476 步骤二十三,二十四,二十五 Undo/Redo ③实现“Undo/Redo”菜单项

工程六 添加“编辑”菜单和子菜单 菜单ID分别为 idMenuEditUndo 和 idMenuEditRedo 热键&#xff08;快捷键&#xff09;分别为CtrlZ 和 CtrlShiftZ 变量名分别为 MenuItemEditUndo 和 MenuItemEditRedo 分别添加事件 ActionLink类增加成员函数 运行效果&#xff1a;“添加…

【LMM 016】3D-LLM:将 3D 点云特征注入 LLM

论文标题&#xff1a;3D-LLM: Injecting the 3D World into Large Language Models 论文作者&#xff1a;Yining Hong, Haoyu Zhen, Peihao Chen, Shuhong Zheng, Yilun Du, Zhenfang Chen, Chuang Gan 作者单位&#xff1a;University of California, Los Angeles, Shanghai J…

操作系统----期末判断题大全

目录 操作系统----期末判断题大全 三、判断题 操作系统----期末判断题大全 三、判断题 1&#xff0e; 系统调用与程序级的子程序调用是一致的。&#xff08; &#xff09; 【答案】错 2&#xff0e; I/O控制方式不断发展的推动因素之一…

服务器的关键参数指标

服务器的关键参数指标 5.1 操作系统 5.1.1 Windows Server 重要版本 Windows NT Server 4.0、Windows 2000 Server、Windows Server 2003、Windows Serve2003 R2、Windows Server 2008、Windows Server 2008 R2 、Windows Server 2012...... Windows服务器操作系统派应用&#…

ORACLE模拟业务最小测试用例01

环境&#xff1a;RHEL6.4 Oracle 11.2.0.4 1.创建业务用户表空间2.创建业务用户3.赋予用户权限4.创建业务表5.创建索引6.业务查询SQL7.删除业务用户及数据8.删除业务表空间 1.创建业务用户表空间 假设使用了OMF管理&#xff0c;不需要明确指定数据目录(判定是否使用了OMF技…

C#-委托

委托类型 (delegate type) 表示对具有特定参数列表和返回类型的方法的引用。通过委托&#xff0c;我们能够将方法作为实体赋值给变量和作为参数传递。委托类似于在其他某些语言中的函数指针的概念&#xff0c;但是与函数指针不同&#xff0c;委托是面向对象的&#xff0c;并且是…

C# Emgu.CV4.8.0读取rtsp流分段保存

【官方框架地址】 https://github.com/emgucv/emgucv 【算法介绍】 EMGU CV&#xff08;Emgu Computer Vision&#xff09;是一个开源的、基于.NET框架的计算机视觉库&#xff0c;它提供了对OpenCV&#xff08;开源计算机视觉库&#xff09;的封装。EMGU CV使得在.NET应用程序…

模拟算法(模拟算法 == 依葫芦画瓢)万字

模拟算法 基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙 基本思想 模拟算法 依葫芦画瓢解题思维要么通俗易懂&#xff0c;要么就是找规律&#xff0c;主要难度在于将思路转换为代码。 特点&#xff1a;相对于其他算法思维&#xff0c;思路比较简单&#x…

827 最大人工岛

hard题目&#xff0c;十分困难哈&#xff0c;不是简单的岛屿套路&#xff0c;而是要经历过两次遍历&#xff0c;先一次遍历岛屿再一次遍历海洋 题目 给你一个大小为 n x n 二进制矩阵 grid 。最多 只能将一格 0 变成 1 。 返回执行此操作后&#xff0c;grid 中最大的岛屿面积…

K8S中的环境变量

官网 https://kubernetes.io/zh-cn/docs/tasks/inject-data-application/environment-variable-expose-pod-information/ 利用环境变量(env.value or env.valueFrom)配置容器应用 在 Kubernetes 中使用此类镜像启动容器时,也可以在 Pod 资源或 Pod 模板资源的定义中,为容…

AOP切面记录日志-实操

前言 记录日志的就是把很多重要的数据给记录下来&#xff0c;写到数据库中&#xff1b;可以写一个方法&#xff0c;组装好之日信息的参数穿进去&#xff0c;但这样做不是很优雅&#xff0c;因为对于日志来说&#xff0c;不是业务逻辑代码的一部分&#xff0c;不应该影响到业务代…

前端学习笔记 5:大事件

前端学习笔记 5&#xff1a;大事件 本文将学习一个示例项目&#xff08;大事件&#xff09;的前端搭建过程。 1.准备工作 1.1.创建工程 创建一个名称为big-event的 Vue3 项目&#xff0c;具体可以参考这篇文章。 1.2.安装插件 安装 ElementPlus&#xff1a; npm install…

【操作系统xv6】学习记录5--实验1 Lab: Xv6 and Unix utilities

ref:https://pdos.csail.mit.edu/6.828/2020/xv6.html 实验&#xff1a;Lab: Xv6 and Unix utilities 环境搭建 实验环境搭建&#xff1a;https://blog.csdn.net/qq_45512097/article/details/126741793 搭建了1天&#xff0c;大家自求多福吧&#xff0c;哎。~搞环境真是折磨…

分布式锁3: zk实现分布式锁5 使用中间件curator

一 curator的说明 1.1 curator的说明 curator是netflix公司开源的一个zk客户端。对Zookeeper提供的原生客户端进行封装&#xff0c;简化了Zookeeper客户端的开发量。Curator解决了很多zookeeper客户端非常底层的细节开发工作&#xff0c;包括连接重连、反复注册wathcer和Node…

算法基础之二分与前缀和 day 6

文章目录 二分第一类第二类 前缀和原题链接题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 题目分析示例代码 二分 二分法是我们在高中数学就学习过的一种思想&#xff0c;他也是一种效率较高的查找算法&#xff0c;在编写代码的过程中&#xff0…

基于SpringBoot的环保网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的环保网站,java项目。 e…

GoldenGate工作原理及应用场景

GoldenGate工作原理及应用场景 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一同探讨数据库领域中备受关注的实时数据复制技术——GoldenG…

Flink自定义函数UDF

案例用到的测试数据请参考文章&#xff1a; Flink自定义Source模拟数据流 原文链接&#xff1a;https://blog.csdn.net/m0_52606060/article/details/135436048 概述 用户自定义函数&#xff08;user-defined function&#xff0c;UDF&#xff09;&#xff0c;即用户可以根据…