浏览器 事件循环 从 宏队列和微队列 到 延时队列、交互队列、微队列 | js 执行机制 异步程序

已于 2023-11-07 12:59:05 修改
阅读量876 收藏 3
点赞数 2
分类专栏： web前端 文章标签： javascript 前端 java
于 2021-08-06 17:52:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_fole_you/article/details/119137538
版权

同步程序执行完，再执行异步。会出现定时器不准的情况
js 会阻塞渲染 是因为它们运行在同一个线程上

JS 是单线程。因为js只能运行在浏览器的渲染主线程中，而渲染主线程只有一个，而渲染主线程承担着非常的多的事情 , 渲染页面 , 执行js啥啥的 都在里面执行

浏览器的渲染进程 采用何种方式处理定时器任务、交互任务，任务执行顺序的依据 —— 事件循环

浏览器的进程模型

操作系统 进程 线程

随着浏览器功能的丰富。浏览器几乎成为一个“操作系统”
浏览器是多进程多线程应用程序

  1. 浏览器进程

主要负责：浏览器窗口界面、用户交互、子进程（网路、渲染）管理等
2. 网络进程
加载网络资源
3. 渲染进程 （标签页）

渲染进程

渲染主线程
执行HTMl、CSS、JS代码

在这里插入图片描述
线程的任务调度 —— 维护一个消息队列 （任务队列）
这个维护的方式被称为 消息循环 或 事件循环

事件循环

官方叫 event loop 浏览器实现叫 message loop
参考博客
参考视频

运行栈 存储同步任务

任务队列 存储异步任务，存在多个队列，不同队列存在优先级差异

计时器会在到点时，将任务插入到任务队列中

在这里插入图片描述

  1. 任务没有优先级，队列先进先出
  2. 队列有多条，存在优先级

早期分为 微队列和宏队列
在这里插入图片描述
先执行微任务，后执行宏任务

随着浏览器的复杂度急剧提升 W3C不再使用宏队列的说法
提出了任务类型的说法：
一种类型只能在一个队列中，一个队列可包含多种类型。
队列优先级可由浏览器自行决定，
但必须单独一个微队列 绝对优先

在目前chrome的实现中 至少包含了下面的队列：

  • 延时队列 : 用于存放计时器到达后的回调任务 , 优先级中
  • 交互列队 : 用于存放用户操作后产生的事件处理任务 , 优先级高
  • 微队列 : 用户存放需要最快执行的任务 优先级最高

在这里插入图片描述
在这里插入图片描述

一些方法在事件循环中的执行顺序
在这里插入图片描述

在这里插入图片描述

异步是如何实现的？

为什么需要异步？
防止渲染被一些任务阻塞

在这里插入图片描述
单个任务执行事件较长，也会造成等待

js计时器为什么不能做到准确计时？

在这里插入图片描述

在这里插入图片描述

