JS 执行 100 万个函数， 还能保证浏览器不卡？
最新回答
他年词笔隐
2026-03-11 16:22:55
处理长任务，有几种方法可以避免浏览器卡顿。首先，通过web worker技术，将计算密集型任务放到worker线程中执行，避免阻塞主线程。web worker线程在主线程之外，专注于执行复杂计算，即便存在长任务，也不会影响页面的构建和渲染。
实现web worker简单直接，只需在HTML中引入worker脚本，然后通过postMessage进行数据传递。虽然worker线程解决了主线程的长任务问题，但若需要实时通信计算结果，仍可能面临卡死风险。不过，web worker不是本文讨论的重点。
另一种方法是利用requestAnimationFrame实现任务调度。通过将大批量执行任务分割，以每秒60次的频率执行，确保动画在不同设备上保持流畅。例如，创建一个执行100万个函数的示例代码，利用requestAnimationFrame进行任务分割，每一帧执行一小块函数任务，避免长任务的出现，从而达到丝滑运行的效果。
为确保浏览器性能，动态计算chunkSize（每次执行函数的数量）至关重要。通过对比每帧执行耗时（约16ms）与程序实际执行时间，动态调整chunkSize，保证在规定时间内完成任务，同时避免浏览器卡顿。这种方法既确保了函数的快速执行，又考虑了浏览器的资源分配。
通过上述方法，执行百万个函数仅需1秒多，且浏览器运行流畅。最后，本文提供了一个简单的任务调度实现思路，实际任务调度器复杂度更高，可以参考如React调度器的实现。此外，提供了一个执行100万个函数保证浏览器不卡顿的代码示例。
热门标签
