H5 JavaScript 事件循环与任务调度

摘要：JavaScript 的任务调度影响界面响应、定时器精度和异步结果顺序。本文介绍调用栈、任务队列、微任务和浏览器绘制之间的关系。

一、区分同步执行与排队工作

当前调用栈中的同步代码会持续运行，直到结束后事件循环才有机会处理后续工作。长时间计算会阻塞输入和绘制，即使代码内部多次更新 DOM，浏览器也可能等到脚本结束后才显示画面。

将大任务拆分成小批次，给浏览器处理输入和绘制的机会。对独立的大量计算，可以评估使用工作线程。

二、理解微任务

Promise 回调等微任务通常在当前任务结束后、浏览器进入下一次渲染机会前处理。微任务中持续追加新的微任务可能饿死后续任务和绘制。

因此，微任务适合完成短小的状态衔接，不适合无限递归或长时间批处理。需要让出渲染机会时，应选择能回到事件循环后续阶段的调度方式。

三、理解定时器限制

定时器指定的是最早触发时间，不是精确执行承诺。主线程忙碌、页面进入后台或浏览器节流都会延迟回调。

动画和视觉更新应由浏览器动画帧调度。周期性业务也不应依赖后台页面中的短间隔定时器保持精确。

四、协调异步结果顺序

搜索等连续输入会产生多个并发请求。旧请求晚于新请求返回时，可能覆盖当前结果。可以取消旧任务，或为每次请求分配序号，仅接受最新序号对应的结果。

错误、取消和无结果要分别表示。异步流程的状态应明确包括进行中、成功、失败和取消等阶段。

五、避免主线程长任务

解析大 JSON、处理海量列表和同步图像操作可能阻塞主线程。先测量任务耗时，再考虑拆分、缓存或交给工作线程。任务分片还要控制每批大小，避免增加过多调度开销。

六、调试顺序问题

将每个任务的开始和完成记录下来，确认实际执行顺序。测试不要依赖某个定时器精确在固定毫秒执行，而应等待明确条件。页面隐藏和恢复也要验证状态是否正确。

七、总结

理解同步任务、微任务、定时器和绘制机会的相对关系，有助于解释界面为何延迟或结果为何乱序。把长工作拆短、让动画由帧调度，并明确异步结果的有效性规则，可以提升响应性。