海胆Sur
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用Redis实现延时任务的解决方案
12-16
最近在生产环境刚好遇到了延时任务的场景，调研了一下目前主流的方案，分析了一下优劣并且敲定了最终的方案。这篇文章记录了调研的过程，以及初步方案的实现。 候选方案对比 下面是想到的几种实现延时任务的方案，总结了一下相应的优势和劣势。 方案 优势 劣势 选用场景 JDK 内置的延迟队列 DelayQueue 实现简单 数据内存态，不可靠 一致性相对低的场景 调度框架和 MySQL 进行短间隔轮询 实现简单，可靠性高 存在明显的性能瓶颈 数据量较少实时性相对低的场景 RabbitMQ 的 DLX 和 TTL，一般称为 死信队列 方案 异步交互可以削峰 延时的时间长度不可控，如果数
delay:javascript的延迟队列
07-08
Delay - 延时控制 连续 setTimeout： setTimeout(doSomething, 1000); setTimeout(doSomething, 2000); setTimeout(doSomething, 3000); 的替代方案。 var delay = new Delay(); delay.add(1000, doSomething); delay.add(2000, doSomething); delay.add(3000, doSomething); delay.run(onFinishAll, context); 优势 全程单个 setTimeout 执行 执行前支持根据 taskId 删除已添加任务 支持全局暂停, 继续, 销毁任务的操作 简要文档 1. 开始 new Delay var delay = new Delay 初始化一个 Delay 实例。
Javascrip 事件循环，就看这个，超详细解读
haoduoyu2099的博客
01-17 200
Javascrip 事件循环，就看这个，超详细解读
浏览器事件循环-任务队列及宏任务与微任务概念介绍
wudunkai的博客
05-13 699
JavaScript为什么是单线程的？ 浏览器js的作用是操作DOM，决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ 任务队列 单线程就意味着所有任务需要排队，如果因为任务cpu计算量大还好，但是I/O操作cpu是闲着的。所以js就设计成了一门异步的语言，不会做无畏的等待。任务可以分成两种，一种是同步任务，另一种是异步任务。 （1）所以同步任务都在主线程上执行，形成
JS执行过程与浏览器渲染原理——消息队列与事件循环
最新发布
qq_51574759的博客
10-26 547
在写 JS 的时候，你有没有想过 JS 是按照什么顺序执行的？浏览器是怎么执行 JS 代码的？为什么有时候代码没有按照我们认为的顺序执行？JS 作为解释型脚本语言，怎么能用上定时器、回调函数之类的操作？ 其实浏览器背后隐藏着一个精密而复杂的机制，那就是事件循环。这个机制使得网页能够响应用户的操作，同时保持了界面的流畅性和高效性。事件循环是现代前端开发中至关重要的概念之一，它负责管理各种异步操作，例如用户输入、网络请求和定时器等。这是浏览器层面的，做前端必须知道的东西。
JavaScript 异步之宏队列与微队列
hzg_hou的博客
06-06 248
微队列永远是先执行的，如果微队列里有宏队列，那么将这个宏队列放到宏队列中进行排队等待。结果：1 7 2 3 8 4 6 5 0。先把所有的同步执行完再看微队列里的。执行结果为：25341。
JS事件循环机制，从浏览器进程模型、主线程工作模式、各种队列执行顺序等全面讲解
dabaooooq的博客
04-01 1100
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。
浅析浏览器渲染进程主线程中的事件循环、消息队列和异步的关系
Code_King006的博客
04-18 586
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程。每个 应用有自己专属的进程，进程之间是相互隔离的，但是在双方同意的情况下，可以进行通信。有了进程后，就有了内存空间，线程可以理解为内存空间中运行代码的地方需要注意的是，一个进程至少得有一个线程，在进程开启后会自动创建一个线程来运行代码，该线程就被称为主线程如果主线程结束，整个程序就已经结束了。
浏览器事件循环相关概念及其理解
qaz1196399230的博客
03-12 137
浏览器事件循环相关概念及其理解
JS异步宏队列与微队列原理区别详解
10-15
主要介绍了JS异步宏队列与微队列原理区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS异步宏队列微队列原理详解
10-14
主要介绍了JS异步宏队列微队列原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
事件循环，还在微任务宏任务？过时了，快看看新版浏览器事件循环event loop(message loop)
普歌-高禄
09-15 824
程序运⾏需要有它⾃⼰专属的内存空间，可以把这块内存空间简单的理解为进程。：有了进程，就可以执行程序代码了，一个进程至少包含一个线程，这个线程称之为主线程。如果想要多块代码同时运行，
浏览器事件队列及微任务和宏任务
yanhang0227的博客
06-07 593
一、JS中的事件（任务）队列 Event Queue 浏览器从服务器获取到代码后，浏览器会开辟一个GUI渲染线程，GUI从上到下开始执行代码。 浏览器是多线程的，包含GUI渲染线程、HTTP网络请求线程（并发数6-7）、事件监听\定时器监听。但JS代码的运行是单线程的 console.log(1); setTimeout(() => { // 任务1、进入事件队列Event Queue console.log(2); }, 1000); console.log(3); setTimeout(() =
Redis实现延时任务
总结分享
02-22 1689
1. 生成订单30分钟未支付，则自动取消 2. 30分钟未回复，则结束会话
浏览器的消息队列和事件循环机制（宏任务和微任务）
jieyucx的博客
09-01 592
浏览器中的消息队列和事件循环机制是一种用于处理异步任务的方式。浏览器需要能够同时处理多个任务，如网络请求、用户交互等。为了避免任务的阻塞，浏览器使用消息队列来管理任务的执行顺序，并通过事件循环机制来处理任务的执行。fill:#333;color:#333;color:#333;fill:none;浏览器渲染引擎JS引擎消息队列事件循环执行上下文工作原理如下图所示：fill:#333;color:#333;color:#333;fill:none;
浏览器 - 事件循环机制详解
qq_40147756的博客
08-16 1398
浏览器进程模型，渲染主线程，事件循环
2023前端实际面试问题
m0_56347363的博客
04-11 331
A公司一面1盒模型2.块级元素水平垂直居中的方法3.js基本数据类型null空值,undefined未定义String Number，Object4.原型链?_proto 和prototype的区别?5，闭包6.事件循环，（宿主环境）node、浏览器的事件循环的区别7.为什么要用ts?类型的定义，和编译器的代码校验，可使js代码更加规范，更具可读性，更容易排查错误TS是JS的超集和延伸，TS可使用JS的库和代码TS兼容性强，支持ES6788webpack常用优化手段。
前端：项目 文件 文件夹 命名规范
海胆的博客
11-30 7765
参考博客 项目命名: 全部以小写字母命名，以中划线分割。如my-project。   目录命名: 全部以小驼峰命名法，除第一个单词之外，其他单词首字母大写。如myDir。 组件文件命名: 遵循 Pascal 命名法（大驼峰），例如 AddressPicker.vue。 JS/TS 文件: 以小写字母命名，多个单词以下划线连接，例如 util.js、util_helper.js。 HTML/CSS文件命名: 确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号。如m
js循环机制、宏任务和微任务、事件队列
07-27
JS的循环机制是指如何处理事件循环中的任务。在JS中，事件循环是一种机制，用于处理异步操作和事件处理。循环机制确保任务按照正确的顺序执行，以保证代码的正确性和性能。 在循环机制中，有两种类型的任务：宏任务（macro-task）和微任务（micro-task）。宏任务包括整体代码块、setTimeout、setInterval等，而微任务包括Promise、MutationObserver、process.nextTick等。 当代码执行时，会首先执行当前代码块中的同步任务，然后执行微任务队列中的所有微任务。接下来，会从宏任务队列中选择一个任务执行，直到宏任务队列为空。然后，再次执行所有微任务，以此类推。 事件队列是用来存储待执行的任务的数据结构。每个宏任务或微任务都会被添加到事件队列中。当事件循环开始时，会从事件队列中依次取出任务并执行。 需要注意的是，微任务的优先级高于宏任务。也就是说，在执行完当前宏任务后，会立即执行所有微任务，然后再执行下一个宏任务。这样可以确保微任务能够尽早地被执行，避免出现不必要的延迟。 总结一下： - 循环机制确保异步任务按照正确的顺序执行。 - 宏任务包括整体代码块、setTimeout、setInterval等。 - 微任务包括Promise、MutationObserver、process.nextTick等。 - 事件队列用来存储待执行的任务。 - 微任务优先级高于宏任务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值