setTimeout、setInterval 和 requestAnimationFrame
2022/8/28 23:53:49
本文主要是介绍setTimeout、setInterval 和 requestAnimationFrame,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
与 setTimeout 和 setInterval 不同,requestAnimationFrame 不需要设置时间间隔, 大多数电脑显示器的刷新频率是 60Hz,大概相当于每秒钟重绘 60 次。大多数浏览器都 会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也 不会有提升。因此,最平滑动画的最佳循环间隔是 1000ms/60,约等于 16.6ms。 RAF 采用的是系统时间间隔,不会因为前面的任务,不会影响 RAF,但是如果前面的 任务多的话, 会响应 setTimeout 和 setInterval 真正运行时的时间间隔。 特点: (1)requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回 流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。 (2)在隐藏或不可见的元素中,requestAnimationFrame 将不会进行重绘或回流,这当然 就意味着更少的 CPU、GPU 和内存使用量 (3)requestAnimationFrame 是由浏览器专门为动画提供的 API,在运行时浏览器会自动 优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了 CPU 开销
这篇关于setTimeout、setInterval 和 requestAnimationFrame的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15JavaMailSender是什么,怎么使用?-icode9专业技术文章分享
- 2024-11-15JWT 用户校验学习:从入门到实践
- 2024-11-15Nest学习:新手入门全面指南
- 2024-11-15RestfulAPI学习:新手入门指南
- 2024-11-15Server Component学习:入门教程与实践指南
- 2024-11-15动态路由入门:新手必读指南
- 2024-11-15JWT 用户校验入门:轻松掌握JWT认证基础
- 2024-11-15Nest后端开发入门指南
- 2024-11-15Nest后端开发入门教程
- 2024-11-15RestfulAPI入门:新手快速上手指南