Javascript事件循环流程分析

基础概念

事件循环(Event Loop):事件循环是JavaScript运行时环境中的一个循环机制,它不断地检查调栈用和任务队列。当调用栈为空时,事件循环会首先检查微任务队列,并执行其中的所有任务。只有当微任务队列为空时,事件循环才会检查任务队列,并执行其中的任务。

  • 同步代码首先执行。
  • 宏任务和微任务分别被添加到各自的队列中。
  • 执行栈为空后,先执行所有微任务,再执行一个宏任务。
  • 事件循环不断重复这个过程,直到没有任务需要执行。

调用栈

为什么用栈?想想函数内调用其他函数,要等内部函数执行完成才继续执行剩余的外部函数。

    在JavaScript中,调用栈(Call Stack)是一个LIFO(后进先出)结构,用于管理函数调用及其执行上下文。每当一个函数被调用时,一个新的执行上下文会被创建并推入调用栈中;当函数执行完毕后,其执行上下文会从调用栈中弹出。

以下是调用栈内容如何加入和移除的详细过程:

  1. 全局执行上下文
    • JavaScript代码开始执行时,会首先创建一个全局执行上下文(Global Execution Context)。这个上下文在整个程序的生命周期内始终存在,并且作为调用栈的底部。
  2. 函数调用
    • 当一个函数被调用时,会创建一个新的执行上下文(Function Execution Context),并将其推入调用栈中。
    • 每个执行上下文包含以下三个主要部分:
      • 变量对象(Variable Object, VO):存储变量和函数声明。在ES6之后,这个概念被更现代的词法环境(Lexical Environment)和变量环境(Variable Environment)所替代。
      • 作用域链(Scope Chain)保证对上级作用域中的变量和函数的访问
      • this:函数被调用时绑定的this值。
  3. 执行上下文创建和推入调用栈
    • 创建一个新的执行上下文。
    • 将这个新的执行上下文推入调用栈。
    • 执行上下文中的变量和函数声明会被提升(hoisting)。
    • 如果函数中有参数,参数也会被初始化。
    • this值被确定。
  4. 函数执行
    • 执行函数体内的代码。
    • 如果函数内部调用了其他函数,那么会重复步骤2和3,为被调用的函数创建新的执行上下文并推入调用栈。
  5. 函数完成
    • 当函数执行完毕后,其执行上下文会从调用栈中弹出。
    • 如果函数返回了一个值,这个值会被传递给调用者。
  6. 调用栈为空
    • 当调用栈为空时,JavaScript引擎认为当前代码执行完毕,可能会开始执行事件循环中的任务(如异步回调)。
