帧率优化

帧率：

直观感受，不同帧率的体验

帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；

帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；、

帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；

帧率波动很大的动画，亦会使人感觉到卡顿

   

优化：

精简dom结构

启用硬件（GPU）加速：

CPU在电脑主板，几乎处理电脑的一切操作，有电脑大脑之称；GPU在显卡上，擅长于渲染图形和几何运算。把操作转嫁到GPU可以获得显著的性能提升，同时也可以减少移动设备CPU的争用。

硬件加速（或者说GPU加速）依赖于浏览器渲染页面使用的layering model，当特定的操作（CSS 3D变形）作用于页面上的一个元素，元素移动到它自己的layer，在这个layer中元素合一不受页面其他元素的干扰独立渲染，然后复合到页面中去。在这种隔离内容渲染的工作方式下，如果页面的变化仅仅是该元素的变形，其余部分不必被重新渲染，这会带来显著的速度优势。

CSS的动画、变形、渐变并不会自动的触发GPU加速，而是使用浏览器稍慢的软件渲染引擎，只有3d和opacity属性

   

Will-change属性：

will-change属性可以提前通知浏览器我们要对元素做什么动画，当发生的时候layer已经准备好了，元素及其内容可以在合成到页面之前被创建到我们之前说的layer，不会闪屏。

使用：

will-change: transform, opacity;

声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定

合理使用：

will-change如果被滥用会使页面崩溃，给一些小建议：

https://www.cnblogs.com/yuzhongwusan/p/4186405.html

在一些低端盒子上，will-change 会导致很多小问题，譬如会使图片模糊，有的时候很容易适得其反。

不要将 will-change 应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。

当元素变化之前和之后通过脚本来切换 will-change 的值。

不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。

给浏览器足够的准备时间：使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。

   

控制频繁动画的层级关系：

动画层级的控制的意思是尽量让需要进行 CSS 动画的元素的 z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。

   

使用 dev-tool 时间线 timeline 观察，找出导致高耗时、掉帧的关键操作

1）对比屏幕快照，观察每一帧包含的内容及具体的操作

2）找到掉帧的那一帧（丢帧：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象；），分析该帧内不同步骤的耗时占比，进行有针对性的优化 

3）观察是否存在内存泄漏