react源码解析4-schedule

217 阅读1分钟

schedule

1.概念

1.维护时间片

2.模拟requestIdleCallback 当浏览器空闲的时候就去执行 优先级低而requestAnimationFrame优先级更高 在浏览器渲染帧的时候就执行

3.调度列表和超时判断

要保证浏览器流畅度 至少满足一秒30帧(即页面要刷新多少次) 即平均33ms执行一帧 主要包括js执行和浏览器的渲染(动画这一类的) 如果js执行比33ms大 那么这一帧就不会执行浏览器操作 而js是单线程 所以浏览器会卡顿。

所以schedule设计的目的就是每一帧js执行时间是不超过一定时间的 希望留给浏览器一定时间去相应动画

**2.expirationTime **

有3中情况 前两个简单

1.当sync下是1

2.nowork下是0

3.异步下才是具体的时间差毫秒数计算出的值 比如/10取整 和/25取整 来保证batch更新

3.执行流程

image-20210426224443712