• 快速响应用户，让用户觉得够快，不阻塞用户的交互
    • requestIdleCallback 使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键时间，如动画、输入响应
    • 正常帧任务完成后没超过16ms，说明事件有富余，此时就会执行requestIdleCallback里注册的任务
    • requestAnimationFrame 的回调会在每一帧确定执行，属于高优先级任务，而requestIdleCallback的回调则不一定，属于低优先级任务
    1. window.requestIdleCallback(
    2.     callback: (deaLine: IdleDeadline) => void，
    3.     option?:{timeout: number} 
    4. )
    6. interface IdleDeadline{
    7.     didTimeout: boolean // 表示任务执行是否超过约定时间
    8.     timeRemaining():  DOMHighResTimeStamp // 任务可供执行的剩余时间
    9. }
    • callback: 回调函数就是浏览器空闲时需要执行的任务，该回调函数接受一个IdleDeadline对象作为入参，其中IdleDeadline对象包含：
      • didTimeout, 布尔值，表示任务是否超时，结合timeRemaining使用
      • timeRemaining()， 表示当前帧剩余的时间，也可理解为留给任务的时间还有多少
    • options： 目前options只有一个参数
      • timeout，表示超过这个时间后，如果任务还没执行，则强制执行，不必等待空闲时间，但是对性能会造成一定影响
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <script>
    11.         function sleep(duration) {
    12.             let start = Date.now();
    13.             while(start + duration > Date.now()){}
    14.         }
    17.         function progess(){
    18.             console.log('progess')
    19.             requestAnimationFrame(progess)
    21.         }
    22.         // requestAnimationFrame(progess)
    24.          // 深度遍历优先
    25.          const works = [
    26.             ()=>{
    27.                 console.log('A1开始')
    28.                 sleep(20)
    29.                 console.log('A1结束')
    31.             },
    32.             ()=>{
    33.                 console.log('B1开始')
    34.                 sleep(20)
    36.                 console.log('B1结束')
    38.             },
    39.             ()=>{
    40.                 console.log('C1开始')
    41.                 sleep(20)
    43.                 console.log('C1结束')
    45.             },
    46.             ()=>{
    47.                 console.log('C2开始')
    48.                 sleep(20)
    50.                 console.log('C2结束')
    52.             },
    53.             ()=>{
    54.                 console.log('B2开始')
    55.                 sleep(20)
    57.                 console.log('B2结束')
    59.             }
    60.         ]
    62.         requestIdleCallback(workLoop)
    64.         function workLoop(deadline){
    65.            // deadline 是一个函数，返回本帧还剩余多少时间
    66.            console.log(`本帧剩余时间${parseInt( deadline.timeRemaining())}ms`)
    68.            while(deadline.timeRemaining() > 1 && works.length > 0){ // 本帧还有空闲时间+我还有任务没完成
    69.                 performUnitOfWork(); 
    70.            }
    71.            if(works.length > 0){
    72.             requestIdleCallback(workLoop)
    73.            }
    74.         }
    76.         function performUnitOfWork () {
    77.             let work = works.shift()
    78.             work()
    79.             // works.shift()()
    80.         }
    82.     </script>
    83. </body>
    84. </html>