在看React fiber的时候,说它的内部用到了requireIdleCallback,这个之前没怎么接触过,查了些资料,发现这东西确实不一般。它是在浏览器处于空闲状态的时候去执行一些方法,何为"空闲"呢?就是程序在执行的时候,是分成一节一节去执行的,每节执行时间为50ms,每节都有需要执行的内容(例如输入事件,绘制面板等)。假如某节中执行的任务耗费了20ms,那么剩余30ms就是空闲时间(下面中黄色的idle period)。

requireIdleCallback的简单使用

我们先来看个requireIdleCallback的简单用法:

上面就是执行一个100000到0的这么一个计算,采用requestIdleCallback,让浏览器在空闲的时候去执行,其中deadline.timeRemaining()返回的是此次空闲时间。如果在此次空闲时间中没有执行完,那么就丢给下一个空闲时间继续执行。

配置timeout

因为requireIdleCallback是在空闲的时候执行,如果浏览器一直没有空闲时间,那么岂不是不执行了?没关系,可以通过配置timeout参数,表示如果超过了指定的时间还没有执行,就会将方法推入到事件列表中执行,表现和setTimeout一样。

此时用didTimeout属性可以检测此时是否超时。

cancelIdleCallback

这个方法是用来取消requestIdleCallback的,用法也很简单:

优化大批量计算

如果有耗时的大批量计算,可以用requestIdleCallback去优化,因为有的计算会影响到UI,会造成那种卡卡的感觉,我们来模拟一个简单的大批量计算:

上面的demo中,我们可以看到方块的移动是不流畅的,因为每次要持续进行大量的计算,现在我们看用requestIdleCallback的:

我们可以看到,用requestIdleCallback优化后确实不卡了,但是执行速度却慢好多,因此在React fiber中,将原来一整块虚拟DOM计算分解成了一块一块的,用requestIdleCallback来计算优化。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字