requestAnimationFrame 再理解

概述

有很长一段时间没有开发动画相关的代码了,最近看React源码,又看到了requestAnimationFrame这个API,突然忘记这个API的用法。看来还是得及时总结,做下笔记才能帮助后续理解。

官方的解释是:window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

OK,还是得用自己的话总结才能更方便理解和记忆。

显示器有固定的刷新频率(60Hz或75Hz),也就是说,每秒最多只能重绘60次或75次,requestAnimationFrame 的基本思想就是与这个刷新频率保持同步,利用这个刷新频率进行页面重绘,浏览器每次刷新前都会执行 requestAnimationFrame 中的回调函数。

特点

  • requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
  • 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存
  • requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用

为什么不使用setTimeout、setInterval

setTimeout 和 setInterval 需要设置时间间隔,他们的内在运行机制决定了事件间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行。

cancelAnimationFrame方法

cancelAnimationFrame方法用于取消重绘。 它的参数是requestAnimationFrame返回的一个代表任务ID的整数值。

实例

<html>
<body>
    <div id="container" style="width: 100px;height: 100px;background-color: aquamarine;"/>
    <script type="text/babel">
        var start = null;
        var element = document.getElementById('container');
        element.style.position = 'absolute';

        function step(timestamp) {
            if (!start) start = timestamp;
            var progress = timestamp - start;
            element.style.left = Math.min(progress / 10, 200) + 'px';
            if (progress < 2000) {
                window.requestAnimationFrame(step);
            }
        }

        window.requestAnimationFrame(step);
    </script>
</body>
</html>

container元属会随着浏览器的刷新频率,改变自己的left值,达到动画的效果。

原文链接:juejin.im

上一篇:vue从零搭建一个前中后台权限管理模板
下一篇:前端性能优化之重排、重绘与合成

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    2 个月前
  • 🍊通过爬山带同学们理解下some()和every()

    (/public/upload/76e8af3a565e6c8f8ecac8e8dbef0f6a) 简介🍊 some()与every()都是js中数组的迭代方法,结果都返回一个布尔值。

    1 个月前
  • 🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

    Intro 这篇文章将通过一个使用 React Hook 常遇到的问题(stale state)入手,尝试理解 Hook 的内部运行逻辑。 废话不多说,直接看示例Sandbox。

    1 个月前
  • (转载)如何通俗易懂的理解Redux

    作者:Wang Namelos 链接:https://www.zhihu.com/questio...(https://www.zhihu.com/question/41312576/answer/9...

    2 年前
  • 面试:彻底理解Cookie以及Cookie安全

    Cookie是什么 Cookie是服务端发送到用户浏览器并且保存到本地的一小块数据,它会在浏览器下次向同一服务器发起请求时,被携带到服务器上。 它的作用: 经常用来做一些用户会话状态管理、个性化设...

    4 个月前
  • 面试官:聊聊对Vue.js框架的理解

    前言 今年OKR定了一条KR是每一个季度进行一次前端相关技术的分享,还有十几天就到2020年了,一直忙于业务开发,没有时间准备和学习高端话题,迫于无奈,那就讲讲平时使用频率较高,却没有真正认真的了解其...

    8 个月前
  • 面试官问我:说说你对浏览器缓存的理解

    缓存类型 强缓存 定义: 当发起HTTP请求时,不会向服务器进行请求,只要当前时间在缓存有效期内,则直接从客户端缓存中获得,当缓存过期之后,才会真正想服务器发起请求重新获得资源。

    18 天前
  • 面试官: 说说你对async的理解

    大家好,我是小雨小雨,致力于分享有趣的、实用的技术文章。 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步。 分享不易,希望能够得到大家的支持和关注。

    4 个月前
  • 面向对象的程序设计——理解对象

    面向对象的程序设计 ECMA262 把对象定义为:无须属性的集合,其属性可以包含基本值、对象或者函数。 理解对象 属性类型 ECMAScript 中有两种属性:数据属性和访问器属性,...

    2 年前
  • 零代码深入浅出React并发模式,带你理解React Fiber架构

    React Fiber架构有一定的复杂度,如果硬着头皮去啃源码,我们会深陷于庞大的代码量和实现细节之中,往往学不到什么东西。 React并发模式是ReactFiber架构的重要应用,本文不贴任何Rea...

    6 个月前

官方社区

扫码加入 JavaScript 社区