今天的前端是该领域涉及的广泛职业。作为前端，我们不仅必须开发管理系统，数据中期，而且还必须回应年度报告，节日活动和其他场景的发展。您只需要添加删除，更改和检查，编写表格，但也具有开发动画，H5 Games的能力。能够制作出非常酷的动画效果也是前端独有的成就感。，我们从动画的实现方法开始，以了解浏览器的渲染以及如何提高动画的性能。
让我们首先看2个h5案例：[一面到达末端的镜子]
<->移动代码扫描经验
【年度报告】
[其他H5好的案例] https://www.h5anli.com
定义：GIF文件的数据是基于LZW算法的非破坏性压缩格式。GIF格式的特征是GIF文件可以保存多个颜色图像。当数据在屏幕上读取和显示时，它可以在屏幕上。输入一个简单的动画。最大支持256颜色。到此特征，GIF更适合具有较少颜色的图片，例如Page Cartoon图标，徽标， 等等。
使用：
优点：1。生产成本非常低；2.良好的兼容性；3.易于开发和使用。
缺点：1。在质量方面：颜色支撑较少，严重的图像头发边缘；2.互动：动画播放的悬架无法控制，没有灵活性；因此，文件很大。
1.2.1过渡动画使用：
场景：
频繁使用伪阶级使用：悬停，：活动和其他伪用途，以获得相应的动画效果。
1.2.2动画关键框架动画使用：
场景：例如：加载显示，代码如上。
优点：1。无需在每个帧记录。通过关键的框架设置，很容易开发；2.实现很容易。通常，UI可以直接给出CSS文件，并且仅需导入前端即可[移动屏幕改编]。
缺点：1.CSS不能是动画交互，也不能知道当前的动画执行阶段；2.转机：需要触发并且不能自动播放；3.需要使用前缀添加动力兼容性，从而导致代码量的两倍；4.对于复杂的动画动画，导入的CSS文件的实现太大了，影响了页面的渲染树生成，从而阻止了渲染。例如，如果摇晃摇摇欲坠的效果，CSS文件将达到100 kb，并且达到100 kb，并且有必要采用一些必要的压缩方法来减少文件的大小。
JS动画的原理是通过settimeout或requestAnimationFrame方法绘制动画框架，以便动态更改网页中图形的显示属性（例如DOM样式，canvas canvas canvas bit Dibargram data，svg对象属性等。），然后实现动画的目的。
可以看出，实现方法是控制DOM的边距左侧样式并执行动画。
问题1.1：demo1可以很快看到。这是为什么？请稍后再看?
问题2：URL输入页面显示哪些过程？
在这里，我们忽略了HTTP请求静态文件之前的步骤，重点是如何完成浏览器渲染框架，以找到浏览器渲染动画的方式。
借助Chrome-promformance [执行RAF.HTML]，我们还可以在上面的不同阶段看到性能的标签。moth：并非每个框架都会始终经历管道的每个部分的过程。使用JavaScript，CSS或网络动画，在实现视觉更改时，通常有三种方法可以运行指定帧：
[以下时间轴作为主轴绘制以下屏幕截图，绘制]
- 修改一些触发布局的属性时，也会导致后续更新。
像CSS属性一样，您可以查询此网站并检查哪些属性会导致帧管道：https：//csstriggers.com/
例如：变换转换，这是一个不会触发布局和绘图的更改，因此在使用时，直接输入第三个状态。合成后，这是进入复合阶段的良好优化方法。
问题3：控制台上的请求安装框架（RAF）的执行，那么该RAF执行与浏览器框架之间的关系是什么？我们看不见。
我们仍然运行Demo1的代码：
您可以看到RAF在布局和油漆之前执行，并且只有RAF每帧执行一次，而回调函数执行动画。
从皇家空军的时间来看，我们可以看到Settimeout的执行时间与RAF不同。
我们可以以不同的方式抓住移动动画的性能来移动动画，我们可以看到：
与两者相比，可以看出，在16.7ms中，Setimeout执行了4次，从而在最后一次渲染之前导致了边缘和边缘之间的差异。
RAF可以看到，在渲染边距之前，边缘和最后一个之间的差异等于1px。
从皇家空军的表现来看，我们可以看到Settimeout的性能会更糟
然后，如果JS执行时间太长，则在绘制帧时，未绘制帧，当应延迟下一个帧的执行绘制时，它将导致动画的口吃。性能问题的第三部分，您可以直观地看到纸箱]
这可以总结：
1. setTimeout时间不准确，因为他的执行取决于主线程执行时间。
2.如果计时器频率高于浏览器刷新的频率，即使执行代码，也未刷新浏览器，也不会显示浏览器。
RAF解决了Settimeout动画带来的问题：
1.刷新屏幕时会自动执行浏览器。它不需要将时间间隔设置为settimeout，然后在settimeout之后执行它，但是此n毫秒会自动将其设置为浏览器刷新频率，浏览器一次刷新一次，执行一次，不需要手动设置，不需要手动设置。;不需要手动设置；如果未刷新浏览器，则不会执行并且不会排队。
2.调整大小和滚动高的高频函数切换事件，使用requestAnimationFrame可以确保在每个绘图范围内执行一次函数以保存函数的执行。在浏览器刷新间隔中以浪费资源的间隔内有无用的回调函数。
通过镀铬的性能，您可以看到整体FPS和GPU的情况。 结束时间的因素，以提高针对性动画的性能。
演示3：-----小块上的上和下运动-------
演示的在线地址：https：//googlechrome.github.io/devtools-samples/jank/
源代码屏幕截图：
解开[每个块需要强制布局来计算位置]：
单击“优化”按钮以优化[仅读一次，并且有POS变量]：
优化[添加变换：translatez（0）以提高级别]：
以上是一个小案例，通过动画逐渐优化：特定操作可以查看原始文本：https：//developer.chrome.com/docs/devtools/evaluate-prespormand/
根据上述渲染机制的讨论，我们可以看到影响动画渲染的因素都是框架管道所经历的阶段。由此，我们可以总结一些方法来优化动画性能：
总而言之，实现方法可以支持某些动画开发，例如点击交互，转子和纯动画显示，例如现金鸡蛋和烟火。
如果您需要进行互动或需要重力世界，那么本机JS的实现相对困难。可以使用一些动画库进行开发。这些动画是根据Canvas和WebGL实现的。
非常感谢您对本文的更正和建议。同时，感谢您为Liuyi和Frost Preface等技术技术提供帮助和支持合作伙伴。
原始：https：//juejin.cn/post/7099264721475338271