从浏览器渲染层面解析css3动效优化原理

曾经终败给现在 2022-09-14 06:22 138阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

## 引言— ##

在h5开发中，我们经常会需要实现一些动效来让页面视觉效果更好，谈及动效便不可避免地会想到动效性能优化这个话题:

*  减少页面DOM操作，可以使用CSS实现的动效不多出一行js代码
 *  使用绝对定位脱离让DOM脱离文档流，减少页面的重排(relayout)
 *  使用CSS3 3D属性开启硬件加速

那么，CSS3与动效优化有什么关系呢，本文将从浏览器渲染层面讲述CSS3的动效优化原理

## 浏览器页面展示过程— ##

首页，我们需要了解一下浏览器的页面展示过程:  
![885a2d0d6801f0e8e943b4040c7e28f4.png][]

*  Javascript：主要负责业务交互逻辑。
 *  Style: 根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。
 *  Layout: 具体计算 DOM 元素显示在屏幕上的大小及位置。
 *  Paint: 实现一个 DOM 元素的可视效果(颜色、边框、阴影等)，一般来说由多个渲染层完成。
 *  Composite: 当每个层绘制完成后，浏览器会将所有层按照合理顺序合并为一个图层，显示到屏幕。本文我们将重点关注 `Composite` 过程。

## 浏览器渲染原理— ##

在讨论 `Composite` 之前，我们还需要了解一下浏览器渲染原理![0edb43ed6e7a74189051d484979a25b2.png][]

从该图中，我们可以发现：

*  `DOM 元素`与 `Layout Object` 存在一一对应的关系
 *  一般来说，拥有相同坐标空间的 `Layout Object` 属于同一个 `Paint Layer (渲染层)`，通过 `position、opacity、filter`等 CSS 属性可以创建新的 Paint Layer
 *  某些特殊的 `Paint Layer` 会被认为是 `Composite Layer (合成层/复合层)`，Composite Layer 拥有单独的 `Graphics Layer (图形层)`，而那些非 Composite Layer 的 Paint Layer，会与拥有 Graphics Layer 的父层共用一个

### Graphics Layer ###

我们日常生活中所看到屏幕可视效果可以理解为：由多个位图通过 `GPU` 合成渲染到屏幕上，而位图的最小单位是像素。如下图：![b53cee4af19231336c5a9872b52061f9.png][]

那么位图是怎么获得的呢，`Graphics Layer` 便起到了关键作用,每个 `Graphics Layer` 都有一个 `Graphics Context`, 位图是存储在共享内存中，`Graphics Context` 会负责将位图作为`纹理`上传到`GPU`中，再由GPU进行合成渲染。如下图：![4daac861c27d09a1b7582744ef22b14d.png][]

### CSS在浏览器渲染层面承担了怎样的角色 ###

大多数人对于CSS3的第一印象，就是可以通过3D(如transform)属性来开启硬件加速，许多同学在重构某一个项目时，考虑到动画性能问题，都会倾向:

1.  将2Dtransform改为3Dtransform 2.将 left ( top、bottom、right )的移动改为 3Dtransform  
    但开启硬件加速的`底层原理`其实就在于`将 Paint Layer 提升到了 Composite Layer`![5505a596e6569b2631901b88cd3df9a3.png][]以下的几种方式都用相同的作用：

*  3D属性开启硬件加速(3d-transform)
 *  will-change: (opacity、transform、top、left、bottom、right)
 *  使用 fixed 或 sticky 定位
 *  对 opacity、transform、filter 应用了 animation(actived) or transition(actived)，注意这里的 animation 及 transition 需要是处于`激活状态`才行

我们来写两段 `demo` 代码，带大家具体分析一下实际情况

> demo1. 3D 属性开启硬件加速(3d-transform)

.composited{
      width: 200px;
      height: 200px;
      background: red;
      transform: translateZ(0)
    }
    </style>
    
    <div class="composited">
      composited - 3dtransform
    </div>

![a5404b59978119c34f72937a377cb2e6.png][]可以看到是因为使用的 CSS 3D transform，创建了一个复合层

> demo2. 对opacity、transform、filter应用 animation(actived) or transition(actived)

这里我们定义了两个`keyframes(move、opacity)`，还有两个`class(both、move)`，起初 `#composited` 的 `className = 'both'`，5秒延时器后，`className = 'move'`，我们来看看浏览器的实际变化。

起初：`#composited 创建了一个复合层，并且运动时 fps 没有波动，性能很稳定`![fd4587beb338966cb0b4dbd13d1ee05e.png][]

5秒后：`复合层消失，运动时 fps 会发生抖动，性能开始变得不再稳定`![39c224287a0b9e3880fc6fcf833e7d46.png][]

### 如何查看复合层及fps ###

在浏览器的 `Dev Tools` 中选择 `More tools`，并勾选 `Rendering` 中的 `FPS meter`![81fcdd78c7abb118de550e5b83d15941.png][]

