全部学科
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
GO后端
golang gorm gin
通用技术
redis git docker nginx mysql zookeeper rabbitmq
Web前端
TypeScript vue CSS HTML javascript pinia vite
Python全栈
python
NodeJS全栈
nodejs
小程序首页
CSS / 模拟试卷

CSS高级动画与性能优化

20 题 45 分钟 难度：

考察知识点

  • CSS动画原理与硬件加速（渲染管线、合成线程、GPU加速）
  • transform与opacity优化（重排重绘规避、合成层创建）
  • will-change与触发重排重绘（优化提示、性能代价、最佳实践）
  • 复合层与渲染管线（层爆炸、内存管理、渲染分层）
  • requestAnimationFrame与JS动画（帧率同步、回调调度、取消机制）
  • 关键帧动画与性能调优（60fps策略、动画属性选择）
  • 低性能设备适配策略（prefers-reduced-motion、降级方案）
1
单选题

CSS动画触发硬件加速的核心原理是什么？

A

所有CSS属性动画都会自动触发硬件加速

B

只有transform和opacity属性动画可以绕过主线程，在合成线程处理

C

硬件加速需要显式设置will-change属性才能生效

D

硬件加速只适用于3D变换，2D变换不支持

2
多选题

以下哪些CSS属性动画可以触发硬件加速，在合成线程处理？

A

transform: translate

B

transform: scale

C

opacity

D

width

E

left

F

transform: rotate

3
单选题

使用left: 0到left: 100px的动画与使用transform: translateX(0)到transform: translateX(100px)的动画，性能差异的主要原因是什么？

A

left动画需要JavaScript驱动，transform动画由CSS驱动

B

left动画触发重排，transform动画只在合成线程处理

C

left动画不支持transition，transform动画支持transition

D

left动画只能在块级元素上使用，transform动画支持所有元素

4
填空题

浏览器渲染管线包含四个阶段：________、______、______、______。其中transform和opacity动画可以跳过布局和绘制阶段，直接在合成阶段由GPU处理。

5
判断题
A

对

B

错

6
单选题

关于opacity动画的性能特性，以下说法正确的是？

A

opacity动画总是触发重绘，性能与visibility动画相同

B

opacity动画不触发重排，但在某些情况下可能触发重绘

C

opacity从0到1的动画比从0.5到1的性能开销更大

D

opacity动画只在元素设置了will-change后才触发硬件加速

7
多选题

以下哪些场景可以使用transform替代传统CSS属性来优化动画性能？

A

元素从左向右移动，用translateX替代left

B

元素放大缩小，用scale替代width/height

C

元素旋转，用rotate替代通过JavaScript改变角度

D

元素淡入淡出，用opacity替代display切换

E

元素居中定位，用translate替代margin计算

8
填空题

CSS中，设置_________属性中的3D变换函数（如translate3d、translateZ）会强制创建合成层，这是早期触发硬件加速的常用hack方式，现代浏览器推荐使用___________属性来显式提示。

9
单选题

CSS属性will-change的核心作用是什么？

A

直接触发硬件加速，提升所有CSS属性动画的性能

B

提示浏览器元素即将发生变化，让浏览器提前优化渲染策略

C

强制元素创建独立的渲染层，防止与其他元素互相影响

D

设置动画的预期变化值，减少动画计算开销

10
多选题

关于will-change属性的合理使用，以下哪些做法是正确的？

A

在全局样式中对大量元素设置will-change

B

在动画开始前通过JavaScript动态设置will-change

C

动画结束后移除will-change属性以释放资源

D

只对确实需要高性能动画的元素设置will-change

E

设置will-change: auto表示取消所有优化提示

11
单选题

CSS属性变化触发重排与触发重绘的区别是什么？

A

重排只影响单个元素，重绘影响整个页面

B

重排涉及元素几何属性计算，重绘只涉及元素外观更新

C

重排比重绘性能开销更小，应优先使用重排属性

D

重排和重绘都只影响目标元素，不影响其他元素

12
判断题

连续修改多个触发重排的CSS属性时，浏览器会每次修改后立即执行重排，因此应尽量批量修改。

A

对

B

错

13
多选题

浏览器渲染管线中，各阶段的主要职责是什么？

A

样式计算阶段：确定元素应用的CSS规则最终值

B

布局阶段：计算每个元素的位置和大小

C

绘制阶段：将元素绘制到屏幕上

D

合成阶段：将各层组合成最终画面并显示

E

布局阶段同时计算元素的视觉变换效果

14
单选题

"层爆炸（Layer Explosion）"是指什么问题，应该如何避免？

A

页面元素过多导致渲染层数量超出限制，应减少元素数量

B

合成层过多导致GPU内存不足，应限制will-change的使用范围

C

CSS动画帧率过高导致性能下降，应降低动画帧率

D

层叠上下文嵌套过深导致渲染错误，应简化层级结构

15
多选题

使用requestAnimationFrame实现动画，相比setTimeout/setInterval有哪些优势？

A

动画帧率与显示器刷新率同步，避免画面撕裂

B

页面隐藏时自动暂停，节省资源

C

浏览器可以优化回调执行时机，避免错过帧

D

回调函数接收时间戳参数，方便计算动画进度

E

rAF可以替代所有setTimeout的使用场景

16
单选题

如何取消requestAnimationFrame注册的动画回调？

A

使用clearRequestAnimationFrame(id)

B

使用cancelAnimationFrame(id)，id是rAF返回的标识

C

在回调函数中返回false即可取消后续调用

D

设置window.requestAnimationFrame = null

17
多选题

实现60fps流畅CSS动画的关键策略有哪些？

A

关键帧只使用transform和opacity属性

B

对动画元素设置will-change提示

C

避免在动画期间触发强制同步布局

D

使用CSS containment限制渲染范围

E

减少关键帧的数量，尽量少于5个关键帧

F

确保动画元素不在复杂的层叠上下文中

18
判断题

CSS transition的性能优于animation，因为transition只需要计算起点和终点，而animation需要解析所有关键帧。

A

对

B

错

19
多选题

CSS媒体查询prefers-reduced-motion的应用场景包括哪些？

A

用户系统设置了"减少动态效果"偏好时的动画降级

B

检测设备CPU性能，自动禁用复杂动画

C

为无障碍用户提供更舒适的浏览体验

D

区分桌面设备和移动设备，应用不同动画策略

E

响应用户的辅助技术设置（如屏幕阅读器）

20
判断题

opacity从1变化到0.99的动画不会触发重绘，与opacity从1变化到0的动画性能相同。

A

对

B

错

← 上一个试卷 CSS预处理器（Sass、Less）专题测试
下一个试卷 → CSS高级布局（Flex、Grid、BFC）专题测试

📝 发现内容有误？点击此处直接编辑

想参加完整模拟考试？
小程序提供计时考试、自动评分和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库