Event Loop

news2024/11/17 0:51:48

javascript是单线程语言

那么,你可能要问,javascript为什么是单线程,难道不能实现多线程吗?
这跟历史有关系。javascript从诞生的时候就是单线程,原因大概是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能会修改彼此的运行结果。试想,假如javascript是多线程的,在一个线程中为某个DOM节点添加了任务,在另一个线程中又将该节点删除了,这就比较尴尬了,最后应该依照哪个结果呢?

但是这并不意味着单线程就是阻塞,实现单线程非阻塞的方法就是事件循环。

同步任务和异步任务

在javascript中,我们将所有的任务大体上分为两类:同步任务和异步任务。

  • 同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
  • 异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时函数等。
    在这里插入图片描述
    同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程中的任务执行完毕为空时,会去任务队列中读取对应的任务,推入主线程执行。上述过程的不断重复就是事件循环。

宏任务和微任务

上面我们认识到了同步任务和异步任务,知道先执行完主执行栈中的同步任务,然后再执行异步任务,那么问题来了,异步任务中哪个任务被率先推入主执行栈中呢?这就引出了我们的宏任务和微任务。
宏任务由宿主发起,而微任务由javascript自身发起。

什么是宿主?宿主就是js运行的环境。一般是浏览器或者Node.

宏任务

  • script (可以理解为外层同步代码)
  • setTimeout/setInterval
  • UI rendering/UI事件
  • postMessage、MessageChannel
  • setImmediate、I/O(Node.js)

微任务

  • Promise.then
  • MutaionObserver
  • Object.observer(已经废弃;Proxy对象替代)
  • process.nextTick(Node.js)

微任务先执行,宏任务后执行。

async和await

async是异步的意思,await则可以理解为async wait。所以可以理解async就是用来声明一个异步方法,而await是用来等待异步方法执行。
async
async函数返回一个promise对象,下面两种方法是等效的

function f() {
    return Promise.resolve('TEST');
}

// asyncF is equivalent to f!
async function asyncF() {
    return 'TEST';
}

await
正常情况下,await命令后面是一个Promise对象,返回该对象的结果。如果不是Promise对象,就直接返回对应的值。

async function f(){
    // 等同于
    // return 123
    return await 123
}
f().then(v => console.log(v)) // 123

不管await后面跟的是什么,await都会阻塞后面的代码。

练习

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 startasync1 startasync2promise1script endasync1 endpromise2settimeout.
答案:
1.首先,console.log('script start')直接执行。
2.遇到setTimeout,推进宏任务
3.执行async1(),首先直接打印async1 start,随后遇到await,执行完async2(),打印出async2,会阻塞之后的代码执行,将之后的任务推入微任务,继续执行同步任务。
4.遇到Promise,执行第一步,打印出promise1,将then()中的任务推入微任务,继续执行同步任务。
5.执行到script end,同步任务结束。
6.查看异步任务队列中是否有微任务(注意是异步任务队列,遵循先进先出),依次执行async1 endpromise2
7.微任务执行结束,继续执行宏任务,打印出settimeout,结束。

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

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

相关文章

dark room - 2020 年苹果设计奖得主,一个足够强大的照片视频编辑器

dark room - 2020 年苹果设计奖得主,一个足够强大的照片视频编辑器 2020年苹果设计奖得主 2015年App Store最佳应用 Darkroom 是一个高级照片和视频编辑器。它对业余摄影师来说很容易操作,但对专业摄影师来说足够强大。 下载 ➤ Darkroom 下载安装 ⇲…

七十二——八十八

七十二、JavaScript——面向对象简介 面向对象编程(OOP) 1. 程序是干嘛的 - 程序是现实世界的抽象(照片就是对人的抽象) 2. 对象是干嘛的? - 一个事物抽象到程序后就变成了对象 - 在程序的试接中,一切皆对象 - 一个事物…

来到CSDN一周年(hacker的2022年终总结)

✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主、新星计划第三季python赛道Top1🏆 📃个人主页:hacker707的csdn博客 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的…

【数据结构】排序算法大总结

文章目录1. 排序的概念及运用2. 常见排序算法的实现2.1 插入排序2.1.1 直接插入排序2.1.2 希尔排序2.2 选择排序2.2.1 直接选择排序2.2.2 堆排序2.3 交换排序2.3.1 冒泡排序2.3.1 快速排序小区间优化hoare版本挖坑法前后指针法2.3.2 快排非递归2.4 归并排序2.4.1 归并排序递归2…

本地缓存天花板-Caffeine

前言 caffeine是一款高性能的本地缓存组件,关于它的定义,官方描述如下: Caffeine is a high performance, near optimal caching library. 翻译过来就是Caffeine是一款高性能、最优缓存库。 同时文档中也说明了caffeine是受Google guava启发…

【Git】一文带你入门Git分布式版本控制系统(分支管理策略、Bug分支)

个人简介 👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端 📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招) 🚀未…

Eth04 - Eth分层模块架构和索引方案

