今天，我介绍了一个强大的API -Window.RequestanimationFrame。它不仅可以实现光滑的动画，而且还可以充当具有性能优化的武器。由于我学会了requestAnimationframe，我将不再拼写SetInterval ...
在谈论特定功能和API使用方法之前，让我们谈论API的背景和原理。
今天，当各种电影和电视节目猖ramp时，每个人都应该对电影或动画的实现有一定的了解。最初的动画是一名工作人员。图片“锻炼”，人们认为，人类可以区分大约50毫秒/时间的频率的极端价值，也就是说，只要屏幕迅速在50毫秒内转换，人类就可以几乎找不到图片切换带来的挫败感。观察到的图片是一个光滑的图像。这是原始漫画的生产原理。
浏览器的图片类似于动画片。它也由浏览器根据一定频率绘制。通常，浏览器的刷新率为16ms绘制帧。换句话说，此频率的绘制将使人们不会完全感觉到图片的闪光，因此图像确实可以移动。
浏览器绘制每个帧，并且将在以下过程中执行：（省略一些不太相关的过程）1。启动新的帧速率2.处理输入事件3.执行请求AnimationFrame 4. HTML 5的分析，计算样式6，UpdateLayer树7.发送框架
通过此过程并不难找到。每当浏览器开始绘制新的屏幕框架时，它将执行请求安装框架。如果我们谈论与动画相关的代码，则可以通过requestAnimationFrame.T YES本身来执行它？
告诉浏览器 - 您想执行动画，并要求浏览器调用指定的回调函数以更新动画，然后再重新绘制。
例如，如果您想向右进行方形运动，那么您可以
您可以打开浏览器，F12打开控制台，然后将其复制为测试。在发现之前，该动画如何停止？
通过调用先前称为window.requestanimationframe（）方法来取消添加到计划的动画框架中的请求。
如果要通知浏览器，请勿继续执行RespectAnimationFrame的回调，那么您需要保存requestAnimationFrame的ID，例如使用SetteMeTimeout并将其传递给casterAnimationFrame
这样的
好吧，如果您在控制台上进行了测试，您会看到还有一个其他按钮可以控制动画。现在，您可以自由控制动画的开始和停止。
刚才我们举了一个简单动画的示例，所以我们会在其他情况下使用此API吗？当然，它被使用，尤其是在进行声音视频或对应用程序性能有某些要求的项目中。requestAnimationFrameThe方法基本上是无能的。可以使用。这些与动画相同。但这是一个非常常见的场景，鼠标事件
我们知道，Mousemove的触发频率很高。很多时候，我们不需要如此高的触发频率。我们经常编写拦截功能以优化性能以降低其触发的频率。更平滑，对频率没有特殊的需求。屏幕上不仅可以确保图片的平滑度，还可以减少Mousemove的触发器数量。
在此步骤中很难看到效果。如果您在移动功能中执行一个部分，则具有高性能消耗的代码（例如拖动某些DOM）需要大量计算才能使屏幕陷入困境。这次，您可以看到明显的效果
这里不再有示例。总而言之，请求inimationframe（回调）。其中，回调是您要执行的函数。当将回调作为参数传递给requestAnimationFrame时，这意味着您想在浏览器中绘制下一个帧。当调用此函数时，当您需要多次触发requestAnimationframe中，需要多次触发以在回调中包装，无论多少次您触发它，它只会在绘制帧的过程中执行它。因为它可以用作16ms的拦截函数。因此，我们可以在看似死的周期中使用它。
当然，请求inimationframe也是其存在的问题。例如，他只有在激活当前页面时才触发他，也就是说，无论您删除浏览器选项卡标签还是切换到其他程序，只要没有激活当前的浏览器页面，就不会触发requestanimationframe。在某些严格的要求下，丢失了框架。要解决这种投掷框架的方法，通常采用了聆听可见性查步事件的方法。当用户离开当前页面时，我们记录了出发时间的时间戳。当用户再次返回页面并计算此期间的动画状态时，并同时补偿动画状态，以解决丢失帧的问题。
原始：https：//juejin.cn/post/7094869601556627470