前置知识

什么是 FPS

FPS是浏览器的每秒的渲染帧数，也就是浏览器切换画面的次数，大多数设备的刷新率都是 60FPS，一般来说FPS越低页面就会越卡顿。

什么是像素管道？

像素管道是浏览器单个帧的渲染流水线，如果其中有某些环节执行过程过长就会导致卡顿

• JavaScript。通常来说，阻塞的发起都是来自于 JS ，这不是说不用 JS，而是要正确的使用 JS 。首先，JS 线程的运行本身就是阻塞 UI 线程的（暂不考虑 Web Worker）。从纯粹的数学角度而言，每帧的预算约为 16.7 毫秒（1000 毫秒 / 60 帧 = 16.66 毫秒 / 帧）。但因为浏览器需要花费时间将新帧绘制到屏幕上，只有 ~10 毫秒来执行 JS 代码，过长时间的同步执行 JS 代码肯定会导致超过 10ms 这个阈值，其次，频繁执行一些代码也会过长的占用每帧渲染的时间。此外，用 JS 去获取一些样式还会导致强制同步布局。
• 样式计算（Style）。此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程，这个过程不仅包括计算层叠样式表中的权重来确定样式，也包括内联的样式，来计算每个元素的最终样式。
• 布局（Layout）。在知道对一个元素应用哪些规则之后，浏览器即可开始计算该元素要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素，一般来说如果修改了某个元素的大小或者位置，则需要检查其他所有元素并重排（re-flow）整个页面。
• 绘制（Paint）。绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的，绘制包括两个步骤：1) 创建绘图调用的列表， 2) 填充像素，后者也被称作栅格化。
• 合成（Composite）。由于页面的各部分可能被绘制到多个层上，因此它们需要按正确顺序绘制到屏幕上，才能正确地渲染页面。尤其对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。

上述的五个阶段并不是一定都会执行到的，这五个阶段中涉及到了老生常谈的两个概念：重排跟重绘，虽然初次渲染布局跟绘制必不可少，但是后期我们可以控制避免通过这两个管道：以下是当我们修改不同的样式属性时，会触发的几种帧流程：

从上图中能看到 JS 阶段以及 Style 和 Composite 阶段 是不可避免的，因为需要 JS 来引发样式的改变，Style 来计算更改后最终的样式，Composite 来合成各个层最终进行显示，能跳过的步骤只有布局跟绘制，我们知道，执行的阶段越少，耗时就越少，每秒的渲染帧数就会越高，那么能不能直接跳过这两个步骤直接到合成呢？答案是肯定的，如下的属性只会触发合成阶段：transform、opacity、pointer-events、perspective （透视效果）、curosr、orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数（用于打印或打印预览）、widows（设置当元素内部发生分页时必须在页面顶部保留的最少行数（用于打印或打印预览））。

FLIP

综上所述，当我们写动画的时候如果用height margin padding left等会触发重排的属性，相较于只用transform或者opacity会带来更多的性能开销，一旦这个计算时长超过 1 个动画帧 (一般是 60 帧每秒, 也就是说超过 16.7ms), 那么这帧动画将不会绘制，产生页面卡顿。FLIP技术，就是一种让动画只利用到transform或者opacity的技巧，FLIP 是 First, Last, Invert, Play 的简称。

概念

First

对应动画的 Start 阶段，用 element.getBoundingClientRect()记录初始位置。

Last