开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

程序流程- requestAnimationFrame

（RAF）是一个浏览器提供的API，用于优化动画效果的渲染。它允许开发者在下一次浏览器重绘之前执行指定的函数，通常用于创建平滑且高性能的动画效果。

RAF的工作原理是将动画函数添加到浏览器的渲染队列中，然后在下一次重绘之前调用该函数。这样可以确保动画函数在浏览器准备好渲染新帧之前执行，从而避免了不必要的重绘和性能损耗。

使用RAF可以实现更加流畅的动画效果，因为它会根据浏览器的刷新率来调整动画的帧率。这意味着动画会以每秒60帧的速度进行渲染，与大多数显示设备的刷新率相匹配。

RAF的优势包括：

高性能：RAF能够利用浏览器的硬件加速，提供更高效的动画渲染。
平滑动画：由于RAF会根据浏览器的刷新率进行调整，所以可以实现更加平滑的动画效果。
节省资源：RAF会自动暂停动画，当页面不可见或隐藏时，从而节省了系统资源。

RAF的应用场景包括但不限于：

游戏开发：RAF可以用于实现游戏中的动画效果，如角色移动、特效展示等。
网页动画：RAF可以用于创建各种网页动画效果，如滚动效果、渐变动画等。
数据可视化：RAF可以用于实时更新和渲染大量数据的可视化效果，如图表、地图等。

腾讯云提供的相关产品和服务中，与RAF直接相关的可能是云媒体处理服务。该服务提供了丰富的音视频处理能力，可以用于处理和转码各种音视频文件，满足不同场景下的需求。您可以通过以下链接了解更多关于腾讯云媒体处理服务的信息：https://cloud.tencent.com/product/mps

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

requestAnimationFrame 执行机制探索

上面的代码 1s 大约执行 60 次，因为一般的屏幕硬件设备的刷新频率都是 60Hz，然后每执行一次大约是 16.6ms。使用 requestAnimationFrame 的时候，只需要反复调用它就可以实现动画效果。

03

深度剖析浏览器渲染性能原理，你到底知道多少

作者：齐修_qixiuss https://www.jianshu.com/p/a32b890c29b1

02

我们是如何在CI流水线统计web前端FPS的？

FPS（帧率）是图像领域中的定义，是指画面每秒渲染帧数，FPS 一般在 0-60 之间，低于 30 时人眼能明显感觉到卡顿。页面交互过程中页面展示是否流畅，页面中的动画是否存在卡顿等，都需要通过 FPS 的统计指标作为页面性能的参考依据。

03

你不知道的 requestIdleCallback

本文副标题是 Request Schedule 源码解析一。在本章中会介绍 requestIdleCallback 的用法以及其缺陷, 接着对 React 团队对该 api 的 hack 部分的源码进行剖析。在下一篇中会结合优先级对 React 的调度算法进行宏观的解释, 欢迎关注个人博客。

02

JS深入浅出 - requestAnimationFrame

早期 JS 定时动画：主要通过 setTimeout 和 setIntarval 实现。 HTML5 出现后：又出现了两种实现动画的方式，1. CSS 动画（transition、animation）2. H5的 canvas 实现。与此同时，HTML5 还提供了一个专门用于请求动画的 API requesetAniamtionFrame()，统一了 DOM 动画、canvas动画、svg动画、webGL动画等的刷新机制。

03

深入解析你不知道的 EventLoop 和浏览器渲染、帧动画、空闲回调（动图演示）

关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题：

07

2020已经过去五分之四了，你确定还不来了解一下JS的rAF?

不会吧，不会吧，现在都2020年了不会还真人有人不知道JS的rAF吧？？？ rAF 简介 rAF是requestAnimationFrame的简称；我们先从字面意思上理解requestAnimati

03

requestAnimationFrame，终结定时器动画时代！

风和日丽，饶有兴致，翻开之前写的一个简单的动画插件，发现是用定时器写的，但是作为有追求的前端，一个问题怎么能有一种解决方案呢？故而，遍寻资料，终于看见曙光，让我查到了requestAnimationFrame 这个宿主对象的方法，也能能优雅的实现js动画！

02

js动画效果_js动画函数

传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作，但这种方式在使用中存在一些问题。

03

会用 Performance 工具，就能深入理解 Event Loop

网页加载后，浏览器会解析 html、执行 js、渲染 css，这些工作都是在 Event Loop 里完成的，理解了 Event Loop 就能理解网页的运行流程。

02

DOM操作

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

02

React源码解析之requestHostCallback

前言：在React源码解析之scheduleWork（下）中，我们讲到了unstable_scheduleCallback，其中在「按计划插入调度任务」后，会调用requestHostCallback()方法：

02

js动画requestAnimationFrame详解「建议收藏」

requestAnimationFrame() 他的作用就是代替定时器做更加流畅高性能的动画，做可以匹配设备刷新率的动画，他解决了定时器做动画时间间隔不稳定的问题（也就是解决定时器做动画不流畅的问题）。他的用法与setTimeout差不多。

