在Web开发中，实现平滑且高性能的动画和渲染是一个关键的需求。而requestAnimationFrame是浏览器提供的一个用于优化动画和渲染的API。它可以协调浏览器的刷新率，帮助开发者实现流畅的动画效果，并提供更高效的渲染方式。本文将详细介绍requestAnimationFrame的属性、应用场景以及使用示例，帮助读者深入理解和应用这一强大的工具。
本文主要学习 requestAnimationFrame API ， 顾名思义，请求动画帧，也称 帧循环。
即不用手动设置执行间隔时间，而是根据 浏览器屏幕刷新次数 自动调整了,也就是说浏览器屏幕刷新多少次，它就执行多少次。
首先想到的是 setInterval/setTimeout，原理就是利用人眼的视觉残留和电脑屏幕的刷新，让元素以连贯平滑的方式逐步改变位置，最终实现动画的效果。
上面的代码 1s 大约执行 60 次，因为一般的屏幕硬件设备的刷新频率都是 60Hz，然后每执行一次大约是 16.6ms。使用 requestAnimationFrame 的时候，只需要反复调用它就可以实现动画效果。
当我们写window.requestAnimationFrame(回调函数)时，浏览器会在下次重绘前执行回调函数。
传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作，但这种方式在使用中存在一些问题。
前面的文章《函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用》中讲过，对于 mousemove, scroll 这类事件，一般的解决方法是使用 throttle 节流函数，但是节流函数解决这类问题并不完美，存在两点缺陷：
早期 JS 定时动画：主要通过 setTimeout 和 setIntarval 实现。 HTML5 出现后：又出现了两种实现动画的方式，1. CSS 动画（transition、animation）2. H5的 canvas 实现。 与此同时，HTML5 还提供了一个专门用于请求动画的 API requesetAniamtionFrame()，统一了 DOM 动画、canvas动画、svg动画、webGL动画等的刷新机制。
不会吧，不会吧，现在都2020年了不会还真人有人不知道JS的rAF吧？？？ rAF 简介 rAF是requestAnimationFrame的简称； 我们先从字面意思上理解requestAnimati
Flash制作动画，最基础的概念就是帧，但在Flash中，帧频的控制比较简单，只需要编译前指定一下目标帧频就可以了。 实际运行时，不需要我们关心定时器的问题，flash player会定时触发EnterFrame消息，推动Movieclip播放。 在js这一侧，需要我们设定一个定时器，并推动相应的绘制逻辑执行。 最简单： var FPS = 60; setInterval(draw, 1000/FPS); 这个简单做法，如果draw带有大量逻辑计算，导致计算时间超过帧等待时间时，将会出现丢帧。除外，如果F
在Web应用中，实现动画效果的方法很多，Javascript 中可以通过SetInterval来实现，CSS 3可以使用 Transition 和 Animation 来实现，HTML 5 中Canvas 也可以实现，另外，HTML 5 还提供一个专门请求动画的API ，即RequestAnimationFrame，顾名思义就是请求动画帧，为了深入理解 RequestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：
requestAnimationFrame是html5 提供一个专门用于请求动画的API，用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行 requestAnimationFrame有以下几个特点 1.requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，如果系统绘制率是 60Hz，那么回调函数就会16.7ms再被执行一次，也就是说，requestAnimationFrame的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。 2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，减少了CPU、GPU和内存使用量 3.requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节CPU的开销
html动画一般会采用css3的形式去做，当然也比较建议用css去做动画。但是有时候一些动画只能使用js来完成，常用的js动画方案是使用计时器来完成。编写动画循环的一个关键在于我们要延迟多长时间比较合适，如何设置时间才能让动画显得平滑顺畅，这个时间并不是越小越好，因为要遛狗足够的时间间隔来让浏览器产生渲染变化，否则就会变成跳跃感。
今天，在读javascript异步编程的js事件深入理解部分的时候，了解到了requestAnimationFrame 这个api，在这里记录一下。 原文： setTimeout 和 setInterval 就是些不精确的计时工具。在Node中，如果只是想产生一个短时延迟，请使用 process.nextTick。在 浏 览 器 端 ， 请 尝 试 使 用 垫 片 技 术 （shim ） ③ ： 在 支 持requestAnimationFrame 的 浏 览 器 中 ， 推 荐 使 用requestAni
requestAnimationFrame 方法接受一个回调函数，并会在 浏览器下一次重渲染前调用 这个回调函数。
setTimeout和setInterval已经存在已久了，我们什么场景下会使用它们完成我们的业务呢？我列举一些例子：
卡顿大概是前端遇到的问题的最棘手的一个，尤其是卡顿产生的时候常常无法进行其他操作，甚至控制台也打开不了。
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
由于JS是单线程，所以同一时间只能执行一个任务，其他任务就得排队，后续任务必须等到前一个任务结束才能开始执行。
风和日丽，饶有兴致，翻开之前写的一个简单的动画插件，发现是用定时器写的，但是作为有追求的前端，一个问题怎么能有一种解决方案呢？故而，遍寻资料，终于看见曙光，让我查到了requestAnimationFrame 这个宿主对象的方法，也能能优雅的实现js动画！
requestAnimationFrame() 他的作用就是代替定时器做更加流畅高性能的动画，做可以匹配设备刷新率的动画，他解决了定时器做动画时间间隔不稳定的问题（也就是解决定时器做动画不流畅的问题）。他的用法与setTimeout差不多。
只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发， 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。
屏幕刷新频率即图像在屏幕上更新的速度，即每秒图像更新的次数，它的单位是赫兹（Hz）。一般笔记本的值是60Hz。这个值受屏幕分辨率、屏幕尺寸、显卡影响。
这期为大家带来的是canvas的动画绘制案例与讲解。不知道大家上一期canvas绘制基本图形的入门教程看的怎么样了，如果已经遗忘了或者还没看的小伙伴建议先去看一下，上一期是学习这一期的基础：
JavaScript 是一种单线程的编程语言，这意味着它一次只能执行一个任务。为了能够处理异步操作，JavaScript 使用了一种称为事件循环（Event Loop）的机制。
在网页上创建动画一般有两种方式：css和javascript。它们在创建动画的时间和性能上是不一样的，各有利弊。选择哪种方法实际上取决于项目，以及想要实现什么类型的动画。
BackTop 即滚动到页面顶部，是很多网站都会用到的基础功能，实现方法很多，Github 上也有许多优秀的三方库，如 smooth-scroll，但如何优雅实现也是一门学问。
今天有一位同学，在群里问了这一个问题：requestAnimationFrame 的执行机制如何
在很久以前，有写过一个使用 js 实现单张图片持续滚动图片的 代码，但那一版实现会持续操作DOM，向DOM中插入元素，性能较差，最近发现 requestAnimationFrame 通过 动画的方式实现图片滚动更加方便，遂重新实现了一版，效果更赞，性能更好。
2.scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
实习导师让我实现表格内容自动滚动，实际就是大屏项目可能会用上的。正好之前看到rAF的介绍，实际上也没用过，所以就用rAF来玩一波。
javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。（❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~）
SVG动画由SVG元素内部的元素属性控制，一般通过一下几个元素控制： - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化，但用就能控制 - 控制如缩放、旋转等几何变化 - 控制SVG内元素的移动路径
本文是深入浅出 ahooks 源码系列文章的第七篇，这个系列的目标主要有以下几点：
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/85006973
JavaScript 是一种单线程的编程语言，这意味着它一次只能执行一个任务。为了能够处理异步操作，JavaScript 使用了一种称为事件循环（Event Loop）的机制。本文将深入探讨事件循环的工作原理，并展示如何基于这一原理实现一个更为准确的 setTimeout、setInterval
最初我以为这个函数就是和实现动画的 requestAnimationFrame 拥有相同的行为，因为它们的使用方法非常类似，但实际使用后发现它们的差别还是蛮大的。本文主要对这个神秘的函数进行一些说明和分析。
物体运动还有一个关键点，就是要渲染物体运动的每一个过程，让它显示给观众。渲染的时候，我们调用的是渲染器的render() 函数。代码如下：
关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题：
1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame
开头引用一段 Google Developer Rendering Performance：
上述的示例运行良好，直到 some-library 更新。但并不是 some-library 库导致的 – 因为其从未将 toReadableNumber 设计为 array.map 的回调。
使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置
http://www.w3school.com.cn/tags/html_ref_canvas.asp
在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame（rAF），顾名思义就是 “请求动画帧”。 为了深入理解 rAF 背后的原理（后文的 rAF 均指的是 requestAnimationFrame），我们首先需要了解一下与之相关的几个概念：
在了解JavaScript的异步机制之前，我们首先需要理解JavaScript是一种单线程语言。单线程就意味着所有的任务需要按照顺序一次执行，如果前一个任务没有完成，后一个任务就无法开始。这个特性在执行大量或耗时任务时可能会导致阻塞或者界面卡死，这显然是不可取的。
作为一只前端开发者，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新。
然后用script引用一下即可（handsome用户直接复制粘贴到JavaScript里）
代码 利用js代码实现，使用时加入script标签内 var console={}; console.log=function(){}; $('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>'); var showFPS = (function(
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
