JS执行机制(同步和异步)

news2024/11/15 19:53:42

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。

异步:在做这件事的同时,你还可以去处理其他事

他们的本质区别:这条流水线上各个流程的执行顺序不同。

同步任务

同步任务都在主线程上执行,形成一个执行栈。

异步任务

耗时的还有资源加载放到任务队列中

宏任务:setTimeout setInterval 微->宏(宏任务之前都会先检测微任务队列中有没有微任务,如果有先执行微任务) I/O

宏任务是指在主线程中执行的较大任务,通常包括以下几种:

  • setTimeout(): 定时器任务。
  • setInterval(): 定时重复任务。
  • I/O 操作: 例如文件读取、网络请求等。
  • UI 渲染: 浏览器的渲染任务。
  • script 的执行: 全局代码的执行。

微任务:Promise nextTick then() Promise的构造函数是同步任务,所以Promise.resolve是同步任务先执行,然后将then加入异步队列

微任务是相对较小的异步任务,通常在当前任务执行完毕后立即执行。主要包括:

  • Promise 的 then() 和 catch(): 当 Promise 状态改变时,相关的回调会被放入微任务队列。
  • MutationObserver: 用于监听 DOM 变动的 API。
  • queueMicrotask(): 将函数放入微任务队列。

await后面执行的都被加到了微任务队列里,后面的都是微任务

执行顺序

在 JavaScript 中,事件循环的执行顺序如下:

  1. 执行一个宏任务(例如执行全局代码)。
  2. 执行所有的微任务,直到微任务队列清空。
  3. 渲染 UI 更新(如果有的话)。
  4. 回到步骤 1,继续执行下一个宏任务。
console.log("Start"); // 宏任务

setTimeout(() => {
  console.log("Timeout"); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log("Promise"); // 微任务
});

console.log("End"); // 宏任务

结果:

Start
End
Promise
Timeout

先执行执行栈中的同步任务,将异步任务放到任务队列中

一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。


事件循环:

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop) 。

就是当一段代码进入主线程,然后主线程会抽离异步任务到任务队列,主线程的同步代码执行完以后去读取异步进行操作,然后异步不断有异步,不断出异步,这就是事件循环

执行栈把异步任务外包出去(交给浏览器来处理),在任务队列看到外包做完了,再拿回来

宿主环境

在 JavaScript 中,所谓的"宿主环境"指的是 JavaScript 代码运行的环境或平台。

JavaScript 是一种脚本语言,它需要一个宿主环境来执行。常见的 JavaScript 宿主环境包括:

  1. 浏览器环境:
    1. 浏览器是最常见的 JavaScript 宿主环境。
    2. 浏览器提供了 DOM(文档对象模型)、BOM(浏览器对象模型)等 API,供 JavaScript 代码与浏览器交互。
    3. 常见的浏览器宿主环境包括 Google Chrome、Mozilla Firefox、Safari 等。
  2. Node.js 环境:
    1. Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行时环境。
    2. 它允许 JavaScript 代码在服务器端运行,并提供了文件系统、网络、数据库等 API。
    3. Node.js 环境使 JavaScript 可以用于后端开发、命令行工具、桌面应用程序等场景。
  3. 其他宿主环境:
  •  除了浏览器和 Node.js,JavaScript 也可以在其他环境中运行,如:
  1. IoT 设备 (如 Raspberry Pi)
  2. Apache Cordova (用于构建跨平台移动应用程序)
  3. React Native (用于构建跨平台移动应用程序)
  4. Electron (用于构建桌面应用程序)

不同的宿主环境提供了不同的 API 和功能,这意味着同一段 JavaScript 代码在不同的宿主环境中可能会有不同的行为和结果。开发者需要了解代码将在哪种宿主环境中运行,并编写相应的代码。

总之,宿主环境是 JavaScript 代码运行的平台或环境,它决定了 JavaScript 代码可以访问和使用哪些 API 和功能。了解不同的宿主环境特性是 JavaScript 开发的重要基础。

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

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

相关文章

7、论等保的必要性

数据来源:7.论等保的必要性_哔哩哔哩_bilibili 等级保护必要性 降低信息安全风险 等级保护旨在降低信息安全风险,提高信息系统的安全防护能力。 风险发现与整改 开展等级保护的最重要原因是通过测评工作,发现单位系统内外部的安全风险和脆弱…

【计网】从零开始掌握序列化 --- JSON实现协议 + 设计 传输\会话\应用 三层结构

唯有梦想才配让你不安, 唯有行动才能解除你的不安。 --- 卢思浩 --- 从零开始掌握序列化 1 知识回顾2 序列化与编写协议2.1 使用Json进行序列化2.2 编写协议 3 封装IOService4 应用层 --- 网络计算器5 总结 1 知识回顾 上一篇文章我们讲解了协议的本质是双方能够…

【JavaEE】多线程编程引入——认识Thread类

阿华代码,不是逆风,就是我疯,你们的点赞收藏是我前进最大的动力!!希望本文内容能帮到你! 目录 引入: 一:Thread类 1:Thread类可以直接调用 2:run方法 &a…

SpringBoot+thymeleaf竞赛报名系统

一、介绍 > 这是一个基于Spring Boot的后台管理系统。 > 使用了Mybatis Plus作为持久层框架,EasyExcel用于Excel操作,Thymeleaf作为前端模板引擎。 > 界面简洁,功能丰富,完成度比较高,适用于JAVA初学者作…

安国U盘量产工具系列下载地址

