JS 执行机制 详解(附图)

news/2024/4/23 20:02:27/文章来源:https://blog.csdn.net/m0_64346035/article/details/129215462

一、JS是单线程

JS语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是JS这门脚本语言诞生的使命所致——用来处理页面中用户的交互,以及操作DOM而诞生的。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

二、同步和异步

为了解决这个问题,利用多核CPU的计算能力,HTML5提出了Web Worker标准,允许JS脚本创建多个线程,于是,jS中出现了同步和异步

同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的。比如:我们要烧水煮饭,等水开了(10分钟后),再去切菜,炒菜

异步:你在做一件事情时,因为这件事会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如烧水的10分钟内,去切菜,炒菜

同步任务在主线程上排队执行任务,只有前一个任务执行完毕,才能执行后一个任务

异步任务:不进入主线程,而是进入"任务队列"的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

一般而言,异步任务有以下四种类型

  • setTimeout和setlnterval

  • DOM事件 普通事件如:click、resize,资源加载事件:onload等

  • ES6中的Promise

  • Ajax异步请求

异步任务相关回调函数添加到任务队列中(消息队列)

三、JS执行机制

  1. 先执行执行栈中的同步任务

  1. 异步任务(回调函数)放入任务队列中

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

let setTimeoutCallBack = function() {console.log('我是定时器回调');
};
let httpCallback = function() {console.log('我是http请求回调');
}// 同步任务
console.log('我是同步任务1');// 异步定时任务
setTimeout(setTimeoutCallBack,1000);// 异步http请求任务
ajax.get('/info',httpCallback);// 同步任务
console.log('我是同步任务2');

上述代码执行过程:

JS是按照顺序从上往下依次执行的,可以先理解为这段代码时的执行环境就是主线程,也就是当前执行栈

首先,执行console.log(‘我是同步任务1’)

接着,执行到setTimeout时,会移交给定时器线程,通知定时器线程 1s 后将setTimeoutCallBack 这个回调交给事件触发线程处理,在 1s 后事件触发线程会收到 setTimeoutCallBack 这个回调并把它加入到事件触发线程所管理的事件队列中等待执行

接着,执行http请求,会移交给异步http请求线程发送网络请求,请求成功后将 httpCallback 这个回调交由事件触发线程处理,事件触发线程收到 httpCallback 这个回调后把它加入到事件触发线程所管理的事件队列中等待执行

再接着执行console.log(‘我是同步任务2’)

至此主线程执行栈中执行完毕,JS引擎线程已经空闲,开始向事件触发线程发起询问,询问事件触发线程的事件队列中是否有需要执行的回调函数,如果有将事件队列中的回调事件加入执行栈中,开始执行回调,如果事件队列中没有回调,JS引擎线程会一直发起询问,直到有为止

由此可以看出,浏览器上的所有线程的工作都很单一且独立,非常符合单一原则

定时触发线程 只管理定时器且只关注定时不关心结果,定时结束就把回调扔给事件触发线程

异步http请求线程 只管理http请求同样不关心结果,请求结束把回调扔给事件触发线程

事件触发线程 只关心异步回调入事件队列

JS引擎线程 只会执行执行栈中的事件,执行栈中的代码执行完毕,就会读取事件队列中的事件并添加到执行栈中继续执行,这样反反复复就是我们所谓的事件循环(Event Loop)

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

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

相关文章

自动化测试整理 --- STAF/STAX Robot Framework

题记:上周花了点时间学习开源的自动化测试框架Robot Framework,结合自己之前的自动化经验,就想周末写篇文章整理下。 目前,所在项目的自动化测试框架是基于STAF/STAX的拓展,围绕STAX执行引擎,扩展了测试用例的创建、管理&#xf…

CMake调试器出炉:调试你的CMake脚本

Visual Studio 开发团队一直和 Kitware 紧密合作,致力于开发一个用于调试 CMake 脚本的调试器。 我们将继续这个工作,以便开发人员社区可以通过添加新功能和对其他 DAP 功能的支持来共同改进它。 我们很高兴地宣布,CMake 调试器的预览版现在…

验证功能覆盖率收集时per_instance=1可能导致覆盖率线性增长

验证覆盖率收集时,发现coverage database达到了惊人的256G,如下: 进入database中的testdata目录下的用例定位发现,问题出在这个文件: testbench.inst.xml其大小基本等同于验证用例覆盖率的大小。 这个文件时怎么产…

用数据讲故事:基于分析场景的17条Python使用小结

数据科学的编程需要非常灵活的语言,以最少的代码处理复杂的数据建模场景。作为一名数科小白,我对Python的第一认知是丰富的机器学习算法,但Python有超过12万个第三方库,覆盖从数据预处理、统计分析、数据挖掘及可视化等各种日常数…

Android Studio中创建java工程

1. 前言 电脑环境: Ubuntu 18.04 开发工具环境:Android Studio 4.1.3 版本 经常要使用验证Java API, 把配置环境步骤记录一下 2. 创建步骤 2.1 新建一个Android Studio App工程 New ---> New Project ---> 选择一个Activity主题---> Finish 就创建ok 2.2 …

【模拟集成电路】分频器(DIV_TSPC)设计

