腾讯云建设个人网站想学室内设计在哪里学

腾讯云建设个人网站,想学室内设计在哪里学,宁波网,wordpress文档编辑器前端新人必懂#xff1a;JavaScript事件循环机制全解析#xff08;附实战避坑指南#xff09;前端新人必懂#xff1a;JavaScript事件循环机制全解析#xff08;附实战避坑指南#xff09;引言#xff1a;你写的代码真的按顺序执行了吗#xff1f;揭开浏览器背后神秘的…前端新人必懂JavaScript事件循环机制全解析附实战避坑指南前端新人必懂JavaScript事件循环机制全解析附实战避坑指南引言你写的代码真的按顺序执行了吗揭开浏览器背后神秘的调度员——事件循环同步与异步代码如何共处一室宏任务与微任务谁先谁后不是随便定的setTimeout(fn, 0) 真的是“立刻”执行吗Promise、async/await 背后的微任务秘密Node.js 和浏览器中的事件循环有何不同面试高频题事件循环执行顺序大揭秘真实项目中因事件循环引发的诡异Bug复盘调试技巧如何用 console 和断点看清任务队列常见误区把回调函数等同于异步别闹了性能优化小贴士合理安排任务避免卡顿进阶玩法利用 queueMicrotask 手动插入微任务当你遇到“明明加了 await 却还是乱序”的时候别再被“JS是单线程”这句话骗了它其实很忙写给未来的自己一份事件循环速查备忘清单前端新人必懂JavaScript事件循环机制全解析附实战避坑指南警告下文可能让你对setTimeout(fn, 0)产生永久性心理阴影阅读前请自备瓜子、可乐与 debugger。引言你写的代码真的按顺序执行了吗先来个热身题把下面这段代码丢进控制台猜输出console.log(A);setTimeout(()console.log(B),0);Promise.resolve().then(()console.log(C));console.log(D);新手版答案A → B → C → D进阶版答案A → D → C → B灵魂版答案浏览器说“你猜对了算我输”。如果你第一次就答对恭喜你已经拿到了“事件循环免跪金牌”答错也别灰心接下来咱们把这段代码拆成原子级片段再一点点拼回成能跑的大脑。揭开浏览器背后神秘的调度员——事件循环浏览器里藏着一位“调度员”工牌上写着Event Loop。它每天的工作就是瞄一眼 JS 调用栈Stack空没空空了就跑去任务队列Queue里喊“下一个”把任务抱回栈里执行执行完继续 1.听起来像地铁安检员但别小看它——只要它罢工整个 Tab 直接卡成 PPT。画张草图假装有图┌---------------------------┐ │ JS Stack单线程 │ │ 正在执行的函数帧们 │ └------------┬--------------┘ │ pop push ▼ ┌---------------------------┐ │ Event Loop 安检口 │ └------------┬--------------┘ │ ┌------┴-------┐ ▼ ▼ ┌-----------┐ ┌-----------┐ │ 宏任务队列 │ │ 微任务队列 │ │ setTimeout │ │ Promise.then │ │ Message │ │ queueMicrotask│ └-----------┐ └-----------┘规则只有一句“一次宏任务 → 全部微任务 → 渲染 → 下一次宏任务”。背不下来就抄手心面试用得上。同步与异步代码如何共处一室先厘清“同步”和“异步”这两个老冤家同步排着队一个嗝打不出来下一个别想动。异步先领号去旁边喝咖啡轮到你了广播喊号。JS 是单线程却又要假装自己“不卡”于是把异步活儿外包给浏览器别的线程网络、定时器、DOM 事件等干完了把回调塞进队列主线程闲了再拎回来执行。代码举例// 同步部分functionsync(){console.log(我是同步我先跑);}// 异步部分functionasyncPart(){fetch(/api/user)// 浏览器别的线程去下载.then(resres.json())// 下载完把回调塞进微任务.then(dataconsole.log(网络回来啦,data));}sync();asyncPart();console.log(主线直接跑到这);输出顺序我是同步我先跑 主线直接跑到这 ...网络回来后才打印网络回来啦 {...}宏任务与微任务谁先谁后不是随便定的事件循环里有两条队伍队伍常见成员优先级宏任务setTimeout、setInterval、I/O、Message低微任务Promise.then、async/await、queueMicrotask高一次循环只拿一个宏任务但会把当前循环产生的所有微任务一口气全清掉。换句人话微任务是“加塞王者”宏任务只能乖乖排号。再来段代码感受下“加塞”console.log(1. 同步);setTimeout((){// 宏任务1console.log(2. 宏任务);Promise.resolve().then(()console.log(3. 宏任务里的微任务));},0);Promise.resolve().then((){// 微任务1console.log(4. 微任务);setTimeout(()console.log(5. 微任务里的宏任务),0);});console.log(6. 同步);结果1. 同步 6. 同步 4. 微任务 2. 宏任务 3. 宏任务里的微任务 5. 微任务里的宏任务背口诀“同 → 微 → 宏”面试写白板时先写这六个字再画图HR 会多看你两眼。setTimeout(fn, 0) 真的是“立刻”执行吗setTimeout(cb, 0)是前端界最著名的“白色谎言”。它真正的意思是“浏览器你闲了再帮我把 cb 插进宏任务但最低也要 4ms”HTML5 标准在嵌套层级深时强制 4ms。实验代码conststartperformance.now();setTimeout((){console.log(我迟到了,performance.now()-start,ms);},0);跑出来的数字大概率 ≥ 4ms。所以下次再看到“setTimeout 0 立即执行”的注释直接上去 PR把“立即”改成“尽快”。Promise、async/await 背后的微任务秘密Promise 的then/catch/finally和 async/await 本质上都是微任务。它们比宏任务快但快不过同步代码。async/await 只是 Promise 的语法糖写起来像同步跑起来还是微任务asyncfunctionfoo(){console.log(async 函数里的同步部分);await1;// 把后面的代码包进 Promise.thenconsole.log(await 后面的代码是微任务);}foo();console.log(主线程继续同步);// 输出// async 函数里的同步部分// 主线程继续同步// await 后面的代码是微任务坑点提示如果你在 for 循环里await会一次一次地把微任务插进队列量大时可能造成别的宏任务饥饿做批处理时记得用Promise.all或for await。Node.js 和浏览器中的事件循环有何不同浏览器版本上文已经画过Node 官方给的图更“螺旋”┌-------------------------┐ │ pollI/O 回调 │ └----------┬--------------┘ │check ▼ ┌-------------------------┐ │ checksetImmediate │ └----------┬--------------┘ │close ▼ ┌-------------------------┐ │ close callbacks │ └----------┬--------------┘ │timers ▼ ┌-------------------------┐ │ timerssetTimeout │ └-------------------------┘关键差异Node 的宏任务分得更细timers、poll、check、close 四阶段。微任务在每条宏任务阶段之间都会清一次而不是“一次宏任务后全部清”。setImmediate与setTimeout 0在 Node 里顺序不确定取决于当前处于哪个阶段面试常考。验证代码Node 环境setTimeout(()console.log(timer),0);setImmediate(()console.log(immediate));// 输出可能是 timer → immediate也可能相反面试高频题事件循环执行顺序大揭秘把下面这坨“面试题中的战斗机”粘进浏览器预测结果asyncfunctionasync1(){console.log(A);awaitasync2();console.log(B);}asyncfunctionasync2(){console.log(C);}console.log(D);setTimeout(()console.log(E),0);async1();newPromise((resolve){console.log(F);resolve();}).then((){console.log(G);}).then((){console.log(H);});console.log(I);标准答案D → A → C → F → I → B → G → H → E解析速记同步全跑完D A C F I然后清微任务B G H最后宏任务E背不下来抄手心 1。真实项目中因事件循环引发的诡异Bug复盘案例支付按钮连点三次订单却生成了四条记录。伪代码letcreatingfalse;asyncfunctioncreateOrder(){if(creating)return;creatingtrue;awaitapi.create();// 异步creatingfalse;}现象快速点击三次后端却收到 4 条订单。原因await api.create()期间把控制权还给事件循环微任务队列里后续的 createOrder 又跑了一次。修复用“锁”扩写把判断和置标放到同一步微任务letlockedfalse;functioncreateOrder(){if(locked)return;lockedtrue;api.create().then((){lockedfalse;}).catch((){lockedfalse;});}或者直接用同步锁如果框架允许functioncreateOrder(){returnnavigator.locks.request(order,async(){awaitapi.create();});}调试技巧如何用 console 和断点看清任务队列老派 console在关键位置打印performance.now()与任务名肉眼对比时间戳。断点 Call StackChrome DevTools → Sources → 断点打在then或setTimeout回调里右侧 Call Stack 会标明 (async)一眼识别是宏任务还是微任务。Performance 面板录制 5 秒展开 Main 线程灰色条是宏任务青色条是微任务谁长谁短一目了然。黑科技 queryObjectsConsole 里执行queryObjects(Promise)可实时查看未被回收的 Promise 数量内存泄漏排查神器。常见误区把回调函数等同于异步别闹了回调只是异步的通信方式并不等于异步。比如[1,2,3].forEach(itemconsole.log(item));// 同步回调真正异步的是把回调放到另一条线程或任务队列。所以下次听到“回调地狱”别一脸懵那是控制流混乱不是异步原罪。性能优化小贴士合理安排任务避免卡顿长任务拆片超过 50ms 的同步任务会掉帧用setTimeout或requestIdleCallback拆片functionbigCalc(list,cb){leti0;function_run(){conststartperformance.now();for(;ilist.lengthperformance.now()-start16;i){/* 处理 list[i] */}if(ilist.length){setTimeout(_run);// 扔到宏任务让浏览器喘口气}else{cb();}}_run();}批量 DOM 读写分离读会强制同步布局写会触发重排先读后写能省一次重排// 坏写→读→写→读for(consteloflist){el.style.width100px;console.log(el.clientHeight);// 强制同步布局}// 好读→写constheightslist.map(elel.clientHeight);list.forEach((el,i)el.style.width100px);微任务也别滥用微任务虽然优先级高但太多会阻塞渲染。做数据 diff 时如果量级上万分帧 宏任务更靠谱。进阶玩法利用 queueMicrotask 手动插入微任务官方提供的“后门”queueMicrotask(fn)。它比Promise.resolve().then(fn)更纯粹不创建 Promise 对象内存开销更小。场景写库时需要在当前宏任务末尾做点事但又不想污染调用者的 Promise 链functionscheduleWork(){queueMicrotask((){console.log(我在微任务里偷偷执行调用者无感知);});}注意别在微任务里再狂塞微任务会饿死宏任务和渲染。当你遇到“明明加了 await 却还是乱序”的时候大概率是你await 错了对象。functiondelay(){setTimeout((){},0);// 忘了 return Promise}asyncfunctionmain(){console.log(1);awaitdelay();// 实际上同步完成console.log(2);}main();输出1 → 2中间没有延迟。正确姿势constdelaymsnewPromise(rsetTimeout(r,ms));asyncfunctionmain(){console.log(1);awaitdelay(0);console.log(2);}别再被“JS是单线程”这句话骗了它其实很忙单线程指的是执行 JS 代码的线程只有一个但浏览器背后网络线程在下载资源合成线程在画图层光栅线程在刷像素定时器线程在数秒事件循环就是项目经理把外包团队的结果不断集成回主线程。所以别再吐槽“JS 单线程慢”慢的是你把所有活都塞给主线程干。写给未来的自己一份事件循环速查备忘清单同步代码永远最先跑。微任务在每次宏任务之后、渲染之前全部清空。宏任务按来源排队定时器 → I/O → 浏览器渲染 → 交互事件。setTimeout 0最少 4ms别指望“立即”。async/await是 Promise 的语法糖await 后面是微任务。Node 和浏览器宏任务阶段不同别混用经验。性能卡顿时拆片、分帧、读写分离、宏任务兜底。调试console performance queryObjects三板斧。锁变量时判断与置标放同步别让事件循环插队。微任务高优先级但过量会阻塞渲染适量即可。把这份清单贴在工位下次事件循环再挖坑就让它循环去吧欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进