文章目录 1 Eth分层模块架构2 索引方案3 发送成功和接收成功回调函数传送门 ==>> AutoSAR入门和实战系列总目录 1 Eth分层模块架构 下面的图片表明了以太网控制器驱动程序和硬件的关系;从EthIf看来,要通过以太网控制器层去访问以太网控制器硬件,以太网控制器层有多…

AcWing1204.错误票据——学习笔记

题目:1204. 错误票据 - AcWing题库https://www.acwing.com/problem/content/description/1206/ import java.util.Scanner;public class Main {public static void main(String args[]){Scanner input new Scanner(System.in);int line input.nextInt();int loseI…

Python开发环境

1. Python开发环境 开发环境,英文是IDE(Integrated Development Environment 集成开发环境)。 不要纠结于使用哪个开发环境。开发环境本质上就是对Python解释器python.exe的封装,核心都一样。可以说:“开发环境IDE,只…

SpringCloud(10)— Elasticsearch集群

SpringCloud(10)— Elasticsearch集群 一 搭建ES集群 单机的 Elasticsearch 做数据存储,必然面临两个问题:海量数据存储问题,单点故障等 海量数据存储问题:将索引库从逻辑上拆分为 N 个分片(…

直播回顾 | 如何运用数智化助力光伏上游产业节能降碳?

12月29日,【始祖双碳研习社-行业解决方案】系列直播课第一期直播顺利举办。 始祖科技解决方案专家张开宇在本次直播上进行了以《如何运用数智化助力光伏上游产业节能降碳》的主题分享,详细介绍了光伏行业产业链分析、光伏行业节能减排的现状与挑战、数智…

【Javassist】快速入门系列12 当检测到catch语句时在catch前插入代码

系列文章目录 01 在方法体的开头或结尾插入代码 02 使用Javassist实现方法执行时间统计 03 使用Javassist实现方法异常处理 04 使用Javassist更改整个方法体 05 当有指定方法调用时替换方法调用的内容 06 当有构造方法调用时替换方法调用的内容 07 当检测到字段被访问时使用语…

【C++学习】vector的使用及模拟实现

🐱作者:一只大喵咪1201 🐱专栏:《C学习》 🔥格言:你只管努力,剩下的交给时间! vector的使用及模拟实现🎇构造函数🧨模拟实现🧨vector的扩容机制&…

力扣(LeetCode)363. 矩形区域不超过 K 的最大数值和(2022.12.30)

给你一个 m x n 的矩阵 matrix 和一个整数 k ,找出并返回矩阵内部矩形区域的不超过 k 的最大数值和。 题目数据保证总会存在一个数值和不超过 k 的矩形区域。 示例 1: 输入:matrix [[1,0,1],[0,-2,3]], k 2 输出:2 解释&…

2022年-年度总结报告

目录1.攻克的技术难题问题1:2.学习的新技术1.system系统的学习2.网络3.游戏22年总结23年的计划1.先给自己画个大饼2.计划内的小饼1.攻克的技术难题 问题1: 跑VTS测试的时候,mkfs.exfat挂测失败,VTS刷最新的谷歌gsi没有过&#x…

大文件传输如何帮助媒体行业

过去几年,随着分辨率从4k到6k再到8k的升级,观众已经适应了高分辨率的时代。然而,许多媒体工作室的工作流程还停留在过去。 TB甚至PB大小的材料的传输让从业者无所适从。这就是高速文件传输对媒体行业有很大帮助的原因。 什么是大文件传输&am…

81.【SpringMVC】

SpringMVC(一)、认识MVC三层架构1.回顾MVC(1).什么是MVC三层框架(2).MVC要做那些事情?(3).常见的MVC三层框架结构(4).知识拓展2.代码回顾3.什么是SpringMVC(二)、第一个SpringMVC0.前提1.搭建环境2.配置WEB-INF的XML配置文件3.在资源Resource的包下设置springmvc-servlet.xml4…

30-深入Hotspot源码与Linux内核理解NIO/BIO/AIO

IO模型 IO模型就是说用什么样的通道进行数据的发送和接收,Java共支持3种网络编程IO模式:BIO,NIO,AIO BIO(Blocking IO) 同步阻塞模型,一个客户端连接对应一个处理线程 缺点: 1、IO代码里read操作是阻塞操…

Spreadsheet与FineReport数据集对比

什么是数据集?在BI工具中指的是在报表开发前的取数过程,把需要的数据整合成一个数据集合,以便于在报表开发中使用。可以把它理解为我们基于数据库获取我们需要的数据。而数据库获取数据是有多种方式的,比如可以通过直接写SQL语句、…

基于verilog实现序列相关检测

题目来源牛客网,完整工程源码:https://github.com/ningbo99128/verilog 目录 1、VL25 输入序列连续的序列检测 题目介绍 思路分析 代码实现 仿真文件 2、VL26 含有无关项的序列检测 题目介绍 思路分析 代码实现 仿真文件 3、VL27 不重叠序列检…