分频器(DIV_TSPC)设计前言一、DIV工作原理二、DIV电路设计(1)32分频原理图(2)D触发器原理图(3)D锁存器原理图(4)三输入与非门原理图三、DIV仿真测试32分频器测…

【模拟集成电路】宽摆幅压控振荡器(VCO)设计

鉴频鉴相器设计(Phase Frequency Detector,PFD)前言一、VCO工作原理二、VCO电路设计VCO原理图三、压控振荡器(VCO)测试VCO测试电路图瞬态测试(1)瞬态输出(2)局部放大图&a…

调试版获取安卓SHA1值

确保你的电脑上有JDK,配置好环境变量后执行我这些步骤。where keytool看看电脑找不找得到找得到就可以进行下一步了口令默认android或者为空

javaEE 初阶 — 关于 IPv4、IPv6 协议、NAT(网络地址转换)、动态分配 IP 地址 的介绍

文章目录1. IPv42. IPv63. NAT4. 动态分配 IP 地址1. IPv4 在互联网的世界中只有 0 和1 ,所以每个人都有一个由 0 和 1 组成的地址来让别人找到你。 这段由 0 和 1 组成的地址叫 IP 地址,这是互联网的基础资源,可以简单的理解为互联网的土地。…

【Acwing 周赛复盘】第91场周赛复盘(2023.2.18)

【Acwing 周赛复盘】第91场周赛复盘(2023.2.18) 周赛复盘 ✍️ 本周个人排名:1286/3115 AC情况:2/3 这是博主参加的第六次周赛,周赛当晚有事,是后来定时自测的 😂 在 20 分钟内 AC 了 2 题&…

数据库|(六)连接查询

(六)连接查询1. 笛卡尔乘积2. 连接查询分类2.1 按年代分2.2 按功能分3. 等值连接(sql 92标准)3.1 特点3.2 一般使用3.3 为表取别名3.4 两表顺序可以调换3.5 可以加筛选3.6 可以加分组3.7 可以加排序3.8 可以实现三表连接4. 非等值连接(sql 92标准)5. sql…

LeetCode练习三:链表

文章目录一、链表基础1.1 无序表(UnorderedList)1.1.2 双向链表1.1.3 循环链表1.2 链表的基本操作1.2.1 定义链表结构1.2.2 建立线性链表1.2.3 求线性链表的长度1.2.4 查找元素1.2.5 插入元素1.2.6 改变元素1.2.7 删除元素1.3 有序表OrderedList1.4 链表…

39-Golang中的接口

Golang中的接口基本介绍基本语法注意事项和细节案例实现对Hero结构体切片的排序:sort.Sort(data Interface)实现接口和继承之间的比较区别基本介绍 interface类型可以定义一组方法,但是这些不需要实现。并且interface不能包含任何变量。到某个自定义类型…

直接在ide启动mitmproxy监听,脱离命令行启动,懒人福音

前言 本文解决了只能通过命令行启动 mitmproxy 的痛点。 在使用 mitmproxy 时候存在这样一个问题,就是每次启动它时候都需要通过命令行启动。 加上最近有位读者向我提问(以前也有读者提问该问题):不通过命令行如何启动 mitmproxy监…

XML调用 CAPL Test Function

🍅 我是蚂蚁小兵,专注于车载诊断领域,尤其擅长于对CANoe工具的使用🍅 寻找组织 ,答疑解惑,摸鱼聊天,博客源码,点击加入👉【相亲相爱一家人】🍅 玩转CANoe&…

阿里限量出产Elasticsearch学习手册,确定不心动?

前言只有光头才能变强。不知道大家的公司用Elasticsearch多不多,反正我公司的是有在用的。平时听同事们聊天肯定避免不了不认识的技术栈,例如说:把数据放在引擎,从引擎取出数据等等。如果对引擎不了解的同学,就压根听不…

九龙证券|阿里+鸿蒙+人工智能+元宇宙概念热度爆棚,“会说话的猫”亮了!

近一周组织调研个股数量有240多只,汤姆猫成为调研组织数量最多的股票。 证券时报数据宝统计,近一周组织调研公司数量有240多家。从调研组织类型来看,证券公司调研相对最广泛,调研230多家公司。 “会说话的猫”亮了 汤姆猫成为近…

Flink高手之路1一Flink的简介

文章目录一、Flink简介1. Fink的引入2.Flink简介3.支持的编程语言4.Flink的特性5.Flink四大基石6.批处理和流处理二、Flink的架构1.Flink的角色2.编程模型一、Flink简介 1. Fink的引入 大数据的计算引擎,发展过程有四个阶段 第一代:Hadoop的MapReduce…

二叉搜索树中的众数Java解法

给你一个含重复值的二叉搜索树(BST)的根节点 root ,找出并返回 BST 中的所有 众数(即,出现频率最高的元素)。 如果树中有不止一个众数,可以按 任意顺序 返回。 假定 BST 满足如下定义&#xf…

【Web逆向】万方数据平台正文的逆向分析(上篇--加密发送请求)—— 逆向protobuf

【Web逆向】万方数据平台正文的逆向分析(上篇--加密发送请求)—— 逆向protobuf声明一、了解protobuf协议:二、前期准备:二、目标网站:三、开始分析:我们一句句分析:先for循环部分:后…