​
function outerFunction() {console.log('Outer function start');function innerFunction() {console.log('Inner function start');// Some code...console.log('Inner function end');}innerFunction();console.log('Outer function end');
}outerFunction();​
调用栈的变化:
  1. 全局执行上下文被推入调用栈。
  2. outerFunction 被调用,创建 outerFunction 的执行上下文并推入调用栈。
  3. outerFunction 打印 Outer function start
  4. innerFunction 被调用,创建 innerFunction 的执行上下文并推入调用栈。
  5. innerFunction 打印 Inner function start 和 Inner function end
  6. innerFunction 执行完毕,其执行上下文从调用栈中弹出。
  7. outerFunction 继续执行,打印 Outer function end
  8. outerFunction 执行完毕,其执行上下文从调用栈中弹出。
  9. 全局执行上下文始终是调用栈的底部,此时调用栈为空。

宏任务和微任务

  •  微任务队列:它专门用于处理如Promiseresolvereject回调、async/await、和MutationObserver等微任务。微任务的优先级高于宏任务。
  • 宏任务队列:用来存储准备好执行的回调函数,比如setTimeoutsetInterval的回调

Promise.resolve().then(() => {console.log('outerPromise');const innerTimer = setTimeout(() => {console.log('innerTimer')}, 0)
});const timer1 = setTimeout(() => {console.log('outerTimer')Promise.resolve().then(() => {console.log('innerPromise')})
}, 0)
console.log('run');

JavaScript代码示例

javascript复制代码

console.log('Script start');setTimeout(() => {
console.log('Timeout callback');
}, 0);Promise.resolve().then(() => {
console.log('Promise callback');
});console.log('Script end');

事件循环执行过程描述

  1. 全局执行上下文创建
    • 当JavaScript引擎开始执行这段脚本时,它会首先创建一个全局执行上下文。这个上下文包含了全局对象(在浏览器中通常是window对象)以及脚本中声明的所有变量和函数。
  2. 同步代码执行
    • 引擎开始执行全局执行上下文中的同步代码。
    • 首先,打印出'Script start'
  3. 宏任务队列(Macro Task Queue)
    • 当遇到setTimeout时,JavaScript引擎不会立即执行其回调函数,而是将回调函数包装成一个宏任务,并将其添加到宏任务队列中。setTimeout的延迟时间设置为0,但这并不意味着回调函数会立即执行;它只会在下一个事件循环迭代中被执行。
  4. 微任务队列(Micro Task Queue)
    • 当遇到Promise.resolve().then(...)时,then方法中的回调函数会被包装成一个微任务,并添加到微任务队列中。微任务队列中的任务会在当前执行栈为空后、下一个宏任务执行之前被立即执行。
  5. 继续同步代码执行
    • 接下来,打印出'Script end'
    • 此时,全局执行上下文中的同步代码已经执行完毕,执行栈为空。
  6. 微任务执行
    • 在执行下一个宏任务之前,JavaScript引擎会检查微任务队列。由于我们有一个微任务(即Promise的回调函数),引擎会执行这个微任务。
    • 打印出'Promise callback'
  7. 宏任务执行
    • 微任务队列为空后,JavaScript引擎会从宏任务队列中取出下一个任务来执行。在这个例子中,宏任务队列中有一个由setTimeout添加的回调函数。
    • 执行这个回调函数,并打印出'Timeout callback'
  8. 事件循环继续
    • 如果此时没有其他宏任务或微任务需要执行,事件循环可能会等待新的异步事件(如用户输入、网络请求等)来触发新的任务添加到任务队列中。
    • 一旦有新的事件触发,相应的回调函数会被添加到宏任务队列或微任务队列中,并等待事件循环的下一个迭代来执行。

 

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

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

相关文章

解决使用Golang的email库发送qq邮件报错short response,错误类型为textproto.ProtocolError

问题阐述 使用email库发送QQ邮件,采用587端口: package mainimport ("fmt""net/smtp""github.com/jordan-wright/email" )func SendEmail(sendTo string, subject string, body string) (err error) {e : email.NewEmai…

题目:Wangzyy的卡牌游戏

登录 - XYOJ 思路: 使用动态规划,设dp[n]表示当前数字之和模三等于0的组合数。 状态转移方程:因为是模三,所以和的可能就只有0、1、2。等号右边的f和dp都表示当前一轮模三等于k的组合数。以第一行为例:等号右边表示 j转…

【支付行业-支付系统架构及总结】

记得第一次看埃隆马斯克(Elon Musk)讲第一性原理的视频时,深受震撼,原来还可以这样处理复杂的事务。这篇文章也尝试化繁为简,探寻支付系统的本质,讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付…

模块化沙箱:深信达如何为数据安全提供全方位保护

在数字化时代,网络安全已经成为企业和个人不可忽视的重要议题。随着网络攻击手段的日益复杂和多样化,传统的安全防护措施已经难以应对日益严峻的安全挑战。在这样的背景下,模块化沙箱技术应运而生,成为网络安全领域的新宠。今天&a…

基于单片机的观赏类水草养殖智能控制系统的设计(论文+源码)

1总体设计 通过需求分析,本设计观赏类水草养殖智能控制系统的总体架构如图2.1所示,为系统总体设计框图。系统采用STM32单片机作为系统主控核心,利用DS18B20温度传感器、TDS传感器、CO2传感器、光敏传感器实现水草养殖环境中水温、CO2浓度、T…

基于Jeecgboot3.6.3vue3的flowable流程增加online表单的审批支持(四)online表单字段控制

更多技术支持与服务请加入我的知识星球或加我微信,名称:亿事达nbcio技术交流社区https://t.zsxq.com/iPi8F 1、首先需要配置操作规则,如下: 配置这个节点的一些字段属性,上面就是有两个隐藏了,一个可以编辑,上面的规则采用json格式保存到数据库里 2、取出这些规则 //根…

分享:文本转换工具:PDF转图片,WORD转PDF,WORD转图片

前言 鉴于网上大多数在线转换工具要么需要收费,要么免费后但转换质量极差的情况,本人开发并提供了PDF转图片,WORD转PDF,WORD转图片等的文本转换工具。 地址 http://8.134.236.93/entry/login 账号 账号:STAR001&a…

星环大数据平台--TDH部署

1.1 准备一台虚拟机 正常安装一台新的虚拟机, 内存16G,cpu8核,硬盘50G 1.2 安装前系统配置改动 修改/etc/hosts文件,确保hostname该文件包含节点的hostname和IP地址的映射关系列表。 hostname由数字、小写字母或“-”组成&am…

Visual Studio2022版本的下载与安装

1-首先打开微软的官网,下面就是链接 下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux免费下载 Visual Studio IDE 或 VS Code。 在 Windows、Mac 上试用 Visual Studio Professional 或企业版。https://visualstudio.microsoft.com/zh-hans/downloads/?…

如何去除图片水印?快来试试这4种图片去水印方法!

去除图片水印是一项普遍存在的图像处理需求,它旨在消除水印对图片视觉效果的干扰,让我们能够更自由、更美观、更专业地使用图片资源。接下来,我们将介绍四种有效的去除图片水印的方法和工具,它们各自具有独特的优势和适用场景。 方…

A day a tweet(sixteen)——The better way of search of ChatGPT

Introducing ChatGPT search a/ad.及时的/及时地 ChatGPT can now search the web in a much better way than before so you get fast, timely a.有关的(relative n.亲戚,亲属;同类事物 a.比较的;相对的) answers with link…

selenium+chromedriver下载与安装

安装selenium 使用pip安装selenium: pip install selenium安装成功: 安装WebDriver 根据你使用的浏览器下载相应的 WebDriver。 Chrome:下载地址Firefox:下载地址Edge:下载地址Safari:下载地址 1、c…

跨子网的WinCC客户机/服务器如何实现通讯?

为了更有效地利用有限的IP地址,为了减少广播对网络带宽的占用从而提高带宽,为了实现在不同子网中应用不同的安全策略从而提高网络安全性,现场通常要求划分子网,将安全等级要求不同的计算机安置在不同的子网中,分开管理…

Docker部署Oracle 11g

1,拉取镜像: sudo docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11gsudo docker images 2,启动一个临时容器,用于拷贝数据库文件,挂载到宿主主机,使数据持久化: sudo docke…

中安OCR电子行驶证、驾驶证识别,助力便捷出行与智慧交通

随着数字化技术在各行各业的深入应用,交通管理领域也迈入了新的时代。OCR电子行驶证和电子驾驶证的推出,不仅提升了车辆及驾驶证件管理的效率,更大大方便了车主出行。电子证件的普及,使得交通管理从“实体化”逐渐走向“数字化”&…

[CKS] K8S ServiceAccount Set Up

最近准备花一周的时间准备CKS考试,在准备考试中发现有一个题目关于Rolebinding的题目。 Question 1 The buffy Pod in the sunnydale namespace has a buffy-sa ServiceAccount with permissions the Pod doesn’t need. Modify the attached Role so that it onl…

如何找到系统中bert-base-uncased默认安装位置

问题: 服务器中无法连接huggingface,故需要自己将模型文件上传 ubuntu 可以按照这个链接下载 Bert下载和使用(以bert-base-uncased为例) - 会自愈的哈士奇 - 博客园 里面提供了giehub里面的链接 GitHub - google-research/be…

.NET 黑名单上传 突破WAF防护的SoapShell (免杀版)

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

vue项目删除无用的依赖

1.安装依赖检查工具 npm i depcheck2.查看无用的依赖 depcheck3.手动删除pageage.json中的无用的依赖(如果有sass和sass-loader不要删,会引起项目报错) 4.全部删除完成之后,删除package-lock.json文件,删除node_mod…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代,抖音电商以其独特的魅力,成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中,成都睿明智科技有限公司犹如一艘稳健的航船,引领着无数企业驶向成功的彼岸。今天,就让我们一起揭开成…