解析浏览器的事件循环机制:理解JavaScript运行时的执行顺序

解析浏览器的事件循环机制:理解JavaScript运行时的执行顺序

  • 前言
  • 定义
    • 执行顺序
    • 异步任务概念:微任务、宏任务
      • 宏任务有哪些?微任务有哪些
  • 实例代码与图解

前言

因为防止在多个用户同时在浏览器中操作一个DOM节点所带来的复杂性,故JavaScript为一种单线程语言。那这种单线程语言的缺点就是同一时间内只能做一件事,这也就延申出另一个问题,如何才能确保JS稳定有序的执行呢,这里就要讲到JS的运行机制:事件循环。

定义

事件循环机制是一种在浏览器或node环境中存在的一种机制,它用来管理和协调JavaScript代码的执行顺序,保证JavaScript种的异步任务和同步任务保持正确的执行顺序。

执行顺序

1.自上而下执行
2.上层代码报错,停止执行
3.先执行同步代码,遇到异步任务,则放在任务队列中,直到同步任务都执行完后再执行异步任务。

异步任务概念:微任务、宏任务

宏任务有哪些?微任务有哪些

宏任务:整体script代码块,settimeout、setInterval、IO、UI交互事件。
微任务:promise回调函数、nextTick(它俩同时存在,先执行nextTick)
了解上述概念后,在执行顺序中的3中,任务队列概念再细化又分为宏任务和微任务,宏任务放宏任务队列中,微任务放微任务队列中。
继续说执行顺序细化。
当所有同步任务执行完成后,将异步任务中的微任务队列调回到主线程执行,执行完成后再将宏任务调回主线程执行,如此循环往复则为事件循环。

实例代码与图解

console.log(1);
setTimeout(()=>{
	console.log(2);
},0)
Promise.resolve().then(()=>{
	console.log(3);
})
console.log(4);

在这里插入图片描述
在上述代码中,我们先执行同步任务,打印出1和4,然后执行异步任务中的微任务promise.then回调函数打印3,最后执行宏任务settimeout打印2.

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

管理压力:打工人不难为打工人

写在前面 让时间回到2018年7月末: 事件地点:中国平安办公室 事件经过: 平安产品经理提出一个需求,要求APP开发人员根据用户手机壳自动调整颜色的主题。这个需求被程序员认为是不合理的。双方开始争论,情绪激动&…

【Transformer从零开始代码实现 pytoch版】(五)总架构类的实现

Transformer总架构 在实现完输入部分、编码器、解码器和输出部分之后,就可以封装各个部件为一个完整的实体类了。 【Transformer从零开始代码实现 pytoch版】(一)输入部件:embeddingpositionalEncoding 【Transformer从零开始代…

IP-guard WebServer 命令执行漏洞复现

简介 IP-guard是一款终端安全管理软件,旨在帮助企业保护终端设备安全、数据安全、管理网络使用和简化IT系统管理。在旧版本申请审批的文件预览功能用到了一个开源的插件 flexpaper,使用的这个插件版本存在远程命令执行漏洞,攻击者可利用该漏…

动作捕捉系统通过VRPN与ROS系统通信

NOKOV度量动作捕捉系统支持通过VRPN与机器人操作系统ROS通信,进行动作捕捉数据的传输。 一、加载数据 打开形影动捕软件,加载一段后处理数据。 这里选择一段小车飞机的同步数据。在这段数据里面,场景下包含两个刚体,分别是小车和…

1688商品详情API接口的使用方法、注意事项以及示例代码

1688商品详情API接口使用方法 1688商品详情API接口是1688平台提供的用于获取商品详细信息的接口。通过该接口,您可以获取到商品的ID、名称、价格、销量、评价等信息,从而进行进一步的数据分析和应用开发。本文将介绍1688商品详情API接口的使用方法、注意…

python爬虫top250电影数据

之前看到的,我改了一下,多了很多东西 import requests from bs4 import BeautifulSoup from openpyxl import Workbook from openpyxl.styles import Font import redef extract_movie_info(info):# 使用正则表达式提取信息pattern re.compile(r导演:…

react函数式组件props形式子向父传参

