• requestAnimationFrame(callback) 回调函数会在绘制之前执行
    • requestAnimationFrame(callback) 会在浏览器每次重绘前执行callback调用，每次callback执行的时机都是浏览器刷新下一帧渲染周期的起点上
    • requestAnimationFrame(callback) 的回调 callback 回调参数 timestamp 是回调 被调用的时间，也就是当前帧的起始时间
    • requestAnimation FrameTime preformance.timing.navigationStart + performance.now() 约等于Date.now()
      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>RequestAnimationFrame</title>
      8. </head>
      9. <body>
      10.   <div style="background-color:blue; width: 0; height: 20px;"></div>
      11.   <button>开始</button>
      12.   <script>
      13.       let div = document.querySelector('div');
      14.       let button = document.querySelector('button');
      15.       let startTime;
      16.       function progress () {
      17.           div.style.width = div.offsetWidth+1+'px';
      18.           div.innerHTML = div.offsetWidth+'%';
      19.           if(div.offsetWidth<100){
      20.               console.log(Date.now()-startTime+"ms")
      21.               startTime = Date.now();
      22.               requestAnimationFrame(progress)
      23.           }
      24.       }
      25.       button.onclick = function(){
      26.           div.style.width = 0;
      27.           startTime = Date.now();
      28.           // 浏览器会在每一帧渲染前执行progress
      29.           requestAnimationFrame(progress);
      30.       }
      31.   </script>
      32. </body>
      33. </html>