requestIdleCallback 和 requestAnimationFrame 有什么区别？

React fiber

• 组件树转换为链表，可分段渲染

• 渲染时可以暂停，去执行其他高优任务，空闲时再继续渲染

• 如何判断空闲？———— requestIdleCallback

requestAnimationFrame

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

// 使用

var timer = window.requestAnimationFrame(callback);

// 取消

window.cancelAnimationFrame(timer);

requestIdleCallback

RequestIdleCallback 简单的说，判断一帧有空闲时间，则去执行某个任务。目的是为了解决当任务需要长时间占用主进程，导致更高优先级任务(如动画或事件任务)，无法及时响应，而带来的页面丢帧(卡死)情况。故RequestIdleCallback 定位处理的是: 不重要且不紧急的任务。

// 使用

var handle = window.requestIdleCallback(callback)

// 取消

window.cancelIdleCallback(handle)

requestIdleCallback 和 requestAnimationFrame 的区别

• requestAnimationFrame 每次渲染完都会执行，高优

• requestIdleCallback 空闲时才执行，低优