当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第五部分 添加动效 ✔️
• 【第 16 章 变换】 ✔️
  • 16.1 旋转、平移、缩放与倾斜
    • 16.1.1 变换原点的更改
    • 16.1.2 多重变换的设置
    • 16.1.3 单个变换属性的设置
  • 16.2 变换在动效中的应用
    • 16.2.1 放大图标（上）
    • 16.2.2 带“飞入”特效的文本标签的创建（下）
    • 16.2.3 过渡特效的交错渲染（下）
  • 16.3 动画的性能 ✔️
  • 16.4 三维变换

《CSS in Depth》新版封面

译者按
这又是一篇 “看上去不起眼、实际上却非常有用” 的 CSS 硬核知识 —— CSS 渲染的性能问题。也只有在今后的实际开发中遇到了类似的性能瓶颈，本节介绍的知识才会凸显出它真正的价值来。不过话又说回来，如果页面渲染性能真的遭遇了瓶颈，CSS 处理不当也仅仅是问题排查的一个方面，更多情况下是综合因素的结果，这估计也是为什么作者没有通过典型案例来演示说明的原因吧。无论如何，了解浏览器渲染的底层逻辑还是非常有必要的。

16.3 动画的性能 Animation performance

有些变换看上去好像没有存在的必要。例如平移变换的效果，通常也可以使用相对定位来实现；对图片或 SVG 进行缩放变换，其实也可以通过设置宽高完成。

其实，变换在浏览器中的性能要好很多。如果我们对元素位置设置动画效果（例如对属性 left 添加过渡特效），就能明显感受到性能上的不足。特别是在给大型复杂元素设置动画、或者是在页面上一次性给大量元素添加动画时，问题尤为突出。这种性能问题在 CSS 过渡（详见第 15 章）和动画（下一章会讨论）效果上都有体现。

如果我们要实现过渡或动画，无论什么类型，包括元素定位或大小设置，都应该尽可能地考虑用变换实现。想要彻底搞懂原因，需要进一步深入考察页面在浏览器中的渲染方式。

16.3.1 渲染流程 Looking at the rendering pipeline

当浏览器计算好页面上哪些样式会在哪些元素上生效之后，需要把这些样式转换为屏幕上的像素，这个过程就叫作 渲染（rendering）。渲染可分为三个阶段：布局（layout）阶段、绘制（paint）阶段与合成（composite）阶段（如图 16.2 所示）。

【图 16.12 渲染流程中的三个阶段】

16.3.1.1 布局 Layout

在第一个阶段 布局（layout） 中，浏览器需要计算每个元素将在屏幕上占据多大空间。由于文档流的工作方式，一个元素的大小和位置可以影响页面上无数其他元素的大小和位置。这个阶段会将所有这些问题整理清楚。

任何时候改变一个元素的宽高，或者调整其位置属性（如 top 或 left）时，都必须重新计算该元素的布局。如果使用 JavaScript 在 DOM 中插入或移除某个元素，也会导致布局的重新计算。一旦布局发生改变，浏览器就必须 重排（reflow）（译注：即重新排版）页面，重新计算因布局变更而被移动、或被调整大小的所有其他元素的布局。

16.3.1.2 绘制 Paint

布局之后便是 绘制（painting）。这个过程就是填充像素：例如绘制文本、给图片、边框、阴影上色等。这一阶段并不会真正显示到屏幕上，而是在内存中绘制。页面各部分内容就这样被绘制到不同的 图层（layers） 中。

举个例子，假如需要改变某个元素的背景颜色，就必须重新绘制该元素。但由于更改背景色不会影响页面上任何元素的位置与大小，这样的变更也无需重新计算布局。因此，改变背景颜色的计算开销要低于改变元素尺寸的开销。

在适当的条件下，页面元素会被提取到自己的图层。此时，该元素会从页面的其他图层中独立出来单独绘制。浏览器把这个图层发送到计算机的图形处理器（graphics processing unit，即 GPU）进行绘制，而不是像主图层那样使用主 CPU 绘制。这样安排是有好处的，因为 GPU 经过了充分的优化，比较适合做这类计算。

这就是我们经常提到的 硬件加速（hardware acceleration），因为需要依赖于计算机上的某些硬件来提高渲染速度。多个图层就意味着需要消耗更多的内存，但好处则是可以加快渲染的处理时间。

16.3.1.3 合成 Composite

在 合成（composite） 阶段，浏览器收集所有绘制完成的图层，并把它们整合为最终呈现给用户浏览的图像。合成过程需要按照特定顺序进行，以确保图层在出现重叠时，让正确的图层出现在其他图层的前面。

某些属性在属性值发生变更时，需要的渲染时间会更短，尤其是 opacity 和 transform 这两个属性。在我们修改元素的这两个属性之一时，浏览器就会把元素提升到它们各自的绘制图层并使用 GPU 加速。因为元素位于自己的图层中，所以主图层在整个图像变化过程中不会发生变化，也无须反复重绘（repeated repainting）。

如果只是对页面做一次性修改，这样的优化往往不会带来多么显著的差异；但要是修改的是动画的一部分时，屏幕需要在一秒内发生多达几十次的更新，这种情况下渲染速度的提升就很关键了。大部分的屏幕每秒钟会刷新 60 次。理想情况下，动画中的每一次变化需要的重新计算也至少要达到这个速度，才能在屏幕上生成最流畅的运动轨迹。浏览器在每次重新计算时需要完成的工作越多，达到这个速度也就相应越困难。

使用 will-change 控制绘制图层（Controlling paint layers with will-change）

