导航

CSS3 的动画了解多少？

css3 实现动画主要有 3 种方式

transition 过渡动画
transform 2D 和 3D 转换
animation 自定义动画

⭐️ 说一下 transform 的原理，先平移在旋转和先旋转再平移有什么区别

先平移后旋转，并不会改变坐标轴方向
但是如果先旋转后平移，在旋转时坐标轴的方向也随着发生了改变
然后再平移，移动的方向也就发生了改变了

https://codepen.io/JingW/pen/dyqgqrv

⭐️ 所有 CSS3 的动画都能用 GPU 加速么？

在 CSS 中，只有 3D 转换、opacity 透明、filter 滤镜和添加了 will-change 属性的元素，浏览器才会开启硬件（GPU）加速。

不过如果我们想要 2D、过渡等动画也能开启硬件加速,我们可以通过给这些元素加上transform: translateZ(0); 或 transform: translate3d(0,0,0);来诱导浏览器开启硬件加速，但是我们不能滥用。
也可能通过添加 will-change 来实现。

为什么需要 GPU 硬件加速？

CSS3 动画在移动多终端设备场景下，相⽐ PC 会⾯对更多的性能问题，主要体现在动画的卡顿与闪烁。
我们可以通过 GPU 硬件加速来解决这个问题

CPU 、GPU、硬件加速的关系?

硬件加速意味着图形处理单元（GPU）会协助你的浏览器渲染网页，做一些繁重的工作，而不是把这些工作全部丢给中央处理单元（CPU）来完成。
当一个 CSS 操作被硬件加速时，它的速度也会因为页面的渲染速度变快而得到提升。

CPU 和 GPU 都是处理单元

CPU 位于计算机的主板上，它被称为计算机的大脑。GPU 位于计算机的显卡上，负责处理和渲染图像
此外，GPU 是专门为执行复杂的数学和几何计算而设计的，这些计算也是图形渲染的必要条件
因此，将操作丢给 GPU 处理可以产生巨大的性能提升，也可以减少移动设备上的 CPU 争用。

硬件加速（又称 GPU 加速）

依赖于浏览器渲染页面时使用的分层模型。
当对页面上的元素进行某些操作（比如 3D 变换）时，该元素会被移动到属于它自己的“图层”，在那里它可以独立于页面的其他部分进行渲染，并在之后被合成（画到屏幕上）。
这样就隔离了内容的渲染，如果该元素的变换是帧之间唯一的变化，那么页面的其他部分就不必重新渲染，这样往往能够提供明显的速度优势。
不过这里需要说明一下：只有 3D 变换拥有属于自己的图层，2D 变换没有。

CSS 的 animation、transform 和 transition 不会自动进行 GPU 加速，一般是由浏览器缓慢的软件渲染引擎执行。然而有些浏览器通过某些属性提供硬件加速，以获得更好的渲染性能。

⭐️ 在 CSS 中哪些属性能触发硬件（GPU）加速

能触发硬件（GPU）加速的 CSS 属性

transform
opacity
filter
will-change

opacity不透明度就是少数可以适当加速的 CSS 属性之一，因为 GPU 可以很容易地操纵它。

基本上，如果你在 transition 或 animation 里淡化不透明度，浏览器会智能地把它丢给 GPU 操作，速度会非常快。
不透明度是所有 CSS 属性里性能最好的之一，你使用它不会出现任何问题。
其他常见的硬件加速操作是 CSS 的 3D 变换。

will-change 用法及注意事项

CSS 属性 will-change 允许我们提前告知浏览器我们可能会对一个元素做出什么样的改变，从而使浏览器可以提前为元素做一些适当的优化。

当在一个元素上使用 CSS 三维变换时，该元素及其内容可能会升到一个新的图层，就像前面提到的那样，之后才会被合成（绘制到屏幕上）。
然而，在一个新的图层中设置元素是一个代价相对昂贵的操作，这可能会使变换动画的开始时间延迟几分之一秒，导致明显的“闪烁”。
为了避免这种延迟，你可以在变化实际发生前的一段时间通知浏览器。
这样，浏览器就会有一些时间为这些变化做准备，当这些变化发生时，元素的图层就会准备好，变换动画就可以执行，然后元素就可以被渲染，页面就会迅速更新。

注意事项：

不要将 will-change 应用到太多元素上
- 这种方式是非常有害的，因为更多的操作是无效的，而且有可能占用机器大量的资源，过度使用，会导致页面变慢甚至崩溃。
  - 换句话说，让浏览器对可能发生也可能不发生的变化保持准备状态而不是什么好事，不要这样做。
  - 我们只需要对那些真正能提升性能的地方加上 will-change,而不要滥用 will-change 造成不该有的性能问题。
```
/* 错误做法 */
* {
  will-change: all;
}
/* 或 */
.box {
  will-change: all;
}
```

给浏览器留足时间准备

案例：鼠标滑动到元素上时，元素的透明度发生改变

我们可以在鼠标滑动到他的祖先元素时就做好提醒，而不是在鼠标滑动到元素上时再做提醒。
如果滑动到元素上时做提醒其实是没有意义的。

.box:hover .item {
  /*当鼠标进入或悬停到其祖先时，声明该元素接下来要发生的变化，让浏览器做好准备*/
  will-change: opacity;
}
.item:hover {
  /* will-change: opacity; 直接写在这里是无效的，并不会带来什么作用*/
  opacity: 0.5; /*鼠标悬停到元素时发生的变化*/
}

在样式表中谨慎使用
- 通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。
  - 但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。
  - 所以最佳实践是当元素变化之前和之后通过 js 脚本来切换 will-change 的值。
```
.sidebar {
  will-change: transform;
}
```
更改完成后要删除 will-change
- 浏览器为即将发生的变化所做的优化通常会占用机器的很多资源，通常要删除这些优化尽快恢复到正常行为。
  - 然而，will-change 覆盖了这一行为，它维持优化的时间比浏览器所做的要长很多。
  - 因此，你应该始终记得在元素变化完成后删除will-change，这样浏览器就可以恢复优化所占用的资源。
  - 如果在样式表中声明了will-change，就不可能删除它，这就是为什么建议你用 JavaScript 设置和取消它。
  - 通过 js 脚本，你可以向浏览器声明你的修改，然后在修改完成后，通过监听这些修改完成的时间来删除will-change。
  如何使用 js 脚本来正确的使用 will-change 属性，如下:
```
var el = document.getElementById("element");

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener("mouseenter", hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

开启 GPU 硬件加速可能触发的问题

硬件加速操作会创建一个所谓的合成渲染层（compositor layer），并上传到 GPU 进行合成。然而，强行创造一个图层并不能解决某些页面上的性能瓶颈。

虽然图层创建技术可以提升页面速度，但有一定代价：它们会占用系统 RAM 和 GPU 上的内存（在移动设备上很有限），而且拥有大量的图层会产生不好的影响（尤其是在移动设备上）
所以必须明智地使用它们，确保其可以真正帮助页面性能，而且性能瓶颈不是由你页面上的其他操作造成的。

经过-webkit-transform: transition3d/translateZ 开启 GPU 硬件加速以后，有些时候可能会致使浏览器频繁闪烁或抖动，能够尝试如下办法解决之：

-webkit-backface-visibility: hidden; /* 各种前缀都要考虑，此处省略 */
-webkit-perspective: 1000; /* 各种前缀都要考虑，此处省略 */