requestAnimationFrame 与 setInterval

1. 布局绘制的逻辑不同

• setInterval：回调有多少次 DOM 操作，进行多少次计算、绘制
• requestAnimationFrame：把所有 DOM 操作集中起来，一次性进行统一的计算，进行统一的绘制

1. 窗口最小化时，运行情况不同

• setInterval：一直执行回调函数
• requestAnimationFrame：在最小化窗口时，会暂时程序，页面再打开时，会从暂停的状态继续运行 ```javascript let t = null, i = 0, j = 0;

t = setInterval(() => { console.log(‘setInterval’, i++); }, 1000)

function step() { setTimeout(() => { window.requestAnimationFrame(step); console.log(‘requestAnimationFrame’, j++); }, 1000); } window.requestAnimationFrame(step); ```

1. setInterval 导致无意义的回调执行，重绘重排的过程

• 计时时间间隔小于刷新率