父组件中定义 子组件中触发回调传值 import { useState } from "react"; function Son(params) {const [count, setCount] useState(0);function handleClick() {console.log(params, paramsparamsparamsparamsparamsparams);params.onClick(111)setCount(count 1…

猫罐头怎么选择?精选的5款口碑好的猫罐头推荐!

猫罐头因其成分约80%为水分,对于不喜欢喝水的猫咪来说,正是可以用来补充水分的替代方案。 而近年来市面上也有越来越多讲究食用安全性的猫罐头,像是强调无添加多余加工品、或是不含谷物成分等的商品。但也因为种类过多,让铲屎官容…

k8s系列文章二:集群配置

一、关闭交换分区 # 临时关闭分区 swapoff -a # 永久\关闭自动挂载swap分区 sudo sed -i / swap / s/^\(.*\)$/#\1/g /etc/fstab 二、修改cgroup管理器 ubuntu 系统,debian 系统,centos7 系统,都是使用 systemd 初始化系统的。systemd 这边…

11-13 代理模式

调用者 代理对象 目标对象 代理对象除了可以完成核心任务,还可以增强其他任务,无感的增强 代理模式目的: 不改变目标对象的目标方法的前提,去增强目标方法 分为:静态代理,动态代理 静态代理 有对象->前提需要有一个类,那么我们可以事先写好一个类&a…

擎创动态 | 再获上海区政府肯定,擎创科技被评为年度优秀高新技术企业

11月6日,上海市静安区副区长张慧和市北高新集团总裁陈军一行来到擎创科技调研指导,由擎创科技高管张健和陈莹陪同交流。 陈莹女士首先向副区长一行详细介绍了擎创科技的发展现状、落地实践效益以及未来的规划布局。在公司的成长过程中,得到静…

【Unity】 场景优化策略

Unity 场景优化策略 GPU instancing 使用GPU Instancing可以将多个网格相同、材质相同、材质属性可以不同的物体合并为一个批次,从而减少Draw Calls的次数。这可以提高性能和渲染效率。 GPU instancing可用于绘制在场景中多次出现的几何体,例如树木或…

腾讯云优惠服务器有哪些?腾讯云服务器优惠券领取入口汇总

腾讯云此次推出云服务器中最实惠的2核2G服务器以每年仅需88元的超低价格为用户提供稳定可靠的计算资源。这样的价格对于个人网站、小型企业以及学生开发者来说绝对是一笔难以忽视的优惠。 腾讯云双十一领9999代金券 https://1111.mian100.cn 腾讯云新用户领2860代金券 https:…

快速拉取聚水潭单据的ETL工具

聚水潭介绍 聚水潭平台则是国内较为出名的电商ERP平台,为企业提供了便捷的销售和管理服务,专注于提高交易效率,但是如何将数据快速同步到其他系统一直是很多企业的痛点。 ETLCloud数据集成平台提供了丰富的数据分析工具和算法模型&#xff…

Nat. Med. | 成年人的城市生活环境对心理健康的影响

今天为大家介绍的是来自Jiayuan Xu和Gunter Schumann团队的一篇论文。城市居民暴露于许多可能相互结合和相互作用的环境因素,这些因素可能影响心理健康。目前尚未有工作尝试建模城市生活的复杂实际暴露与大脑和心理健康之间的关系,以及这如何受遗传因素调…

js设置图片放大缩小拖动

效果: 思路: 在外层box进行相对定位relative,img设置绝对定位absolute;通过监听滚轮事件(wheel),设置样式缩放中心点(transformOrigin)和缩放转换(transform);获取到图片大小和位置,设置对应图片宽度高度和top、left偏移;鼠标按下事件(mousedown)和鼠标移动事…

AI机器人软件定制流程

一、项目概述 AI机器人软件定制流程是根据客户的需求,定制开发一款具有人工智能功能的机器人软件。本方案将详细介绍AI机器人软件定制的整个流程,包括需求分析、设计、开发、测试和交付等环节。 二、需求分析 在定制AI机器人软件之前,需要…

pmp考试是智商税吗,是一场持久的割韭菜战吗?

考试只是考试,是不是智商税要看人,跟风考,考了不用,那真的就是智商税,被割韭菜。 那么,什么人适合考PMP? 1、有项目管理实践经验的人:PMP是基于项目管理实践经验的认证考试&#x…

Python数据结构:元组(Tuple)详解

1.介绍和基础操作 Python中的元组(Tuple)是不可变有序序列,可以容纳任意数据类型(包括数字、字符串、布尔型、列表、字典等)的元素,通常用圆括号() 包裹。与列表(List)类似&#xff…