### 动画性能最优化 ###

之前，我们提到了页面呈现出来所经历的渲染流水线，其实从性能方面考虑，`最理想的渲染流水线是没有布局和绘制环节的`，为了实现上述效果，就需要只使用那些仅触发 `Composite` 的属性。![fef81255e563d10c5a9e5ed1f424a2b0.png][]  
目前，只有两个属性是满足这个条件的：`transforms` 和 `opacity`（仅部分浏览器支持）。  
相关信息可查看：css Triggers\[1\]

### 总结 ###

提升为合成层简单说来有以下几点好处：

*  合成层的位图，会交由 GPU 合成，比 CPU 处理要快
 *  当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
 *  对于 transform 和 opacity 效果，部分浏览器不会触发 Layout 和 Paint， 相关信息可查看：css Triggers\[1\]

缺点：

*  创建一个新的合成层并不是免费的，它得消耗额外的内存和管理资源。
 *  纹理上传后会交由 GPU 处理，因此我们还需要考虑 CPU 和 GPU 之间的带宽问题、以及有多大内存供 GPU 处理这些纹理的问题

大多数人都很喜欢使用3D属性 translateZ(0) 来进行所谓的硬件加速，以提升性能。但我们还需要切实的去分析页面的实际性能表现，不断的改进测试，这样才是正确的性能优化途径。

### 参考资料 ###

###  ###

\[1\]

css Triggers: *https://csstriggers.com/?spm=taofed.bloginfo.blog.36.20e75ac8xZGHBo*

\[2\]

无线性能优化：Composite - 淘系前端团队: *https://fed.taobao.org/blog/taofed/do71ct/performance-composite/?spm=taofed.blogs.header.7.63e65ac801qdAI*

![094fd7a838732e18bf2e07cb7a02502e.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![b8066030bebe1ece45a12ea11cd69df5.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![7420d74d7bda794c7632eb40c3077f6f.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![918b5b6c0cfe9685463cbc2481aaade5.png][]

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![8e55331c7463c1a4dcbeb603dcc7b394.png][]

![40c21f4541db69916c965b06337347e3.png][]

点个**在看**支持我吧

![3235ca87f6e8ca9cc93c33954f3c8ca8.gif][]

[885a2d0d6801f0e8e943b4040c7e28f4.png]: /images/20220828/575be55232a3462ca1e8e729f0f071ad.png
[0edb43ed6e7a74189051d484979a25b2.png]: /images/20220828/0c1dbc2496914387a4988d9e6891ee6a.png
[b53cee4af19231336c5a9872b52061f9.png]: /images/20220828/56d42840c4784940b5fe54707a077b79.png
[4daac861c27d09a1b7582744ef22b14d.png]: /images/20220828/089cc3e86e3a49dd89e34648aaacdd8e.png
[5505a596e6569b2631901b88cd3df9a3.png]: /images/20220828/35d4f32f822544c79697ea2196a8cedf.png
[a5404b59978119c34f72937a377cb2e6.png]: /images/20220828/47a4892af79b41f48c9fc8f91ab76341.png
[fd4587beb338966cb0b4dbd13d1ee05e.png]: /images/20220828/bf2c68d53153463aa9f6f92b2bb5b978.png
[39c224287a0b9e3880fc6fcf833e7d46.png]: /images/20220828/496637921fdf455090b32f3742a9d2fc.png
[81fcdd78c7abb118de550e5b83d15941.png]: /images/20220828/ad59258f36ef4a918d618207b8b49bac.png
[fef81255e563d10c5a9e5ed1f424a2b0.png]: /images/20220828/1bd822a7279c4f1898d3da99f23d2b15.png
[094fd7a838732e18bf2e07cb7a02502e.png]: /images/20220828/54eb8c8ed5a94ca9b84adb241defec46.png
[Link 1]: https://blog.csdn.net/abcdefg90876/article/details/120258736
[b8066030bebe1ece45a12ea11cd69df5.png]: /images/20220828/310948c260904003b73cc22cdf6965e4.png
[Link 2]: https://blog.csdn.net/LuckyWinty/article/details/120329069
[7420d74d7bda794c7632eb40c3077f6f.png]: /images/20220828/d1c13e1d1f3a4396a5ada6a72a95e62f.png
[2020]: https://blog.csdn.net/qianduan167/article/details/106813305
[918b5b6c0cfe9685463cbc2481aaade5.png]: /images/20220828/dbe110b103494470988ea5eaae1b665d.png
[8e55331c7463c1a4dcbeb603dcc7b394.png]: /images/20220828/c0d3da2fcb4547f4a05a11700465df98.png
[40c21f4541db69916c965b06337347e3.png]: /images/20220828/431b23c8c57b48cabcec92b05ac20b03.png
[3235ca87f6e8ca9cc93c33954f3c8ca8.gif]: /images/20220828/07dc4b35d56e49f3adb83230d31a3443.png