JS运行机制、Event Loop

1、JS运行机制

   JS最大的特点就是单线程,所以他同一时间只能做一件事情。使单线程不阻塞,就是事件循环。

在JS当中分为两种任务:

  • 同步任务:立即执行的任务,一般放在主线程中(主执行栈)。
  • 异步任务:异步执行的任务,进入任务队列(task queue)。只有任务队列通知主线程,某个异步任务可以执行力,该任务才会进入主线程执行。

事件循环就是不断重复上面两步骤、异步与同步任务执行如下。

2、宏任务与微任务

        异步任务又分为宏任务和微任务。

常见的微任务有:

  • Promise.then
  • Async/Await
  • MutationOberver
  • Object.oberver
  • process.nextTick

常见的宏任务有:

  • script(可以理解其为外层同步代码)
  • setTimeout/setInterval
  • UI
  • postMessage\MessageChannel
  • I/O
  • setImmediate

他的运行机制是:

  1. 执行一个宏任务、如果遇到微任务就将他放到微任务的队列中
  2. 执行当前宏任务后,检查微任务事件队列,将其执行完毕
  3. 循环上面的步骤如下图

3、Async/Await

     async是异步的意思,await可以裂解为async wait。所以可以理解为:

  • async:声明一个异步的方法
  • await:等待异步方法执行

Async/Await相对于Promise的优势:

  • Promise虽然拜托了地狱回调,但是他很的链式调用也会带来阅读负担
  • Async/Await是异步函数但是几乎同步的写法,非常优雅
  • Async/Await错误处理友好,可以使用成熟的try/catch
  • 调试友好,Promise由于没有代码块,不能反回表达式的箭头函数中设置断点
  1. async ,awit命令后面返回Promise对象。如果不是对象直接返回对应的值。
function f() {return Promise.resolve('TEST');
}// asyncF is equivalent to f!
async function asyncF() {return 'TEST';
}
  1.  不管await后面跟着是什么,await都会阻塞后面的代码
async function fn1 (){console.log(1)await fn2()console.log(2) // 阻塞
}async function fn2 (){console.log('fn2')
}fn1()
console.log(3)//1,fn2,3,2

         上面例子中,await会阻塞下面的代码(即加入微任务队列),先执行async外面的同步代码,执行完毕之后回到async函数执行之前阻塞的代码。

4、流程分析

     下面一个案例可以看到时间循环机制为了达到单线程不阻塞,他的执行流程是怎么样的。

async function async1() {console.log('async1 start')await async2()console.log('async1 end')
}
async function async2() {console.log('async2')
}
console.log('script start')
setTimeout(function () {console.log('settimeout')
})
async1()
new Promise(function (resolve) {console.log('promise1')resolve()
}).then(function () {console.log('promise2')
})
console.log('script end')//script start,async1 start,async2,promise1,script end,async1 end,promise2,settimeout

 分析:

  • 执行同步任务async1、promise、console直接打印script startasync1 startasync2promise1script end
  • 遇到await、Promise.then添加到微任务队列
  • 遇到settimeout添加到宏任务队列
  • 清空微任务队列打印async1 endpromise2
  • 处理宏任务队列打印settimeout

参考文献:
javaScript运行机制 (同步与异步)的理解_js同步与异步的机制-CSDN博客

面试官:说说你对事件循环的理解 | web前端面试 - 面试官系列

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

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

相关文章

Avalonia学习(十七)-CEF

今天开始继续Avalonia练习。 本节:CefNet 1.引入 CefNet.Avalonia.Eleven 2.项目引入 Program中加入 using Avalonia; using Avalonia.ReactiveUI; using Avalonia.Threading; using CefNet; using System; using System.IO; using System.Linq; using System…

webStorm打开终端Cannot open Local Terminal Failed to start [powershell.exe] in

今天webStorm打开终端显示 Cannot open Local Terminal Failed to start [powershell.exe] in D:\allproject\boosterStation 有关详细信息,请查看 IDE 日志(帮助 | 在 Explorer 中显示日志)。 解决方案: 打开设置(如下图)&a…

OEE如何为制造企业实施ISO50001提供支持

ISO50001是一项旨在帮助企业建立和实施能源管理体系的国际标准,以提高能源效率、降低能源消耗和减少环境影响。而设备OEE(设备综合效率)作为一个关键的生产效率指标,可以为企业实施ISO50001提供重要的支持。本文将介绍ISO50001能源…

C语言快速入门——高级特性

C语言高级特性 C语言高级特性函数创建和使用函数全局变量和局部变量函数参数和返回递归调用 指针什么是指针指针与数组多级指针指针数组与数组指针指针函数与函数指针 结构体、联合体和枚举创建和使用结构体结构体数组和指针联合体枚举typedef关键字 预处理文件包含系统库介绍宏…

Mysql事务transaction简介

文章目录 什么是事务针对Mysql隔离级别读未提交读提交可重复读串行化 mysql中的数据结构索引数据结构mysql中的锁种类**共享锁和独占锁**表锁、行锁(记录锁、间隙锁、临键锁) spring中的事务事务特性 什么是事务 事务是一个不可分割的数据库操作序列,也是数据库并发…

RT-DETR算法优化改进:提出一种新的Shape IoU,更加关注边界框本身的形状和尺度,对小目标检测也很友好 | 2023.12.29收录

