RAF,RIC,SetTimeout 运用

RequestAnimationFrame

是在浏览器下一次重绘前执行-->而这个执行的时机,取决于浏览器的刷新率, 以常见的60HZ 为例子,相当于每一帧执行时间为16.6ms ,那也就是说,如果浏览器做到,每16.6 ms 做一次视图更新,那么效果就会很流畅,反之. eg:

chart.on('datazoom', (e) => {
  requestAnimationFrame(() => {
    updateChart(e.range); // 更新横轴范围
  });
});

setTimeout setInterval

1.他们也可以设置执行间隔,但是为何不准,那是因为从js 事件循环体系上来说,定时器内部的执行时机,实际取决于宏任务,取出执行的时机,因此不会准. 并且还因为js为单线程,假如此时主线程一直在忙碌,那么定时器执行回调就会延迟执行,也会不准确.

RequestIdelCallback

1. 执行时机: 浏览器空闲时,才会执行,我在比如sdk上报模块,内会在浏览器空闲时再去执行,以及react 内部也是利用类似的思路,进行类似子任务的执行,(待补充:...)
2. 不过实际场景复杂,假如比较长的时间一直不空闲,那也不能一直不上报吗,可以设置timeout参数,作为兜底

requestIdleCallback((deadline) => {
   // deadline.timeRemaining()
   // 当前帧剩余的空闲时间（毫秒）** 。
    //比如一帧 16ms，渲染花了 10ms， //`timeRemaining()` ≈ 6ms
   if (deadline.timeRemaining() > 0) {
       task()
   }
}, {
   timeout: 500
})