02

Event Loop 和 JS 引擎、渲染引擎的关系

本文会讲 JS 引擎的编译流水线、渲染引擎的渲染流程，然后引入为什么需要 event loop。

02

React: Lottie 动画初体验和优化策略

lottie 是 Aribnb 开源一个主要面向 Web、iOS、Android、React Native、Windows 的动画库，可以实时渲染After Effects动画，并以Bodymovin作为json导出，允许应用程序像使用静态图像一样轻松使用动画，一款协同合作的高效软件。

04

性能优化之渲染

合成器线程可以单独处理用户的交互并使内容更变,不需求主线程去执行,主线程执行js、布局、样式、绘制。

01

setTimeout和requestAnimationFrame

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事，前面的任务没做完，后面的任务只能等着。

02

【前端性能】Web 动画帧率（FPS）计算

我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状况，从而更好的优化它们，本文就是介绍 Web 动画帧率（FPS）计算方法。流畅动画的标准首先，理清一些概念。FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。理论上说，F

03

【前端性能】Web 动画帧率（FPS）计算

我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状况，从而更好的优化它们，本文就是介绍 Web 动画帧率（FPS）计算方法。流畅动画的标准首先，理清一些概念。FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。理论上说，F

09

前端-动画大乱炖

作为一只前端开发者，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新。

02

基于TensorFlow.js在浏览器上构建深度学习应用

在前面的章节，我们讨论了各种JavaScript概念和运行在浏览器上的各种深度学习框架。在本章中，我们将所有的知识付诸于实践，证明该技术的潜力。

04

《现代Javascript高级教程》优化动画和渲染的利器

在Web开发中，实现平滑且高性能的动画和渲染是一个关键的需求。而requestAnimationFrame是浏览器提供的一个用于优化动画和渲染的API。它可以协调浏览器的刷新率，帮助开发者实现流畅的动画效果，并提供更高效的渲染方式。本文将详细介绍requestAnimationFrame的属性、应用场景以及使用示例，帮助读者深入理解和应用这一强大的工具。

02

浏览器渲染原理及流程

大多数设备的刷新频率是60Hz，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。前端的用户体验给了前端直观的印象，因此对B/S架构的开发人员来说，熟悉浏览器的内部执行原理显得尤为重要。

03

【今天你更博学了么】一个神奇的前端动画 API requestAnimationFrame

本文主要学习 requestAnimationFrame API ，顾名思义，请求动画帧，也称帧循环。

02

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame

01

点击按钮，回到页面顶部的5种写法

2.scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

03

requestAnimationFrame

即不用手动设置执行间隔时间，而是根据浏览器屏幕刷新次数自动调整了,也就是说浏览器屏幕刷新多少次，它就执行多少次。

01

jQuery源码解析之$().animate()（下）

所以Animation.prefilters=1，defaultPrefilter的源码暂不解析

01

前端技术观察第26期

《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块： Highlights 优秀的工具、库好的教程、深度解读已有技术的文章业界最新的技术、热点文章业界对（新）技术的深度地、优秀地实践 Tutorial Tools And Codes 《前端技术观察》的目的是让大家：更及时的了解到业界最新的技术受益于高质量的教程、文章了解业界更优秀的代码、工具更多地、氛围更浓厚地讨论、研究、落地技术 highlights 浏览器如何节流requestAnim

02

前端动画大乱炖

作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。

02

Thinking--FastDom消除浏览器布局抖动

对于大量操作 DOM 的场景，页面时常会出现卡顿现象，导致用户体验不佳。卡顿的原因是由于掉帧导致！！

02

使用 requestAnimationFrame 实现动画

首先想到的是 setInterval/setTimeout，原理就是利用人眼的视觉残留和电脑屏幕的刷新，让元素以连贯平滑的方式逐步改变位置，最终实现动画的效果。

03

requestAnimationFrame简介

当我们写window.requestAnimationFrame(回调函数)时，浏览器会在下次重绘前执行回调函数。

02

高中物理学运动公式实现js动画

在网页上创建动画一般有两种方式：css和javascript。它们在创建动画的时间和性能上是不一样的，各有利弊。选择哪种方法实际上取决于项目，以及想要实现什么类型的动画。

01

一位摸金校尉决定转行前端

我们这行起源于东汉末年三国时期。曹操为了弥补军饷的不足，设立发丘中郎将，摸金校尉等军衔，专司盗墓取财，贴补军饷。

01

使用 requestAnimationFrame 替代 throttle 优化页面性能

前面的文章《函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用》中讲过，对于 mousemove, scroll 这类事件，一般的解决方法是使用 throttle 节流函数，但是节流函数解决这类问题并不完美，存在两点缺陷：

09

【JS】666- window.reqeustIdleCallback方法详解

