js执行机制

同步任务

同步任务都在主线程上执行,形成一个执行栈,程序执行的时候,按照顺序依次执行

异步任务

异步任务是通过回调函数实现的,程序执行的时候,程序会调过某个步骤继续向下执行

事件循环

描述了计算机在执行js时候的一个状态(先去执行栈中执行同步代码,然后再执行队列中异步代码)

异步任务相关添加到任务队列中(任务队列也成为消息队列)

异步任务分类

异步任务分为宏任务和微任务两种:

微任务处理完毕后才会处理宏任务,而该异步任务被判定为宏还是微取决于官方的定义。常见分类如下:

  • 宏任务:正常的异步任务都是宏任务,最常见的就是定时器(setInterval, setImmediate, setTimeout);script(整体代码) 、用户交互、IO任务;

  • 微任务:微任务出现比较晚,queueMicrotask、Promise的then和catch方法、catch、finally 

微任务生成方法:

Promise:Promise是一种异步编程的解决方案,它可以将异步操作封装成一个Promise对象,通过then方法注册回调函数,当promise变为resolve或者reject会将回调函数加入微任务队列中。MutationObserver:MutationObserver是一种可以观察DOM变化的API,通过监听DOM变化事件并注册回调函数,将回调函数加入微任务队列中。process.nextTick:process.nextTick是Node.js中的一个API,它可以将一个回调函数加入微任务队列中。

宏任务生成方法:

用户交互:用户在页面上进行交互操作(例如点击、滚动、输入等),会触发浏览器产生宏任务来响应用户操作。网络请求:当浏览器发起网络请求(例如通过 Ajax、Fetch、WebSocket 等方式)时,会产生宏任务来处理请求和响应。定时器:通过 JavaScript 宿主环境提供的定时器函数(例如 setTimeout、setInterval)可以设置一定的时间后产生宏任务执行对应的回调函数。DOM 变化:当 DOM 元素发生变化时(例如节点的添加、删除、属性的修改等),会产生宏任务来更新页面。
跨窗口通信:在浏览器中,跨窗口通信(例如通过 postMessage 实现)会产生宏任务来处理通信消息。JavaScript 脚本执行事件;比如页面引入的 script 就是一个宏任务。

执行顺序代码演示

setTimeout(function(){console.log(777)
},10)
console.log('000');//第一步(async ()=>{console.log(111);//2await console.log(222);//3,此行执行,当await右边跟随的代码执行完毕的时候,才会执行后面的代码,此时后面的代码(后面3行)也可以算作“内部的微任务”,所以此行执行后执行输出333await fn()console.log(444);console.log(555);
})().then(()=>{console.log(666);
});
function fn(){console.log('a')return new Promise((res,rej)=>{console.log('b')res('d')console.log('c')})
}
console.log('333');//4

输出:

注意:

promise内部遇到resolve()和reject()调用的时候,会继续执行后面的代码,但是then和reject就直接放入为微任务队列中,等待同步任务执行

但async内部遇到await的时候,只有当await右边跟随的代码执行完毕的时候,才会执行后面的代码,此时后面的代码也可以算作内部的微任务(因为遇到await会将等await执行完成后,执行外面的同步任务,再执行await后面的任务,见下图)

setTimeout(function(){console.log(777)
},10)
console.log('000');//第一步(async ()=>{console.log(111);//2await console.log(222);   //3,此行执行,当await右边跟随的代码执行完毕的时候,才会执行后面的代码,此时后面的代码(237-239行)也可以算作内部的微任务,所以此行执行后执行252行await fn()console.log(444);console.log(555);
})().then(()=>{console.log(666);
});
async function fn(a){console.log(a+'a')await console.log(222222)return new Promise((res,rej)=>{console.log(a+'b')res(a+'d')console.log(a+'c')})
}
fn(1).then((e)=>{console.log(e);
})
console.log('333');

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

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

相关文章

SpringIOC之BeanFactoryResolver

博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

阻塞 IO(BIO)

文章目录 阻塞 IO(BIO)模型等待队列头init_waitqueue_headDECLARE_WAIT_QUEUE_HEAD 等待队列项使用方法驱动程序应用程序模块使用参考 阻塞 IO(BIO) 模型 等待队列是内核实现阻塞和唤醒的内核机制。 等待队列以循环链表为基础结构,链表头和链表项分别为等待队列头和…

【linux】用grep或者pgrep查找进程ID

一、用grep ps aux|grep 字符串|awk {print $2} 像上面这样运行,还会同时显示grep的进程ID。 需要再添加grep的反向查找命令,即查找不含有 "grep" 字段的行:grep -v grep。 ps aux | grep 字符串 | grep -v grep | awk {print …

高级算法设计与分析(七) -- 概率算法和NP完全性理论

系列文章目录 高级算法设计与分析(一) -- 算法引论 高级算法设计与分析(二) -- 递归与分治策略 高级算法设计与分析(三) -- 动态规划 高级算法设计与分析(四) -- 贪心算法 高级…

Instagram账号被封?必须了解的原因与防封技巧

您是否曾因 Instagram 帐户被暂停封禁而感到沮丧?这是一个常见问题,了解您的帐户被暂停的原因以及如何恢复帐户至关重要。 在本文中,我们将深入探讨 Instagram 帐户被封停的常见原因,并探讨重新获得访问权限的步骤。这个方法对于管…

融资项目——vue之事件监听

vue通过v-on进行事件监听,在标签中使用v-on:xxx(事件名称)进行监听,事件触发的相应方法定义在Vue对象中的methods中。如下图所示: 上述代码对按钮进行监听,点击按钮后就会触发solve函数。

Fastjson 常用语法

一.Json数据格式回顾 1.1 什么是json JSON:(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSO…

hbase用shell命令新建表报错ERROR: KeeperErrorCode = NoNode for /hbase/master

或者HMster开启后几秒消失问题解决 报错如图: 首先jps命令查看当前运行的内容有没有HMaster,如果没有,开启一下hbase,稍微等一会儿,再看一下HMaster,如果仍和下图一样没有,就基本找到问题了 本人问题原因:hbase-site…

网络基础【网线的制作、OSI七层模型、集线器、交换机介绍、路由器的配置】

目录 一.网线的制作 1.1.网线的标准 1.2.水晶头的做法 二.OSI七层模型、集线器、交换机介绍 集线器(Hub): 交换机(Switch): 三.路由器的配置 3.1.使用 3.2.常用的功能介绍 1、如何管理路由器 2、家…

WebGL在教育和培训的应用

WebGL在教育和培训领域具有广泛的应用,其强大的图形渲染能力和跨平台性使得它成为创建交互式、视觉化的数字内容的理想选择。以下是一些WebGL在教育和培训上的应用示例,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司…

算法训练营Day22

#Java #回溯 开源学习资料 Feeling and experiences: 进入到回溯算法的章节,在代码随想录中有详细的回溯算法理论基础 在此总结归纳: 刚开始接触到回溯时,看到了终止条件,递归调用.....等,发现了其与递…

【C语言】动态内存管理基础知识——动态通讯录,如何实现通讯录容量的动态化

引言 动态内存管理的函数有:malloc,calloc,ralloc,free,本文讲解动态内存函数和使用,如何进行动态内存管理,实现通讯录联系人容量的动态化,对常见动态内存错误进行总结。 ✨ 猪巴戒:个人主页✨ 所属专栏:《C语言进阶》…