requestIdleCallback 在react里面的应用

先看看17设计思路。 react.iamkasong.com/preparation…

1、先看看requestIdleCallback这个api的作用

将优先级不高的任务放入回调中，在浏览器完成用户交互后如果当前帧还有剩余时间则执行回调队列的任务。

let taskQueue = [
  () => {
    console.log('task1 start')

    console.log('task1 end')
  },
  () => {
    console.log('task2 start')
    var j = 2
    for (var i = 1; i < 1000000000; i++) {
      j = j * i
    }
    // sleep(950)
    console.log('task2 end')
  },
  () => {
    console.log('task3 start')

    console.log('task3 end')
  }
]

const performUnitWork = (deadline) => {
  // 取出第一个队列中的第一个任务并执行
  var t1 = Date.now()
  console.log('1111', t1, `此帧的剩余时间为: ${deadline.timeRemaining()}`)
  taskQueue.shift()()
  console.log('2222', "执行时长:", Date.now() - t1)
}

const workloop = (deadline) => {
  // 如果此帧剩余时间大于0或者已经到了定义的超时时间（上文定义了timeout时间为1000，到达时间时必须强制执行），且当时存在任务，则直接执行这个任务
  // 如果没有剩余时间，则应该放弃执行任务控制权，把执行权交还给浏览器
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskQueue.length > 0) {
    performUnitWork(deadline)
  }
  console.log('next ,剩余任务交给下一帧渲染完成后')

  // 如果还有未完成的任务，继续调用requestIdleCallback申请下一个时间片
  if (taskQueue.length > 0) {
    window.requestIdleCallback(workloop, { timeout: 1000 })
  }
}

requestIdleCallback(workloop, { timeout: 1000 })

2、 react 版本的requestIdleCallback 之scheduler ，

除了在空闲时触发回调的功能外，Scheduler还提供了多种调度优先级供任务设置。

有独立包： www.npmjs.com/package/sch…