💡💡💡本文改进:一种新的Shape IoU方法,该方法可以通过关注边界框本身的形状和尺度来计算损失,解决边界盒的形状和规模等固有属性对边界盒回归的影响。 💡💡💡对小目标检测涨点明显,在VisDrone2019、PASCAL VOC均有涨点 RT-DETR魔术师专栏介绍: https://blo…

element中Table表格控件实现单选功能、多选功能、两种分页方式

目录 1、Table表格控件实现单选功能2、Table控件和Pagination控件实现多选和两种分页方式方法一&#xff1a;使用slice方法方法二&#xff1a;多次调用接口 1、Table表格控件实现单选功能 <template><div><!-- highlight-current-row 是否要高亮当前行 -->…

【Python机器学习】k近邻——k近邻分类

k-NN算法最简单的版本是只考虑一个最近邻&#xff0c;也就是想要预测的数据点最近的训练数据点&#xff0c;预测结果就是这个训练数据点的已知输出。 除了仅考虑最近邻&#xff0c;还可以考虑任意&#xff08;k个&#xff09;邻居&#xff0c;这也是k近邻算法名字的由来。在考…

1*2*3+3*4*5+...+99*100*101python,1加到100的程序算法python

大家好&#xff0c;本文将围绕python中123一直加到100程序怎么写展开说明&#xff0c;计算123456...100的值python是一个很多人都想弄明白的事情&#xff0c;想搞清楚计算1-23-45 … -100的值python需要先了解以下几个事情。 今天下午上python课的时候&#xff0c;老师留了一个…

佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理方法

5B00错误代码的含义 5B00错误代码是指佳能G3800打印机的“废墨仓已满”。这个废墨仓是打印机内部的一个部件&#xff0c;主要用于收集打印过程中产生的废墨。当废墨仓已满时&#xff0c;打印机就会报5B00错误代码。 佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理办法 …

大数据 MapReduce是什么?

在Hadoop问世之前&#xff0c;其实已经有了分布式计算&#xff0c;只是那个时候的分布式计算都是专用的系统&#xff0c;只能专门处理某一类计算&#xff0c;比如进行大规模数据的排序。 很显然&#xff0c;这样的系统无法复用到其他的大数据计算场景&#xff0c;每一种应用都…

大数据技术与应用开发赛项笔记

各种启动命令 修改mysql数据库编码&#xff1a;alter database shtd_result CHARACTER SET utf8; hadoop : start-all.sh hive服务&#xff1a; hive --service metastore hive 客户端 &#xff1a;hive dolphinscheduler服务&#xff1a;./bin/dolphinscheduler-daemon.sh sta…

excel公式名称管理器

1.问题 在日常使用excel的时候&#xff0c;发布一个表格文件&#xff0c;需要限制表格的某列或某行只能从我们提供的选项中选择&#xff0c;自己随便填写视为无效&#xff0c;如下图所示&#xff0c;上午的行程安排只能从"在岗"、"出差"、"病假"…

AI绘图模型不会写字的难题解决了

介绍 大家好&#xff0c;最近有个开源项目比较有意思&#xff0c;解决了图像中不支持带有中文的问题。 https://github.com/tyxsspa/AnyText。 为什么不能带有中文&#xff1f; 数据集局限 Stable Diffusion的训练数据集以英文数据为主&#xff0c;没有大量包含其他语言文本的…

LeetCode-141环形链表 LeetCode-142环形链表二

一、前言 本篇文章在我之前讲完的链表、链表与递归的基础上进行讲解&#xff0c;本次我们以leetcode为例&#xff0c;讲解链表的其他题型&#xff0c;今天我们先了解一下环形链表&#xff0c;这里我们以leetCode141和leetCode142为例。 二、LeetCode141 首先关于这道题&#…

微服务注册中心之Eureka

微服务注册中心之Eureka eureka 搭建集群 版本说明 Spring Boot 2.1.7.RELEASE spring-cloud-starter-netflix-eureka-server Finchley.SR2 spring-boot-starter-security 2.1.7.RELEASE pom.xml 文件 <?xml version"1.0" encoding"UTF-8"?> &l…

游戏缺少emp.dll详细修复教程,快速解决游戏无法启动问题

在现代游戏中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“emp.dll丢失”。emp.dll是一个动态链接库文件&#xff0c;它包含了许多程序运行所需的函数和数据。当一个程序需要调用这些函数时&#xff0c;系统会从emp.dll文件中加载相应的内容。因此&#x…

VSCode上远程调试代码出现的问题

记录一下&#xff1a; 真的是汗流浃背了&#xff0c;师妹叫帮忙如何在VSCode上远程调试代码&#xff0c;一些自己已经经历过的问题&#xff0c;现在已经忘记了。又在网上一顿搜索&#xff0c;这次记录下吧。。。 出现以下问题&#xff1a; 1. 终端界面总是sh-4.4 $ &#xff…

LINUX加固之命令审计

一、前言 在LINUX安全范畴中&#xff0c;安全溯源也是很重要的一个环节。对主机上所有曾操作过的命令详细信息需要有一份记录保存&#xff0c;当系统遭受破坏或者入侵&#xff0c;拿出这份记录&#xff0c;可以帮助定位一些可疑动作。 很多系统通常都会配置安全堡垒机&#xff…

jmeter断言-三种

1.响应断言 substring是指包含就行 不用完全相等 2.json断言 3.持续时间断言