浏览器在优化渲染流程方面已经取得了长足的进步，会尽可能将一些元素划归到不同的图层。如果对某个元素的 opacity 或者 transform 属性设置动画，现代浏览器为了使动画过程更加流畅，通常会基于包括系统资源在内的一系列因素来作出最佳处理；但有时也可能会遭遇卡顿（choppy）或者动画闪烁（flickering animations）。

如果遇到这种情况，可以使用一个叫做 will-change 的属性来对渲染图层实施控制。该属性可以提前告知浏览器，元素的特定属性将发生改变。这通常意味着元素将被提升到自己的绘制图层中。例如，设置了 will-change: transform 就表示我们期望改变元素的 transform 属性。

除非遇到性能问题，否则不要在页面上盲目添加该属性，因为这样会占用很多系统资源。最好应用前后都测试一下，在性能表现良好时再将 will-change 留在样式表中。想要更加深入地了解该属性的用法，以及是否应该启用该属性，可以查看 Sara Soueidan 的这篇优质文章《Everything You Need To Know About The CSS will-change Property》。

我发现这篇文章发表后，有件事发生了变化：文章表示只有 3D 变换会将元素提升到自己的图层，现在已经不是这样了。最新的浏览器也支持对 2D 变换使用 GPU 加速。

在处理过渡或动画（下一章会重点介绍）特效的时候，尽量只改变 transform 和 opacity 属性。如有必要，可以修改那些只会导致重绘（paint）而不会重新布局（re-layout）的属性。只有在没有其他替代方案的情况下，再去修改那些影响布局的属性，并且密切关注动画中是否存在性能问题。如果想要查看哪些属性会导致布局、绘制和/或合成，也可以访问这个网站：CSS Triggers。

译注

实测发现，介绍 will-change 属性时提到的那篇文章链接已经失效了，要查看原文可以访问这个链接：https://richstyle.org/?documentation/css-will-change-property-en。

---

---

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价 ￥461.00	起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结
• 第九章 CSS 的模块化与作用域
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原则
    • 9.3.2 划定作用域的边界
    • 9.3.3 CSS 中的隐式作用域
    • 9.3.4 关于 CSS 作用域与层叠图层
  • 9.4 CSS 模式库
  • 9.5 本章小结
• 第十章 CSS 容器查询
  • 10.1 容器查询的一个简单示例
    • 10.1.1 容器尺寸查询的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的类型
    • 10.2.2 容器的名称
    • 10.2.3 容器与模块化 CSS
  • 10.3 与容器相关的单位
  • 10.4 容器样式查询的用法
    • 10.4.1 将模块与所在容器解耦
    • 10.4.2 减少重复代码
  • 10.5 本章小结
• 第 11 章 颜色与对比
  • 11.1 通过对比进行交流
    • 11.1.1 模式的建立
    • 11.1.2 还原设计稿
  • 11.2 颜色的定义
    • 11.2.1 色域与色彩空间
    • 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 处理颜色（上篇）
    • 11.3.4 从页面其他颜色衍生出新颜色（下篇）
  • 11.4 思考字体颜色的对比效果
  • 11.5 本章小结
• 第 12 章 CSS 排版与间距
  • 12.1 间距设置
    • 12.1.1 使用 em 还是 px
    • 12.1.2 对行高的深入思考
    • 12.1.3 行内元素的间距设置
  • 12.2 Web 字体
  • 12.3 谷歌字体
  • 12.4 @font-face 的工作原理
    • 12.4.1 字体格式与回退处理
    • 12.4.2 同一字型的多种变体形式
  • 12.5 性能因素考量
    • 12.5.1 font-display 属性解析
    • 12.5.2 可变字体的用法
  • 12.6 调整字间距，提升可读性
    • 12.6.1 正文的字间距
    • 12.6.2 标题、小元素和间距
  • 12.7 本章小结
• 第 13 章 渐变、阴影与混合模式
  • 13.1 渐变
    • 13.1.1 使用多个颜色节点（上）
    • 13.1.2 颜色插值方法（中）
    • 13.1.3 径向渐变（下）
    • 13.1.4 锥形渐变（下）
  • 13.2 阴影
    • 13.2.1 利用渐变和阴影打造立体感
    • 13.2.2 使用扁平化设计创建元素
    • 13.2.3 创建混合风格的按钮外观
  • 13.3 混合模式
    • 13.3.1 为图片上色
    • 13.3.2 混合模式的类型
    • 13.3.3 图片纹理的添加
    • 13.3.4 融合混合模式的用法
  • 13.4 本章小结
• 第 14 章 蒙版、形状与剪切
  • 14.1 滤镜
    • 14.1.1 滤镜的类型
    • 14.1.2 背景滤镜
  • 14.2 蒙版
    • 14.2.1 带渐变效果的蒙版特效
    • 14.2.2 基于亮度来定义蒙版
    • 14.2.3 其他蒙版属性
  • 14.3 剪切路径
    • 14.3.1 多边形的裁剪路径
    • 14.3.2 Firefox 内置的剪切路径工具
    • 14.3.3 其他剪切路径类型
  • 14.4 浮动与形状
    • 14.4.1 浮动
    • 14.4.2 形状的定义
  • 14.5 本章小结
• 第 15 章 过渡
  • 15.1 状态间的由此及彼
  • 15.2 定时函数
    • 15.2.1 定制贝塞尔曲线
    • 15.2.2 阶跃
  • 15.3 非动画属性
    • 15.3.1 不可添加动画效果的属性
    • 15.3.2 淡入与淡出
  • 15.4 过渡到自然高度
  • 15.5 自定义属性的过渡设置
  • 15.6 本章小结
• 附录
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介