1. 简介

requestAnimationFrame()函数就是针对动画效果的API，你可以把它用在DOM上的风格变化或画布动画或WebGL中

2. 优点

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力。

3. 与setTimeOut区别

   1）setTimeout 属于 JS 引擎，存在事件轮询，存在事件队列。
   requestAnimationFrame 属于 GUI 引擎，发生在渲 染过程的中重绘重排部分，与电脑分辨路保持一致。

   2）当页面被隐藏或最小化时，定时器 setTimeout 仍在后台执行动画任 务。
   当页面处于未激活的状态下，该页面的屏幕刷新任 务会被系统暂停，requestAnimationFrame 也会停止。

   3）利用 setTimeout，这种定时机制去做动画，模拟固定时间刷新页面。
   requestAnimationFrame 由浏览器专门为动画提供 的 API，在运行时浏览器会自动优化方法的调用，在特定性环境下可以有效节省了 CPU 开销。

4. 代码实现

const autoMove=(flag)=>{
	let dom = document.getElementById('div')
	const step=()=>{
		dom.scrollLeft = dom.scrollLeft +100
		if(flag){
			window.requestAnimationFrame(step)
		}
	}
		window.requestAnimationFrame(step)
}