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,一经查实,立即删除!

相关文章

git merge origin master 和 git merge origin/master 的区别

git merge origin master和git merge origin/master的区别 1. git checkout dev 2. git fetch origin master 3. git merge origin release 把 origin/master,heads/release merge到 heads/dev1. git checkout dev 2. git fetch origin master 3. git me…

53、实战 - 手写一个全连接算法

全连接算法在一定程度上和矩阵乘法算法等价,因此如果我们想实现一个全连接。的算法,只需要实现一个矩阵乘法就可以。。 矩阵乘法是线性代数运算,用于将两个矩阵相乘得到一个新的矩阵。要执行矩阵乘法,需要确保第一个矩阵的列数与第二个矩阵的行数相等。 比如第一个矩阵的…

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能源…

关于iterator迭代器

1 迭代器:是一种机制,可以为各种不同的数据结构提供统一的循环和迭代规范;for of循环就 是基于迭代器规范。 class Iterator { constructor(assemble){ self this se…

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 是否要高亮当前行 -->…

【http和https】 简单入门了解

我将从以下几个方面介绍HTTP和HTTPS协议&#xff0c;并通过示例来说明它们的工作原理。 一、HTTP协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是互联网上应用最广泛的一种网络协议。它是一种请求/响应协议&#xff0c;用于从服务器传输超文本到客户端。 H…

JDK10新特性之var 关键字:局部变量的类型推断

在 JDK 10 中&#xff0c;Java 引入了一个重要的新特性&#xff1a;var 关键字&#xff0c;用于局部变量的类型推断。这个特性是 Java 语言对类型推断能力的扩展&#xff0c;主要目的是减少编写明确类型声明的需要&#xff0c;从而使代码更加简洁易读。下面详细解释这个特性&am…

【Redux】自己动手实现redux-thunk

1. 前言 在原始的redux里面&#xff0c;action必须是plain object&#xff0c;且必须是同步。而我们经常使用到定时器&#xff0c;网络请求等异步操作&#xff0c;而redux-thunk就是为了解决异步动作的问题而出现的。 2. redux-thunk中间件实现源码 function createThunkMidd…

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

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

1、docker常用技巧:docker数据位置更改

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…

【React】03-关于React state(状态) 的实践

背景 在学习React组件的过程中&#xff0c;发现state的运用很广泛&#xff0c;但对于它的使用及运行机制还是比较模凌两可的&#xff0c;故找了一些资料学习一下。 实践 React中的组件类型被分为了两类&#xff1a;函数组件&#xff0c;又被称为无状态组件&#xff1b;类组件…

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;老师留了一个…

python基础教程二(列表相关知识)

列表 列表定义及其相关内置函数 列表类似一个可以改变的数组&#xff0c;里边的类型不同于c&#xff0c;c要求类型必须相同&#xff0c;列表的元素任意类型都可以&#xff0c;最重要的是列表可以改变&#xff0c;和元组和字符串最大区别 list函数&#xff1a;将别的序列元素变…

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

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

大数据 MapReduce是什么?

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