解密JavaScript的异步机制:打破单线程限制,提升性能与用户体验

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

 

目录

一、JavaScript的异步编步机制

二、事件循环(Event Loop)和任务队列(Task Queue)

三、宏任务和微任务

四、requestAnimationFrame

五、Promise的发展


一、JavaScript的异步编步机制

在了解JavaScript的异步机制之前,我们首先需要理解JavaScript是一种单线程语言。单线程就意味着所有的任务需要按照顺序一次执行,如果前一个任务没有完成,后一个任务就无法开始。这个特性在执行大量或耗时任务时可能会导致阻塞或者界面卡死,这显然是不可取的。

为了解决这个问题,JavaScript引入了异步编程的机制。简单地说,异步就是你现在发出了一个“命令”,但是并不等待这个“命令”完成,而是继续执行下一个“命令”。只有在“听到”之前的那个“命令”完成了的消息时,才会回过头来处理这个“命令”的结果。这就是所谓的异步编程。

二、事件循环(Event Loop)和任务队列(Task Queue)

这种异步的机制是如何实现的呢?关键在于事件循环(Event Loop)和任务队列(Task Queue)。

事件循环是 JavaScript 内部的一个处理过程,系统会在此处不断地循环等待,检查任务队列中是否有任务,如果有,就处理它。

而任务队列,就是一个存储待处理任务的队列,当我们使用 setTimeout、setInterval、ajax等API时,实际上是向任务队列中添加了一个任务。

当主线程空闲时(也就是同步任务都执行完毕),便会去看任务队列里有没有任务,如果有,便将其取出执行;没有的话,则继续等待。

这个模型可以简单地用下面的代码表示:

while (true) {let task = taskQueue.pop();execute(task);
}

三、宏任务和微任务

在任务队列中,任务被分为两类:宏任务(MacroTask)和微任务(MicroTask)。两者的区别在于,宏任务在下一轮事件循环开始时执行,微任务在本轮事件循环结束时执行。这意味着微任务的优先级高于宏任务。

常见的宏任务有:script全文(可以看作一种宏任务)、setTimeout、setInterval、setImmediate(Node.js 环境)、I/O、UI渲染。

常见的微任务有:Promise、process.nextTick(Node.js环境)、MutationObserver(html5新特性)。

事件循环的顺序,决定了 JavaScript 代码的执行顺序。过程如下:

  • 执行同步代码,这属于宏任务
  • 执行栈为空,查询是否有微任务需要执行
  • 执行所有微任务
  • 必要的话渲染UI
  • 然后开始下一轮 Event loop,执行宏任务中的异步代码

代码示例如下:

console.log('script start');  // 宏任务setTimeout(function() {console.log('setTimeout');  // 宏任务
}, 0);Promise.resolve().then(function() {console.log('promise1');    // 微任务
}).then(function() {console.log('promise2');    // 微任务
});console.log('script end');    // 宏任务

输出顺序为:script start -> script end -> promise1 -> promise2 -> setTimeout。这是因为JavaScript执行机制决定了微任务比宏任务优先执行。

四、requestAnimationFrame

requestAnimationFrame是一个优化动画效果的函数,也有它在事件循环中的位置。

requestAnimationFrame 的调用是有频率限制的,在大多数浏览器里,这个频率是60Hz,也就是说,每一次刷新间隔为1000/60≈16.7ms。requestAnimationFrame 的执行时机是在下一次重绘之前,而不是立即执行。

requestAnimationFrame 的优点是由系统来决定回调函数的执行时机。如果系统忙到一定程度,可能会两次“刷新”之间多次执行回调函数,这时就可以省略掉一些回调函数的执行。这种机制可以有效节省 CPU 开销,提高系统的性能。

requestAnimationFrame 的位置在事件循环中的具体位置是视浏览器的实现而定,但一般来说,它在宏任务执行完,渲染之前,这使得其可以获取到最新的布局和样式信息。

