时间分片技术（解决 js 长任务导致的页面卡顿）
最新回答
萌主系我
2026-10-22 22:10:58
事件循环解释微任务与宏任务的区别。微任务在宏任务执行前，页面渲染在微任务队列清空后，宏任务执行前。因此，可通过让主执行栈内的函数执行到一定时间休眠，待宏任务唤醒时继续执行，确保渲染或用户交互不卡顿。
原始长任务代码示例，动画在JS函数开始执行后暂停，直到主执行栈空闲后继续。将长任务转换为generator函数，动画不受影响，fps保持稳定，因任务被拆分执行。
优化时间分片函数，提升执行效率。将任务分解为较大块，效率提高，但fps略有影响。对比优化前后的效果，优化后效率提高约4452倍。
generator函数中的yield位置影响执行流程关键。优化后的时间分片函数提供time变量，使用者可根据实际情况调整time值，以优化执行效率和用户体验。
热门标签
