企业官网建设流程全解析

宿州做网站的公司,公司网站建设劳伦,最火的推广平台,最好的国内科技网站建设欢迎使用我的小程序#x1f447;#x1f447;#x1f447;#x1f447; 俱好用助手功能介绍 大家好#xff01;今天我们来聊聊JavaScript中那个让人又爱又恨的话题——事件循环中的宏任务和微任务。别担心#xff0c;我不会用那些晦涩难懂的专业术语轰炸你#xff0c;而…欢迎使用我的小程序 俱好用助手功能介绍大家好今天我们来聊聊JavaScript中那个让人又爱又恨的话题——事件循环中的宏任务和微任务。别担心我不会用那些晦涩难懂的专业术语轰炸你而是用一个超有意思的比喻带你理解这个概念一个让人困惑的例子先看这段代码猜猜它会按什么顺序输出console.log(1. 开始点餐);setTimeout((){console.log(6. 20分钟后主菜来了);},0);Promise.resolve().then((){console.log(4. 先上开胃小菜);});console.log(2. 点完餐了);Promise.resolve().then((){console.log(5. 再上汤品);});console.log(3. 等待上菜);// 实际输出顺序// 1. 开始点餐// 2. 点完餐了// 3. 等待上菜// 4. 先上开胃小菜// 5. 再上汤品// 6. 20分钟后主菜来了咦setTimeout不是设置0毫秒吗为什么最后才执行这就是宏任务和微任务在搞鬼餐厅比喻理解事件循环想象一下JavaScript引擎就像一家餐厅主厨JavaScript引擎只能一次做一件事但他有个聪明的系统来处理所有订单。点餐台调用栈是主厨当前正在做的菜一次只能做一道。等待区任务队列是所有等待被做的菜分为两个区域VIP区微任务队列开胃小菜、汤品等优先处理的普通区宏任务队列主菜、甜点等稍后处理的什么是宏任务和微任务宏任务主菜就像餐厅的主菜需要更多准备时间setTimeout/setInterval定时器setImmediateNode.js环境I/O操作如读取文件UI渲染浏览器中整体的script代码微任务开胃菜像餐厅的餐前小点快速准备优先上桌Promise.then()/.catch()/.finally()process.nextTick()Node.js环境MutationObserver浏览器API事件循环的工作流程让我用更直观的方式展示// 事件循环的简化版流程while(true){// 1. 执行当前宏任务执行当前任务();// 2. 执行所有微任务while(微任务队列中有任务){执行微任务();}// 3. 如果需要渲染UI浏览器中// 4. 从宏任务队列取下一个任务开始下一个宏任务();}实战理解点餐流程详解让我们回到最初的例子看看具体发生了什么// 第一轮执行整体script这是一个宏任务console.log(1. 开始点餐);// 直接执行setTimeout((){console.log(6. 20分钟后主菜来了);},0);// 回调函数放入宏任务队列Promise.resolve().then((){console.log(4. 先上开胃小菜);});// 回调函数放入微任务队列console.log(2. 点完餐了);// 直接执行Promise.resolve().then((){console.log(5. 再上汤品);});// 回调函数放入微任务队列console.log(3. 等待上菜);// 直接执行// 当前宏任务执行完毕// 开始检查微任务队列...// 第二轮执行所有微任务// 执行第一个Promise回调输出4. 先上开胃小菜// 执行第二个Promise回调输出5. 再上汤品// 微任务队列清空// 第三轮执行下一个宏任务// 执行setTimeout回调输出6. 20分钟后主菜来了有趣的进阶例子console.log(客人入座);setTimeout(()console.log(主菜),0);Promise.resolve().then((){console.log(开胃菜);returnPromise.resolve();}).then((){console.log(汤品);setTimeout(()console.log(甜点),0);});console.log(点餐完成);// 输出顺序// 客人入座// 点餐完成// 开胃菜// 汤品// 主菜// 甜点注意即使setTimeout在微任务中被设置它仍然是宏任务要等到下一轮为什么这样设计JavaScript是单线程的如果没有这种优先级机制用户界面会经常卡住。微任务机制允许高优先级任务如Promise回调插队执行确保快速响应。想象一下如果你在网页上点击一个按钮它触发的Promise回调微任务需要等到所有setTimeout宏任务都执行完才能响应用户体验会有多糟糕记忆技巧同步代码 微任务 宏任务每个宏任务执行完后都会清空整个微任务队列微任务中可以产生新的微任务但要注意避免无限循环总结记住这个简单的规律宏任务像餐厅的主菜按顺序一道道上微任务像餐前小点总是在主菜之前全部上完事件循环主厨总是先做完当前菜然后处理所有小点再做下一道主菜理解宏任务和微任务能帮你避免很多异步编程的坑写出更可预测的代码。下次看到奇怪的执行顺序时想想餐厅的比喻吧希望这篇文章能帮你理清这个JavaScript的重要概念如果有疑问或想分享你的理解欢迎在评论区讨论 ️✨小测试你能预测下面代码的输出顺序吗console.log(1);setTimeout(()console.log(2),0);Promise.resolve().then(()console.log(3)).then(()console.log(4));console.log(5);把你的答案写在评论区吧