解决JavaScript长任务导致页面卡顿的核心方案是：1.用Web Worker移出主线程；2.将长任务切片并用requestAnimationFrame或setTimeout分批执行；3.利用requestIdleCallback在空闲时处理低优先级任务；4.通过缓存、节流、条件判断等提前规避冗余计算。
复杂 JavaScript 运算会直接占用主线程，导致浏览器无法及时绘制帧，页面卡顿、响应延迟甚至白屏。核心思路是：不让耗时计算抢走渲染所需的时间片。
把计算任务移出主线程
Web Worker 是最彻底的解法——它在独立线程中运行 JS，完全不干扰渲染。适合图像处理、大数据解析、加密、搜索索引构建等纯计算型任务。
- 创建 worker 文件（如 calc.worker.js），将循环累加、数组排序、JSON 解析等逻辑写进去
- 主线程用 new Worker('calc.worker.js') 启动，并通过 postMessage 传数据
- worker 处理完后 postMessage 返回结果，主线程在 onmessage 中更新 DOM
- 注意：Worker 不能访问 DOM、window、document 等主线程专属对象
把长任务切片，主动让出控制权
当无法用 Worker（比如需频繁读写 DOM 或依赖闭包变量）时，可将一个大任务拆成小块，在每帧间隙执行一块。
- 用 requestAnimationFrame 跟随屏幕刷新节奏，适合与视觉强相关的操作（如分批渲染列表）
- 用 setTimeout(fn, 0) 或 queueMicrotask 把子任务推入任务队列，避免单次执行超 50ms（即“长任务”）
- 示例：处理 10 万条数据时，每批处理 200 条，处理完立即 setTimeout 下一批，保证主线程有空处理用户点击和动画
利用浏览器空闲时间做低优先级工作
requestIdleCallback 让你声明“这段代码不着急”，浏览器会在帧空闲时才执行，且能感知剩余时间，避免影响下一帧。
立即学习“Java免费学习笔记（深入）”；
- 适合日志上报、非关键数据预处理、缓存清理等后台任务
- 必须检查 deadline.timeRemaining() > 0，只在有余量时执行，否则推迟到下次空闲
- 注意兼容性：Safari 支持较晚，可用 setTimeout 降级
提前规避不必要的运算
很多“复杂运算”其实可以不发生——通过缓存、节流、条件跳过等方式减少实际执行次数。
- 对重复输入的函数结果做记忆化（Memoization），比如格式化日期、计算树形结构层级
- 监听滚动或 resize 时，用 throttle 或 debounce 控制触发频率
- 状态更新前加判断：if (newVal !== oldVal) 再执行后续逻辑，避免无效计算
- 大数据列表只计算可视区域内容（虚拟滚动），其余暂不处理
