当前位置：文江博客文章教程详情

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

发布于 2025-02-25 01:25:30 字数 5982 浏览 8 评论 0

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

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

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

浏览器页面展示过程

首页，我们需要了解一下浏览器的页面展示过程：

浏览器页面展示过程

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

浏览器渲染原理

在讨论 Composite 之前，我们还需要了解一下浏览器渲染原理

浏览器渲染原理

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

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 合成渲染到屏幕上，而位图的最小单位是像素。如下图：

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

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

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

将 2Dtransform 改为 3Dtransform 2.将 left ( top、bottom、right ) 的移动改为 3Dtransform，但开启硬件加速的 底层原理 其实就在于 将 Paint Layer 提升到了 Composite Layer

以下的几种方式都用相同的作用：

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>

可以看到是因为使用的 CSS 3D transform，创建了一个复合层

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

<style>
@keyframes move{
  0%{
    top: 0;
  }
  50%{
    top: 600px;
  }
  100%{
    top: 0;
  }
}
@keyframes opacity{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

#composited{
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;

}
.both{
  animation: move 2s infinite, opacity 2s infinite;
}
.move{
  animation: move 2s infinite;
}
</style>

<div  id="composited" class="both">
  composited - animation
</div>
<script>
setTimeout(function(){
  const dom = document.getElementById('composited')
  dom.className = 'move'
},5000)
</script>

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

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