最初我以为这个函数就是和实现动画的 requestAnimationFrame 拥有相同的行为，因为它们的使用方法非常类似，但实际使用后发现它们的差别还是蛮大的。本文主要对这个神秘的函数进行一些说明和分析。

02

JS：指定FPS帧频，requestAnimationFrame播放动画

Flash制作动画，最基础的概念就是帧，但在Flash中，帧频的控制比较简单，只需要编译前指定一下目标帧频就可以了。实际运行时，不需要我们关心定时器的问题，flash player会定时触发EnterFrame消息，推动Movieclip播放。在js这一侧，需要我们设定一个定时器，并推动相应的绘制逻辑执行。最简单： var FPS = 60; setInterval(draw, 1000/FPS); 这个简单做法，如果draw带有大量逻辑计算，导致计算时间超过帧等待时间时，将会出现丢帧。除外，如果F

02

深入理解 RequestAnimationFrame

在Web应用中，实现动画效果的方法很多，Javascript 中可以通过SetInterval来实现，CSS 3可以使用 Transition 和 Animation 来实现，HTML 5 中Canvas 也可以实现，另外，HTML 5 还提供一个专门请求动画的API ，即RequestAnimationFrame，顾名思义就是请求动画帧，为了深入理解 RequestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：

01

通过漫天花雨来入门 Three.js

随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架，是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。

07

JavaScript异步编程

平时开发经常会用到js异步编程，由于前端展示页面都是基于网络机顶盒（IPTV的一般性能不太好，OTT较好），目前公司主要采取的异步编程的方式有setTimeout、setInterval、requestAnimationFrame、ajax，为什么会用到异步呢，就拿业务来说，若前端全部采取同步的方式，那加载图片、生成dom、网络数据请求都会大大增加页面渲染时长。

02

Threejs入门之六:利用HTML5的requestAnimationFrame方法实现物体的旋转

requestAnimationFrame是html5 提供一个专门用于请求动画的API，用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行 requestAnimationFrame有以下几个特点 1.requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，如果系统绘制率是 60Hz，那么回调函数就会16.7ms再被执行一次，也就是说，requestAnimationFrame的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。 2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，减少了CPU、GPU和内存使用量 3.requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节CPU的开销

02

requestAnimationFrame实现动画效果

html动画一般会采用css3的形式去做，当然也比较建议用css去做动画。但是有时候一些动画只能使用js来完成，常用的js动画方案是使用计时器来完成。编写动画循环的一个关键在于我们要延迟多长时间比较合适，如何设置时间才能让动画显得平滑顺畅，这个时间并不是越小越好，因为要遛狗足够的时间间隔来让浏览器产生渲染变化，否则就会变成跳跃感。

03

遇见requestAnimationFrame

今天，在读javascript异步编程的js事件深入理解部分的时候，了解到了requestAnimationFrame 这个api，在这里记录一下。原文： setTimeout 和 setInterval 就是些不精确的计时工具。在Node中，如果只是想产生一个短时延迟，请使用 process.nextTick。在浏览器端，请尝试使用垫片技术（shim ） ③ ：在支持requestAnimationFrame 的浏览器中，推荐使用requestAni

06

跟着whatwg看一遍事件循环

对于单线程来说，事件循环可以说是重中之重了，它为任务分配不同的优先级，井然有序的调度。让js解析，用户交互，页面渲染等互不冲突，各司其职。

01

微任务、宏任务与Event-Loop

首先，JavaScript是一个单线程的脚本语言。所以就是说在一行代码执行的过程中，必然不会存在同时执行的另一行代码，就像使用alert()以后进行疯狂console.log，如果没有关闭弹框，控制台是不会显示出一条log信息的。亦或者有些代码执行了大量计算，比方说在前端暴力破解密码之类的鬼操作，这就会导致后续代码一直在等待，页面处于假死状态，因为前边的代码并没有执行完。

02

干货 | 携程火车票7个优化动画性能的方法

携程火车票营销页使用 css 制作动画很多年了，这大大提高了动画给予页面丰富的视觉体验。不过，在开发的过程中，也遇到了一些性能相关问题和用户反馈，比如头部动画卡顿、页面打开时间较长、页面打开后部分数据加载时间较长等问题。为解决这些问题，我们借助性能检测工具定位问题，并查阅源码、文档等资源解决问题，形成了这篇文章。

03

如何计算浏览器页面的帧数 FPS？

requestAnimationFrame 方法接受一个回调函数，并会在浏览器下一次重渲染前调用这个回调函数。

01

微信小游戏初体验

前言上周【跳一跳】小游戏刷遍了朋友圈，也代表了微信小程序拥有了搭载游戏的功能（早该往这方面发展了，这才是应该有的形态嘛）。作为一个前端er，我的大刀早已经饥渴难耐了，赶紧去下一波最新的微信官方开发工

07

JavaScript各种定时器总结

setTimeout和setInterval已经存在已久了，我们什么场景下会使用它们完成我们的业务呢？我列举一些例子：

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