Js中异步编程的知识扩展【异步有哪些、如何执行、宏任务和微任务等】

知识扩展学习异步编程是一种通用的编程范式很多语言都有实现异步是编程思想Java、Python、Go 都有异步但 JavaScript 因为是单线程语言对异步编程依赖度最高通过「JS 引擎 宿主环境」共同实现事件循环、宏任务 / 微任务机制。异步编程 ≠ JavaScriptJS 是单线程语言为了避免耗时操作阻塞主线程导致页面卡顿所以强制依赖异步编程模型…1.异步编程与JS的关系1.不等同异步是一种通用的编程范式并非 JS 独有。2.核心依赖JS 是单线程语言同一时间只能做一件事。3.必要性为了防止耗时的 I/O 操作网络请求、文件读写阻塞主线程导致页面卡死JS 必须依赖异步编程通过非阻塞方式处理并发任务。2.JS 中的异步编程是如何执行的JS 的执行遵循事件循环Event Loop 机制具体流程【文档理解】1.执行同步代码优先执行调用栈中的同步任务。2.处理微任务Microtasks同步任务执行完毕后立即将微任务队列Promise、queueMicrotask 等中的所有任务清空。3.更新渲染浏览器进行页面渲染UI 线程。4.处理宏任务Macrotasks从宏任务队列setTimeout、AJAX、事件等中取出一个任务执行。5.循环往复重复上述步骤。一句话总结同步执行完 - 清空微任务这里用‘清空’是因为需要一次性全部执行完 - 执行一个宏任务 - 再清空微任务…… 如此循环。【个人理解】在同一个事件循环内先执行同步任务等所有同步任务执行完毕后再执行异步任务注异步任务也分执行顺序微任务先执行 promise宏任务后执行 - 浏览器的定时器任务等3.所谓事件循环应该说的就是在一个事件内【答是的】事件循环 一次循环 一个 “事件周期 / 一轮循环”JS 执行的【一轮完整循环】这一轮里固定做三件事做完算一轮然后开始下一轮1.执行同步代码2.执行所有微任务3.执行一个宏任务这三件事走完 → 这一轮事件循环结束实践案例console.log(1 同步);setTimeout(() {console.log(2 宏任务1);Promise.resolve().then(() {console.log(3 宏任务1里的微任务);});},0);Promise.resolve().then(() {console.log(4 微任务1);});Promise.resolve().then(() {console.log(5 微任务2);});setTimeout(() {console.log(6 宏任务2);},0);console.log(7 同步);最后运行结果1 同步7 同步4 微任务15 微任务22 宏任务13 宏任务1里的微任务6 宏任务2再次总结同一个事件循环内执行所有同步任务执行所有微任务清空执行一个宏任务执行完这个宏任务后立刻检查并清空所有微任务4.事件循环和事件委托的关系【答完全没关系】1.事件循环JS 代码执行顺序机制异步、同步、微任务、宏任务2.事件委托DOM 事件绑定优化方案例如利用事件冒泡把事件绑在父元素上用来管理子元素的点击等行为。5.JS中常使用的几种异步编程方式 1.Callback回调函数需要避免回调地狱…2.Promise pending等待中、fulfilled成功、rejected失败状态一旦改变就不可逆3.async/await 优点代码同步写法、可读性强、错误处理方便、缺点不能并行执行需配合 Promise.all6.宏任务Macrotask答宏任务排队一个一个执行、微任务一次性全部执行完1.概念由 浏览器 / Node 环境提供 的异步任务。特点一次事件循环只执行一个2.包含哪些?script 标签里的整体代码setTimeout / setInterval定时器AJAX/fetch网络请求DOM 事件click、scroll、loadI/O 操作文件读写3.执行规则排队执行、一次只执行一个执行完一个必须去检查微任务7.微任务Microtask1. 概念由 JS 引擎自身提供 的异步任务。特点必须一次性全部清空才允许继续2. 包含哪些Promise.then / catch / finally最重要queueMicrotask()MutationObserver监听 DOM 变化process.nextTickNode 里3. 执行规则队列里所有微任务一次性执行完执行不完绝不往下走执行完才允许执行下一个宏任务8.微任务和宏任务区别微任务优先执行Promise.then/catch/finallyasync/await 是其语法糖、process.nextTickNode、queueMicrotask、MutationObserver浏览器宏任务后执行浏览器setTimeout、setInterval、fetch/AJAX、DOM 事件、requestAnimationFrameNodesetTimeout、setInterval、fs.readFile、I/O 操作网络请求执行顺序在一个事件循环内1.执行所有同步 →2.执行所有微任务 →3.执行1个宏任务4.执行完宏任务后再次回到步骤 2清空所有新产生的微任务5.循环往复…