五、Promise的发展

Promise 对象代表一个异步操作的最终完成(或失败)及其结果值。一个 Promise 处于以下状态之一:

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

一个 promise 必须处于一种状态:fulfilled、rejected 或 pending。一个 promise 的状态在 settle 之后就不能再改变。

Promise起初是由社区提出并实现的,最早的版本是由 Kris Kowal 提出的 Q 库,后来被 ES6 正式接受,并成为了浏览器的原生对象。

Promise 主要解决了两类问题:

  • 异步操作的一致性问题:无论异步操作是同步完成还是异步完成,使用 Promise 对象的 then 方法都可以以同样的方式进行处理。
  • 回调地狱问题:回调地狱指的是多层嵌套的回调函数,导致代码难以维护和理解。Promise 可以通过链式调用的方式,解决回调地狱问题。

我们可以通过下面的代码示例来看一下 Promise 是如何工作的:

let promise = new Promise(function(resolve, reject) {// 异步处理// 处理结束后、调用resolve 或 reject
});promise.then(function(value) {// success
}, function(error) {// failure
});

Promise 的状态一旦改变,就会一直保持那个状态,不会再次改变。这个特性可以让我们有序地处理异步操作的结果,避免出现复杂的状态判断。

以上是关于 JavaScript 中异步编程、事件循环、任务队列、宏任务、微任务,以及requestAnimationFrame在事件循环的位置,Promise 的发展和如何解决回调地狱的详细介绍。对于 JavaScript 的异步编程机制,我们应该有了全面深入的了解。

 

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧

 

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

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

相关文章

剑指offer(C++)-JZ50:第一个只出现一次的字符(算法-其他)

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 题目描述: 在一个长为 字符串中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分…

SpringBoot面试题7:SpringBoot支持什么前端模板?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:SpringBoot支持什么前端模板? Spring Boot支持多种前端模板,其中包括以下几种常用的: Thymeleaf:Thymeleaf是一种服务器端Java模板引擎,能够…

SSM - Springboot - MyBatis-Plus 全栈体系(三十)

第七章 MyBatis-Plus MyBatis-Plus 高级用法:最优化持久层开发 一、MyBatis-Plus 快速入门 1. 简介 版本:3.5.3.1MyBatis-Plus (opens new window)(简称 MP)是一个 MyBatis (opens new window) 的增强工具,在 MyBa…

上海亚商投顾:沪指震荡调整跌 减肥药、华为概念股持续活跃

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 市场情绪 沪指上个交易日低开后震荡调整,深成指、创业板指盘中跌超1%,宁德时代一度跌超3%&#xff…

高效工具类软件使用

高效工具类软件使用 目录概述需求: 设计思路实现思路分析1.Leanote2.Obsidian 的使用 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for…

面向红队的自动化引擎工具

gogo 介绍 面向红队的、高度可控的可拓展的自动化引擎。特征如下: 自由的端口配置 支持主动/主动指纹识别 关键信息提取,如标题、证书以及自定义提取信息的正则 支持nuclei poc,poc目录:https://chainreactors.github.io/wiki/…

阿里云云服务器实例使用教学

目录 云服务器免费试用 详细步骤 Xshell 远程连接 云服务器免费试用 阿里云云服务器网址:阿里云免费试用 - 阿里云 详细步骤 访问阿里云免费试用。单击页面右上方的登录/注册按钮,并根据页面提示完成账号登录(已有阿里云账号)…

torch.cat 使用小节

torch.cat 使用小节 torch.cat 要求在所指定拼接维度之外的所有维度都要匹配,例如 import torch v1 torch.tensor([[1, 2, 3], [4, 5, 6], [4, 5, 6]]) # 3*3 v2 torch.tensor([[3, 6, 8]]) # 1*3 torch.cat([v1, v2], dim1)运行之后会报错 Sizes of tensors…

【网络安全 --- win10系统安装】win10 系统详细安装过程(提供资源)

