JavaScript 事件循环中的微任务与渲染时机:一次真实页面卡顿的排查记录
页面在持续处理 WebSocket 推送数据时出现间歇性卡顿,用 Performance 面板录制后发现,长任务被拆成了大量微任务,而关键帧渲染被推迟到了这批微任务全部清空之后。这个问题在实时数据看板、聊天界面、协作编辑这类高频更新的场景里很容易碰到:数据到达速度略高于渲染速度,代码里又习惯性用 Promise 做批处理,结果微任务队列越积越长,浏览器始终找不到机会执行样式计算和绘制。文章从一次具体的卡顿排查出发,先梳理事件循环里宏任务、微任务和渲染步骤的实际执行顺序,再讨论 Promise 链和 queu...