requestIdleCallback 和 requestAnimationFrame 用于在浏览器中调度任务的执行

一：区别

1：调用时机上：

requestIdleCallback 利用浏览器空闲时期调用回调函数，执行更加灵活可控

requestAnimationFrame 在每个浏览器的渲染帧时调用回调函数，由浏览器的刷新率决定

2：使用目的上：

requestIdleCallback 用于在空闲时执行任务，主要一些消耗资源较多的非关键任务，以免影响关键操作和用户体验

requestAnimationFrame 用于在每个浏览器渲染帧时执行动画和更新界面的操作，以保持流畅的动画效果

3：调用频率：

requestIdleCallback 的调用频率取决于浏览器空闲时间的可用性，不确定执行时间，可能会有较长的间隔

requestAnimationFrame 的调用频率通常与浏览器的刷新率保持一致，通常为每秒60次。更加稳定和实时

4：参数上：

requestIdleCallback 的回调函数接收一个 IdleDeadline 对象参数，用于获取当前的空闲时间信息。

requestAnimationFrame 的回调函数不需要参数。

5：兼容性上

requestIdleCallback 目前在较新版本的主流浏览器中得到支持，一些旧版本的浏览器中可能不可用。

requestAnimationFrame 的兼容性相对较好。

6：回调函数处理上：

requestIdleCallback 的回调函数执行时机不确定，可能在非空闲状态下执行，需要在回调函数中进行必要的检查和处理

requestAnimationFrame 的回调函数会在每个渲染帧时被调用，相对更可靠

7：动画性能上：

requestAnimationFrame 渲染帧时调用回调函数，用于实现平滑的动画效果。浏览器会在每个渲染帧之间自动进行插值和补间处理，以确保动画的流畅性。

requestIdleCallback 的调用间隔可能会更不规则，用于一些非关键的、不需要实时更新的任务

二：总结

1：requestIdleCallback 适用于执行一些较为消耗资源的非关键任务，以充分利用浏览器的空闲时间

2：requestAnimationFrame 更适用于实现平滑的动画效果或需要实时更新界面的操作

3：requestAnimationFrame 每次渲染完在执行，高优先级，requestIdleCallback 空闲时才执行，低优先级

4：都是宏任务，要等待DOM渲染完后在执行

三：代码

window.onload = () => {
		
		setTimeout(() => {
		  console.info('timeout')
		})
		// 空闲时间才执行
		window.requestIdleCallback(() => {
		  console.info('requestIdleCallback')
		})
		window.requestAnimationFrame(() => {
		  console.info('requestAnimationFrame')
		})
		console.info('end')
	  }