• 每日一学—Web API之requestAnimationFrame

    前言：If you’ve never written code to animate inside the browser, you can stop reading :) ( ´･･)ﾉ(._.`)

    最近在刷题的时候看到一个比较陌生词，一开始并不清楚这个方法（暂定为陌生的方法，其实是API）是什么，简单翻译一下这三个词的组成分别是请求、动画、框架，结合题目和Animation(动画)这个单词，推测这个方法是与动画有关。

    相关的题目如下

    1. // 以下代码执行后，console 输出的信息是？ 
    2. for (let i = 0; i < 5; i++) {
    3. 	requestAnimationFrame(() => console.log(i));
    4. }

    🧩关于 requestAnimationFrame 概述

    • requestAnimationFrame我们可以理解为是一个请求动画帧的接口，它是浏览器用于定时循环操作的一个接口，类似于定时器，主要用途是按帧对网页进行重绘。

    • 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

    • requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

    ❗不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

    • 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

    ❗ps：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

    • 当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当 运行在后台标签页或者隐藏的