一,资源下载 百度网盘镜像下载地址链接: 百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.ba…

webrtc快速入门——使用 WebRTC 拍摄静止的照片

文章目录 使用 getUserMedia() 拍摄静态照片HTML 标记JavaScript 代码初始化startup() 函数获取元素引用获取流媒体 监听视频开始播放处理按钮上的点击包装 startup() 方法 清理照片框从流中捕获帧 例子代码HTML代码CSS代码JavaScript代码 过滤器使用特定设备 使用 getUserMedi…

RabbitMQ内容

RabbitMQ是一款开源的消息中间件,支持多个消息协议,包括AMQP、STOMP、MQTT等,它的主要功能是将分散的应用程序连接在一起,以便它们可以相互通信,从而构建可靠的、高效的分布式系统。 RabbitMQ的基础概念包括&#xff…

Vue中如何处理表单数据的双向绑定和验证

在前端开发中,表单是非常常见的交互组件之一。为了实现表单数据的双向绑定和验证,Vue提供了一些强大的功能和方法。以下将详细介绍Vue中如何处理表单数据的双向绑定和验证,并提供具体的代码示例,以帮助读者更好地掌握这方面的知识…

单例模式之「双重校验锁」

单例模式之「双重校验锁」 单例模式 单例即单实例,只实例出来一个对象。一般在创建一些管理器类、工具类的时候,需要用到单例模式,比如JDBCUtil 类,我们只需要一个实例即可(多个实例也可以实现功能,但是增…

(ubuntu) 安装JDK

文章目录 前言参看java版本的命令:安装jdk命令安装jps关闭防火墙:查看端口占用:(坑)ubuntu上Mysql默认标明 区分大小写 前言 提示:常以为人是一个容器,盛着快乐,盛着悲哀。但是人不…

使用 Tkinter Canvas 小部件添加放大镜功能?

一、说明 据我所知,内置的 Tkinter Canvas 类比例不会自动缩放图像。如果您无法使用自定义小部件,则可以缩放原始图像并在调用缩放函数时将其替换在画布上。 二、实现图像放大镜技术细节 我如何将放大和缩小添加到以下脚本中,我想将其绑定到…

初阶数据结构-常见的排序算法

排序 排序的概念常见的排序算法常见排序算法的实现数组的打印 插入排序直接插入排序的实现希尔排序( 缩小增量排序 )希尔排序的实现 交换排序冒泡排序冒泡排序的实现选择排序选择排序的实现堆排序堆排序的实现快速排序快速排序非递归 归并排序归并排序的递归实现归并排序的非递…

Vue 3.0 使用的 diff 算法相比 Vue 2.0 中的双端比对有什么优势?

1、最长递增子序列算法 Vue 3.0 的 diff 算法采用了最长递增子序列算法,能够减少不必要的 DOM 操作,提升性能。 2、静态标记 Vue 3.0 中,编译器会对静态节点进行标记,在更新时可以直接跳过这些静态节点,减少 DOM 操作…

多个子div在父中垂直居中

在一个div下&#xff0c;有多个子div&#xff0c;且子div都是水平垂直居中 <template><div><div class"far"><!-- 注意需要多包裹一层 --><div><div class"son1">1</div><div class"son2">222…

MATLAB-文件自动批量读取文件,并按文件名称或时间顺序进行数据处理

我在处理文件数据时&#xff0c;发现一个一个文件处理效率太低&#xff0c;因此学习了下MATLAB中自动读取特定路径下文件信息的程序&#xff0c;并根据读取信息使用循环进行数据处理&#xff0c;提高效率&#xff0c;在此分享给大家这段代码并给予一些说明&#xff0c;希望能为…

Open3D 进阶(13)使用PCA将点云投影到主成分空间

目录 一、算法原理<font color="#dd00dd">1、三维点云投影二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。爬虫网站自重。 一、算法原理 1、三维点云投影 p r o j