来源地址(访问需要科学工具):AlcorMP (Последняя версия ALCOR U2 MP v23.08.07.00.H) – [USBDev.ru] 版本列表: AlcorMP(最新版本的 ALCOR U2 MP v23.08.07.00.H) AlcorMP是在Alcor Mic…

SpringBoot项目License证书生成与验证(TrueLicense) 【记录】

SpringBoot项目License证书生成与验证(TrueLicense) 【记录】 在非开源产品、商业软件、收费软件等系统的使用上,需要考虑系统的使用版权问题,不能随便一个人拿去在任何环境都能用。应用部署一般分为两种情况: 应用部署在开发者自己的云服务…

数据集-目标检测系列-火车检测数据集 train >> DataBall

数据集-目标检测系列-火车检测数据集 train >> DataBall 数据集-目标检测系列-火车检测数据集 数据量:1W 想要进一步了解,请联系 DataBall。 DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,不断增加…

跟李沐学AI:注意力机制、注意力分数

目录 不随意线索 随意线索 注意力机制 非参注意力池化层 参数化的注意力机制 注意力机制总结 注意力分数 拓展到高维度 加性模型(Additive Attention) 点积注意力机制(Dot Product Attention) 注意力分数总结 不随意线…

vscode 顶部 Command Center,minimap

目录 vscode 顶部 Command Center 设置显示步骤: minimap设置 方法一:使用设置界面 方法二:使用命令面板 方法三:编辑 settings.json 文件 左侧目录树和编辑器字体不一致: vscode 顶部 Command Center Visual Studio Code (VSCode) 中的 Command Center 是一个集中…

240912-设置WSL中的Ollama可在局域网访问

A. 最终效果 B. 设置Ollama(前提) sudo vim /etc/systemd/system/ollama.service[Unit] DescriptionOllama Service Afternetwork-online.target[Service] ExecStart/usr/bin/ollama serve Userollama Groupollama Restartalways RestartSec3 Environme…

Python redis 安装和使用介绍

python redis安装和使用 一、Redis 安装1.1、Windows安装 二、安装 redis 模块二、使用redis 实例1.1、简单使用1.2、连接池1.3、redis 基本命令 String1.3.1、ex - 过期时间(秒)1.3.2、nx - 如果设置为True,则只有name不存在时,当…

fiddler抓包08_抓Android手机请求

课程大纲 手机抓包,电脑端的设置和IOS端相同,设置一次即可,无需重复设置。 前提:电脑和手机连接同一个局域网 土小帽电脑和手机都连了自己的无线网“tuxiaomao”。 Step1. 电脑端设置 ① 打开Fiddler - 开启抓包(F12…

django项目——图片上传到阿里云OSS对象存储

文章目录 实现图片上传到阿里云OSS对象存储1. 创建阿里云OSS对象存储2. 查询获取接口访问key和秘钥3. 安装阿里云的SDK集成到项目中使用3.1 python直接操作oss23.2 django配置自定义文件存储上传文件到oss 实现图片上传到阿里云OSS对象存储 1. 创建阿里云OSS对象存储 开发文档…

重磅!人工智能等级考试来了,考试免费,上海落户可以加分

目录 简要介绍 一、关心的问题 1. 什么是上海市高等学校信息技术水平考试? 2. 考试分几个级别?有哪些科目? 3. 哪些人可以进行报名? 4. 每名学生可以报考几个科目? 5. 有没有考试大纲? 6. 考试是否有…

[笔记]23年度展会信息— 吊钩 起升机构

1.吊钩的规格参数 5吨吊钩重26公斤 10吨64公斤。 另外一套型号,更轻: 不确定是结构设计还是用钢材质达到了减重效果。 看看重载双滑轮吊钩: 50吨,400公斤,只是吊钩。 然后是行车吊钩与钢丝绳的直径。这在计算空载吊…

Web Components之继承

我们在使用Web Components自定义组件的时候,我们需要继承HTMLElement这个浏览器内置对象,但是如果我要一些高级封装,给组件内置一些方法的话。我们就需要使用继承的方式,在父类中实现基本功能的封装。 1 父类的封装 以下是我的继…

一文搞懂UEFI

Hi!早哦。今天又是宠读者的一天,应允聊聊UEFI。 文章目录 前言UEFI是什么?传统BIOSBIOS作为标准BIOS作为实现BIOS的工作原理传统BIOS的局限性传统BIOS启动过程 BIOS VS UEFIUEFI?UEFI概念EFI 系统分区EFI 变量EFI 的启动过程EFI 变…

【高分系列卫星简介——高分三号卫星(GF-3)】

高分三号卫星(GF-3) 高分三号(GF-3)是我国首颗高分辨率、C频段、多极化合成孔径雷达(SAR)卫星,由中国空间技术研究院北京空间飞行器总部设计部研制,并于2016年8月10日成功发射。该卫…

thop计算模型复杂度(params,flops)

thop安装 -pip install thop在线安装失败 -离线安装 github网址: pytorch-OpCounter:Count the MACs / FLOPs of your PyTorch model. - GitCode python setup.py install 测试: from options import config as c import os os.environ["CUD…

【Flink实战】flink消费http数据并将数组展开多行

文章目录 一. 需求描述二. 方案思路1. 解决思路2. flink json 解析2.1. 通过json path解析非array数据2.2. 通过json path解析array数据 3. CROSS JOIN逻辑 三. 方案实现1. http json数据样例2. flink sql 说明 一. 需求描述 flink消费http接口的数据,将json中的数…