动画
动画的原理
动画其实就是在一定的时间内连续展示多张静态的画面形成的视觉效果。动画效果中的每一个画面我们称之为帧，而1s展示的画面的数量我们称之为帧数。为了使得动画效果比较流畅，有如下2个标准：影视作品中帧数>24，游戏中帧数>30。
渲染
动画效果其实并不会动，而是一种“障眼法”。每一个新的页面其实都是经过浏览器渲染而来。
浏览器渲染步骤
1.根据HTML构建HTML树（DOM）
2.根据CSS构建CSS树（CSSOM）
3.将两棵树合并成一棵渲染树（render tree）
4.计算Layout布局（文档流、盒模型、计算大小和位置）
5.Paint绘制（将CSS外观属性绘制出来）
6.Compose合成（根据元素之间的层叠关系展示最终的画面）
动画与渲染的关系？
相同的动画效果不同的实现代码在渲染方式上会有很大的不同，这直接影响了动画的性能
如何更新样式？
在前端动画中，实际上就是样式的改变，那么我们如何改变元素的样式呢？在前端开发中，一般会使用JS来控制样式的改变。
1.比如：div.style.background = 'red' 直接添加具体属性。
2.比如：div.classList.add('red') 添加样式列表。
3.比如：div.style.display = 'none'
4.比如：div.remove() 删除节点
浏览器的再渲染方式
当页面被渲染之后，当我们通过JS改变了元素的样式后，浏览器需要重新渲染页面。浏览器一共有3中在渲染的方式
1.JS/CSS > 样式 > 布局 > 绘制 > 合成
div.remove()会导致页面layout布局改变，其他元素需要重新布局（relayout）。
2.JS/CSS > 样式 > 绘制 > 合成
3.JS/CSS > 样式 > 合成
transform实现元素的移动等。这种再渲染方式效率最高，是性能优化的最佳选择。
不同CSS属性触发的再渲染过程是不同的，而且相同CSS属性在不同浏览器下触发的在渲染过程也有可能不同。csstriggers，这个网站记录了所有不同的CSS属性在不同浏览器下触发再渲染的过程。
开发者工具查看浏览器渲染的情况
1.F12打开开发者工具
2.点击ESC，打开额外的开发者工具栏
3.点击最左边的更多按钮
4.选择Rendering
5.勾选Paint flashing
6.刷新页面，浏览器渲染的地方会出现绿色闪烁。
CSS动画性能优化（渲染性能）
1.CSS方面的优化 CSS方面的优化
TL;DR
1.坚持使用 transform 和 opacity 属性更改来实现动画。
2.使用 will-change 或 translateZ 提升移动的元素。
3.避免过度使用提升规则；各层都需要内存和管理开销。
2.JS方面的优化 JS方面的优化
TL;DR
1.对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
2.将长时间运行的 JavaScript 从主线程移到 Web Worker。
3.使用微任务来执行对多个帧的 DOM 更改。
4.使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。
