提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

requestAnimationFrame和requestIdleCallback

2023-02-26 10:20:42 时间

传统的javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题

  • 第一个就是动画的循时间环间隔不好确定，设置长了动画显得不够平滑流畅，设置短了浏览器的重绘频率会达到瓶颈，推荐的最佳循环间隔是16.7ms（大多数电脑的显示器刷新频率是60Hz，1000ms/60）；
  • 第二个问题是定时器第二个时间参数只是指定了多久后将动画任务添加到浏览器的UI线程队列中，如果UI线程处于忙碌状态，那么动画不会立刻执行。为了解决这些问题，H5 中加入了 requestAnimationFrame以及requestIdleCallback
1. requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
2. 在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的 CPU、GPU 和内存使用量
3. requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销

requestAnimationFrame的回调会在每一帧确定执行，属于高优先级任务，而requestIdleCallback的回调则不一定，属于低优先级任务。

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

<!doctype html> <html lang="en"> <head>     <title>Document</title>     <style>         #e{             width: 100px;             height: 100px;             background: red;             position: absolute;             left: 0;             top: 0;             zoom: 1;         }     </style> </head> <body> <div id="e"></div> <script>       var e = document.getElementById("e");     var flag = true;     var left = 0;      function render() {         if(flag == true){             if(left>=100){                 flag = false             }             e.style.left = ` ${left++}px`         }else{             if(left<=0){                 flag = true             }             e.style.left = ` ${left--}px`         }     }      //requestAnimationFrame效果     (function animloop() {         render();         window.requestAnimationFrame(animloop);     })();  </script> </body> </html>
requestAnimationFrame默认返回一个id，cancelAnimationFrame只需要传入这个id就可以停止
<!doctype html> <html lang="en"> <head>     <title>Document</title>     <style>         #e{             width: 100px;             height: 100px;             background: red;             position: absolute;             left: 0;             top: 0;             zoom: 1;         }     </style> </head> <body> <div id="e"></div> <script>       var e = document.getElementById("e");     var flag = true;     var left = 0;     var rafId = null       function render() {         if(flag == true){             if(left>=100){                 flag = false             }             e.style.left = ` ${left++}px`         }else{             if(left<=0){                 flag = true             }             e.style.left = ` ${left--}px`         }     }         (function animloop(time) {         console.log(time,Date.now())         render();         rafId = requestAnimationFrame(animloop);         //如果left等于50 停止动画         if(left == 50){             cancelAnimationFrame(rafId)         }     })();      </script> </body> </html>

requestAnimationFrame和requestIdleCallback

本站部分内容转载自网络，版权属于原作者所有，如有异议请联系QQ153890879修改或删除，谢谢！
转载请注明原文链接：requestAnimationFrame和requestIdleCallback

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏
[[email protected]]
分享 (0)

相关文章