划重点 —— requestAnimationFrame

基本定义

typescript 复制代码
function requestAnimationFrame( callback: ( time: DOMHighResTimeStamp ) => void ): number
function cancelAnimationFrame(requestId: number): void

浏览器在 下一次重绘之前 调用传入给该方法的动画函数(即回调函数)。回调函数执行次数通常是 每秒 60 次 ,但在大多数遵循 W3C 建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

requestAnimationFrame() 的执行是一次性的

用途

主要用途是按帧对网页进行重绘

优缺点

优点

  • 利用显示器刷新机制,由系统决定回调函数的执行时机,节省系统资源,一般不会引起丢帧,不会卡顿;
  • 在页面不处于浏览器的当前标签,自动停止刷新,节省了CPU、GPU和电力。

缺点

在主线程上完成。主线程繁忙,requestAnimationFrame的动画效果会降低。

相关知识点

回流、重绘、回调函数、浏览器刷新频率、动画原理

相关推荐
FogLetter几秒前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元1 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api2 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
子林super10 分钟前
y1新建cluster集群redis
前端
Pedantic30 分钟前
swift 日期与时间的三个结构体
前端
南方kenny30 分钟前
Mock.js:前端开发的假数据神器
前端·javascript
芹丸子31 分钟前
vue cli 创建项目一直失败
前端
鹏程十八少35 分钟前
6.android Vivo手机 指纹解锁动画 (附源码)
前端
AliciaIr35 分钟前
深入理解React Hook:useRef的底层机制与高级应用
前端·react.js
子林super35 分钟前
Linux下各种连接数配置及高并发Nginx优化
前端