上面的代码 1s 大约执行 60 次，因为一般的屏幕硬件设备的刷新频率都是 60Hz，然后每执行一次大约是 16.6ms。使用 requestAnimationFrame 的时候，只需要反复调用它就可以实现动画效果。
携程火车票营销页使用 css 制作动画很多年了，这大大提高了动画给予页面丰富的视觉体验。不过，在开发的过程中，也遇到了一些性能相关问题和用户反馈，比如头部动画卡顿、页面打开时间较长、页面打开后部分数据加载时间较长等问题。为解决这些问题，我们借助性能检测工具定位问题，并查阅源码、文档等资源解决问题，形成了这篇文章。
在Web开发中，实现平滑且高性能的动画和渲染是一个关键的需求。而requestAnimationFrame是浏览器提供的一个用于优化动画和渲染的API。它可以协调浏览器的刷新率，帮助开发者实现流畅的动画效果，并提供更高效的渲染方式。本文将详细介绍requestAnimationFrame的属性、应用场景以及使用示例，帮助读者深入理解和应用这一强大的工具。
不会吧，不会吧，现在都2020年了不会还真人有人不知道JS的rAF吧？？？ rAF 简介 rAF是requestAnimationFrame的简称； 我们先从字面意思上理解requestAnimati
早期 JS 定时动画：主要通过 setTimeout 和 setIntarval 实现。 HTML5 出现后：又出现了两种实现动画的方式，1. CSS 动画（transition、animation）2. H5的 canvas 实现。 与此同时，HTML5 还提供了一个专门用于请求动画的 API requesetAniamtionFrame()，统一了 DOM 动画、canvas动画、svg动画、webGL动画等的刷新机制。
一个精简且有效的DOM结构可以加速页面渲染，提高用户交互响应速度，并减少内存使用。
屏幕刷新频率即图像在屏幕上更新的速度，即每秒图像更新的次数，它的单位是赫兹（Hz）。一般笔记本的值是60Hz。这个值受屏幕分辨率、屏幕尺寸、显卡影响。
在Web应用中，实现动画效果的方法很多，Javascript 中可以通过SetInterval来实现，CSS 3可以使用 Transition 和 Animation 来实现，HTML 5 中Canvas 也可以实现，另外，HTML 5 还提供一个专门请求动画的API ，即RequestAnimationFrame，顾名思义就是请求动画帧，为了深入理解 RequestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：
传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作，但这种方式在使用中存在一些问题。
风和日丽，饶有兴致，翻开之前写的一个简单的动画插件，发现是用定时器写的，但是作为有追求的前端，一个问题怎么能有一种解决方案呢？故而，遍寻资料，终于看见曙光，让我查到了requestAnimationFrame 这个宿主对象的方法，也能能优雅的实现js动画！
前端动画一般在展示性网站、交互操作或者移动端活动页面使用比较多，可能对于大部分前端平时只会用 css 里的 transition 动画，其实前端动画还有很多实现方式，下面是常见的几种形式：
本文主要学习 requestAnimationFrame API ， 顾名思义，请求动画帧，也称 帧循环。
Javascript 动画怎么可能总是和 CSS transition 一样快，甚至更快呢？到底是什么秘密呢？Adobe 和 Google 是怎么做到让他们的富媒体移动网站的速度和 native app 媲美的？
在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame（rAF），顾名思义就是 “请求动画帧”。 为了深入理解 rAF 背后的原理（后文的 rAF 均指的是 requestAnimationFrame），我们首先需要了解一下与之相关的几个概念：
这期为大家带来的是canvas的动画绘制案例与讲解。不知道大家上一期canvas绘制基本图形的入门教程看的怎么样了，如果已经遗忘了或者还没看的小伙伴建议先去看一下，上一期是学习这一期的基础：
当我们写window.requestAnimationFrame(回调函数)时，浏览器会在下次重绘前执行回调函数。
对于用户可以在浏览器中进行视频剪辑的软件来说，为了实现这个功能需要在项目渲染成 MP4 文件时，以一种一致的方式来同步画布上的所有不同元素。
说到web的高性能动画，这部分内容其实已经是老生常谈的了，不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。
BackTop 即滚动到页面顶部，是很多网站都会用到的基础功能，实现方法很多，Github 上也有许多优秀的三方库，如 smooth-scroll，但如何优雅实现也是一门学问。
今天，在读javascript异步编程的js事件深入理解部分的时候，了解到了requestAnimationFrame 这个api，在这里记录一下。 原文： setTimeout 和 setInterval 就是些不精确的计时工具。在Node中，如果只是想产生一个短时延迟，请使用 process.nextTick。在 浏 览 器 端 ， 请 尝 试 使 用 垫 片 技 术 （shim ） ③ ： 在 支 持requestAnimationFrame 的 浏 览 器 中 ， 推 荐 使 用requestAni
在很久以前，有写过一个使用 js 实现单张图片持续滚动图片的 代码，但那一版实现会持续操作DOM，向DOM中插入元素，性能较差，最近发现 requestAnimationFrame 通过 动画的方式实现图片滚动更加方便，遂重新实现了一版，效果更赞，性能更好。
html动画一般会采用css3的形式去做，当然也比较建议用css去做动画。但是有时候一些动画只能使用js来完成，常用的js动画方案是使用计时器来完成。编写动画循环的一个关键在于我们要延迟多长时间比较合适，如何设置时间才能让动画显得平滑顺畅，这个时间并不是越小越好，因为要遛狗足够的时间间隔来让浏览器产生渲染变化，否则就会变成跳跃感。
所谓动画其实就是快读绘制图片，由于人的眼睛更不上屏幕绘制的速率，所以看到的就好像连着的一样，也就形成了动画，动画片就是这个原理，canvas中的动画也是这个原理。提到动画就不得不说一个函数了，那就是requestAnimationFrame。这是一个定时执行的函数，类似于setTimeout，只是间隔时间不再有我们自己手动去设定，而是由计算机自己去计算，这样比我们直接设定的误差更小（通常我们是定1000/60，约等于16.7毫秒，因为CPU的频率一般是60Hz，也就是1秒最多可以刷新60次界面）。但是往往浏览器对requestAnimationFrame的支持不够友好，那这就需要polyfill，通常一种简单的polyfill可以这么写：
对于 javascript 中含有必要的大量计算的情况，如果是异步计算可以使用 WebWorker另外开一个进程来解决。 对于同步计算，WebWorker就力不从心了。
AxesHelper：用于简单模拟3个坐标轴的对象，红色代表 X 轴.，绿色代表 Y 轴.，蓝色代表 Z 轴。
在本文中，我收集了一些开发技巧，以帮助您解决JavaScript动画的性能问题，并使您更容易实现在web上实现流畅移动的60fps(每秒帧数)目标。 1、避免使用昂贵的CSS属性 你是否打算使用CSS动画CSS属性转换/ CSS关键帧或JavaScript,重要的是要知道哪些属性带来的改变页面的几何(布局)——这意味着页面上的其他元素的位置将会重新计算,或将涉及绘画操作。布局和绘制任务对于浏览器来说都是非常昂贵的，特别是当你的页面上有几个元素时。因此，如果您避免对触发布局或绘制操作的CSS属性进行动画化，
由于JS是单线程，所以同一时间只能执行一个任务，其他任务就得排队，后续任务必须等到前一个任务结束才能开始执行。
JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事，前面的任务没做完，后面的任务只能等着。
我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。 有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状况，从而更好的优化它们，本文就是介绍 Web 动画帧率（FPS）计算方法。 流畅动画的标准 首先，理清一些概念。FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。 理论上说，F
实习导师让我实现表格内容自动滚动，实际就是大屏项目可能会用上的。正好之前看到rAF的介绍，实际上也没用过，所以就用rAF来玩一波。
关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题：
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
requestAnimationFrame是html5 提供一个专门用于请求动画的API，用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行 requestAnimationFrame有以下几个特点 1.requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，如果系统绘制率是 60Hz，那么回调函数就会16.7ms再被执行一次，也就是说，requestAnimationFrame的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。 2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，减少了CPU、GPU和内存使用量 3.requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节CPU的开销
上述的示例运行良好，直到 some-library 更新。但并不是 some-library 库导致的 – 因为其从未将 toReadableNumber 设计为 array.map 的回调。
当我们在移动终端上滑动页面，手指离开屏幕后，页面的滚动并不会马上停止，而是在一段时间内继续保持惯性滚动，并且滑动阻尼感和持续时间与滑动手势的幅度成正比。
我们所使用的设备大多数的刷新频率都是60HZ，也就是每秒钟会有60个画面来组成一个完整的动画来进行展示。这就要求我们的浏览器对每一帧动画的渲染都在16ms内完成（1秒等于1000ms），一旦渲染时间超过了这个时间段，用户在观看时就会感觉到卡顿。通常，一般人可以分辨的频率也在60HZ左右，所以经常会有人提起打游戏时卡顿，也就是游戏掉帧。
作者：齐修_qixiuss https://www.jianshu.com/p/a32b890c29b1
动画就是不断的擦除与重绘，基于requestAnimationFrame函数在桢频更新的间隙实现重绘，是HTML5与小游戏画布绘制保证界面不卡顿的秘诀。
有一种动画书，就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多，通过在动画区域内用一张新的图片代替旧的图片，并快速持续的改变，根据视觉暂留现象就在我们的大脑中形成了动画。 HTML5里面，我们通过下面的语句来实现画面的更替： window.requestAnimationFrame() 还是一脸懵逼？我们先用代码把第一段话翻译一下吧： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n
浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。 也就是我们各种各样的Dom标签
lottie 是 Aribnb 开源一个主要面向 Web、iOS、Android、React Native、Windows 的动画库，可以实时渲染After Effects动画，并以Bodymovin作为json导出，允许应用程序像使用静态图像一样轻松使用动画，一款协同合作的高效软件。
一个成熟的组件库通常都由数十个常用的 UI 组件构成，这其中既有按钮（Button），输入框（Input）等基础组件，也有表格（Table），日期选择器（DatePicker），轮播（Carousel）等自成一体的复杂组件。
setTimeout和setInterval已经存在已久了，我们什么场景下会使用它们完成我们的业务呢？我列举一些例子：
指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高，包含内边距，但不包括水平滚动条、边框和外边距。
首先想到的是 setInterval/setTimeout，原理就是利用人眼的视觉残留和电脑屏幕的刷新，让元素以连贯平滑的方式逐步改变位置，最终实现动画的效果。
移动端硬件性能越来越好的今天，页面的交互也越来越丰富，Web 体验在不断向原生应用靠拢，加入了越来越多的手势与动画。除了常见的 CSS 动画外，有时候我们还会使用到 Canvas 或者 SVG 进行动画内容表现。
在网页上创建动画一般有两种方式：css和javascript。它们在创建动画的时间和性能上是不一样的，各有利弊。选择哪种方法实际上取决于项目，以及想要实现什么类型的动画。
<canvas> 画布标签常用于绘制图像，但是，<canvas> 元素本身并没有绘制能力，它仅仅是图形的容器，要想通过<canvas>画布标签来绘制图像，还需要调用js方法。其中最常见得方法是getContext()方法，它可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，可在画布上绘制文本、线条、矩形、圆形等等。今天就利用<canvas> 画布来绘制一下地球轨道的效果。
经过前面章节相对枯燥的练习，相信你已经能够上手canvas的原生API了，那么从这一节开始，我们就开始接触点好玩的东西——动画。
领取专属 10元无门槛券
手把手带您无忧上云
