前端性能优化（css动画篇）

墨蓝 2022-04-22 13:34 365阅读 0赞

## 1、原理： ##

**css3动画绘制效率高的方法：**

**☆**改变位置

**☆**改变大小

**☆**旋转

**☆**改变透明度

## **2、CSS的图层的概念（Chrome浏览器）** ##

（1）浏览器所做的工作实际上是：

*  获取DOM后分割为多个图层
 *  对每个图层的节点计算样式结果（Recalculate style--样式重计算）
 *  为每个节点生成图形和位置（Layout--回流和重布局）
 *  将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
 *  图层作为纹理上传至GPU
 *  符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组

（2）Chrome中满足以下任意情况就会创建图层

*   3D或透视变换（perspective transform）CSS属性
 *  使用加速视频解码的`<video>`节点
 *  拥有3D（WebGL）上下文或加速的2D上下文的`<canvas>`节点
 *  混合插件（如Flash）
 *  对自己的opacity做CSS动画或使用一个动画webkit变换的元素
 *  拥有加速CSS过滤器的元素
 *  元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
 *  元素有一个`z-index`较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

> 如果我们需要使得动画的性能提高，需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是，改变的属性仅仅印象图层的组合，变换（`transform`）和透明度（`opacity`）就属于这种情况

## 3、触发重布局的属性 ##

（1）盒子相关属性会触发布局

width、height、padding、margin、display、border-width、border、min-height

（2）定位属性及浮动也会触发重布局

top、bottom、left、bottom、position、float、clear

（3）改变节点内部文字结构也会触发重布局

text-align、overflow-y、font-weight、overflow、font-family、 line-height、vertival-align、white-space、font-size

## **4、触发重绘的属性** ##

color、border-style、 border-radius、visibility、text-decoration、background、 background-image、background-position、background-repeat、background-size、 outline-color、outline、 outline-style、 outline-width、box-shadow

## **5、js动画与css动画对比** ##

**JS动画**

缺点：JavaScript在浏览器的主线程中运行，而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞，从而造成丢帧的情况。

优点：JavaScript的动画与CSS预先定义好的动画不同，可以在其动画过程中对其进行控制：开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果，比如视差滚动效果，只有JavaScript能够完成

**CSS动画**

缺点：缺乏强大的控制能力。而且很难以有意义的方式结合到一起，使得动画变得复杂且易于出问题。  
优点：浏览器可以对动画进行优化。它必要时可以创建图层，然后在主线程之外运行。

> ### **结论：** ###
> 
> 动画给予了页面丰富的视觉体验。我们应该尽力避免使用会触发重布局和重绘的属性，以免失帧。最好提前申明动画，这样能让浏览器提前对动画进行优化。由于GPU的参与，现在用来做动画的最好属性是如下几个：  
> \* opacity  
> \* translate  
> \* rotate  
> \* scale