#页面上有100万个任务需要执行，如何保证页面不卡顿?

核心：为浏览器留下渲染的时间

#1. 分批执行任务:

• 不要一次性全部执行 100 万个任务,而是将其分成多个小批次执行。
• 可以使用 setTimeout 或 requestAnimationFrame 等方法,每次执行一小批任务,并在下一个空闲时间片再执行下一批。
• 这样可以确保每次执行的任务数量不会过多,从而避免阻塞主线程,导致页面卡顿。

#2. 使用 Web Worker:

• 将耗时的任务移到 Web Worker 中执行,让主线程保持响应。
• Web Worker 运行在独立的线程中,不会阻塞主线程的 UI 更新和交互响应。
• 主线程可以与 Web Worker 通过消息传递的方式进行通信,从而协调任务的执行和结果的处理。

#3. 利用 requestIdleCallback:

• 使用 requestIdleCallback 在浏览器空闲时执行任务。
• 这样可以确保任务执行不会影响到用户的交互体验。
• 可以在 requestIdleCallback 的回调函数中分批执行任务,并根据 deadline 对象调整任务的执行策略。

#4. 增量式更新 UI:

• 不要一次性将所有 100 万个任务的结果渲染到页面上,而是采取增量式更新 UI。
• 每执行完一批任务,就立即更新页面上相应的部分,而不是等到所有任务都完成后再一次性更新。
• 这样可以保证用户在任务执行过程中也能看到部分结果,从而获得更好的体验。

#5.React Fiber：React 16中引入的新的调度算法，可以将任务拆分成多个小任务，优先级高的任务先执行。