网站建设丶金手指下拉13办公空间设计经典案例

网站建设丶金手指下拉13,办公空间设计经典案例,施工企业上市公司有哪些,山西建站优化第一部分#xff1a;基础概念 1. JavaScript 执行环境 JavaScript 是单线程的#xff0c;这意味着它一次只能执行一个任务。为了处理异步操作#xff0c;JavaScript 使用事件循环机制。 2. 核心组件 调用栈#xff08;Call Stack#xff09; #xff1a;执行同步代码的地…第一部分基础概念1. JavaScript 执行环境JavaScript 是单线程的这意味着它一次只能执行一个任务。为了处理异步操作JavaScript 使用事件循环机制。2. 核心组件调用栈Call Stack执行同步代码的地方任务队列Task Queue分为宏任务队列和微任务队列事件循环Event Loop协调调用栈和任务队列的机制第二部分举例详细解析console.log(1. 同步任务开始);setTimeout((){console.log(2. setTimeout 回调);},0);Promise.resolve().then((){console.log(3. Promise.then 回调);});console.log(4. 同步任务结束);执行步骤分析第1步同步任务执行console.log(1. 同步任务开始)压入调用栈立即执行输出1setTimeout压入调用栈Web API 开始计时0ms回调函数放入宏任务队列Promise.resolve().then()压入调用栈.then()的回调函数放入微任务队列console.log(4. 同步任务结束)压入调用栈立即执行输出4此时状态调用栈空微任务队列[Promise.then回调]宏任务队列[setTimeout回调]第2步事件循环检查调用栈为空事件循环开始工作优先检查微任务队列发现有一个任务执行微任务console.log(3. Promise.then 回调)输出3微任务队列清空第3步继续事件循环微任务队列为空现在检查宏任务队列执行宏任务setTimeout回调输出2宏任务队列清空最终输出顺序1 4 3 2console.log(script start)asyncfunctionasync1(){awaitasync2()console.log(async1 end)}asyncfunctionasync2(){console.log(async2 end)}async1()setTimeout(function(){console.log(setTimeout)},0)newPromise(resolve{console.log(Promise)resolve()}).then(function(){console.log(Promise1)})关键概念async/awaitasync函数总是返回一个 Promiseawait会暂停 async 函数的执行直到 Promise 解决await后面的代码相当于放在.then()中属于微任务执行步骤分析第1步同步任务执行console.log(script start)→ 输出script start定义函数async1和async2不执行调用async1()进入async1遇到await async2()调用async2()→console.log(async2 end)→ 输出async2 endawait暂停执行console.log(async1 end)被包装成微任务放入微任务队列setTimeout→ 回调函数放入宏任务队列执行new Promiseconsole.log(Promise)是同步代码 → 输出Promiseresolve()执行.then()的回调放入微任务队列此时状态调用栈空微任务队列[async1 end, Promise1]注意顺序宏任务队列[setTimeout回调]第2步事件循环检查微任务调用栈为空执行微任务按入队顺序执行微任务第一个微任务console.log(async1 end)→ 输出async1 end第二个微任务console.log(Promise1)→ 输出Promise1微任务队列清空第3步执行宏任务执行setTimeout回调 → 输出setTimeout最终输出顺序script start → async2 end → Promise → async1 end → Promise1 → setTimeout那么到此应该是可以理解到事件循环的感觉了那接下来我们就开始看看事件循环的完整逻辑1. 任务分类宏任务MacrotaskssetTimeout、setIntervalsetImmediateNode.jsrequestAnimationFrame浏览器I/O 操作UI 渲染浏览器主线程的 script 标签内容微任务MicrotasksPromise.then()、.catch()、.finally()process.nextTick()Node.js优先级最高MutationObserver浏览器queueMicrotask()async/await的后续代码2. 事件循环执行顺序1. 执行一个宏任务script标签内容 2. 执行过程中遇到异步任务 - 宏任务 → 放入宏任务队列 - 微任务 → 放入微任务队列 3. 当前宏任务执行完毕 4. 检查微任务队列依次执行所有微任务 5. 如有必要进行UI渲染 6. 从宏任务队列取出下一个宏任务执行 7. 回到步骤3形成循环3. 重要规则规则1微任务优先每执行完一个宏任务都要清空所有微任务微任务执行期间产生的新微任务会加入当前队列并在本次循环中执行规则2async/await 转化javascriptasyncfunctionexample(){awaitfoo()// 相当于 Promise.resolve(foo()).then(...)console.log(A)// 这部分在微任务队列中}规则3多个任务队列宏任务可能有多个来源定时器、I/O等有各自的队列微任务只有一个队列按入队顺序执行在举例理解一下javascript// 测试微任务嵌套Promise.resolve().then((){console.log(微任务1);Promise.resolve().then((){console.log(微任务中的微任务);});}).then((){console.log(微任务2);});// 输出顺序微任务1 → 微任务中的微任务 → 微任务2javascript// 测试多个宏任务setTimeout(()console.log(宏任务1),10);Promise.resolve().then(()console.log(微任务1));setTimeout((){console.log(宏任务2);Promise.resolve().then(()console.log(宏任务2中的微任务));},1);Promise.resolve().then(()console.log(微任务2));setTimeout((){console.log(宏任务3);Promise.resolve().then(()console.log(宏任务3中的微任务));},0);结果 微任务1微任务2宏任务3宏任务3中的微任务 宏任务1宏任务2宏任务2中的微任务 为什么呢聪明的你已经会了 一开始 微任务 放入 微任务1 微任务2然后宏任务放入 宏任务3这个时候 计时器还没有到底100ms的时候 打印微任务1、微任务2然后微任务清空开始 宏任务3 放入微任务 宏任务3中的微任务然后打印宏任务3中的微任务 然后计时器到了打印宏任务1、宏任务2、放入微任务 打印宏任务2中的微任务大概就是这种感觉总结同步任务立即执行微任务比宏任务优先级高每个宏任务执行后都要清空所有微任务async/await本质是 Promise 的语法糖await后面的代码是微任务事件循环确保了 JavaScript 的单线程能够处理异步操作