全部学科

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Web前端

TypeScript vue CSS HTML javascript pinia vite

Python全栈

NodeJS全栈

GO后端

golang gorm gin

小程序首页

📝 1 篇文章 20 道配套习题

CSS性能优化专题

专题说明

本专题系统讲解CSS性能优化的核心知识，包括渲染管线理解、选择器优化策略、重排重绘减少方法、高性能动画实现、关键CSS提取技术以及资源加载优化等关键领域。

学习目标

理解浏览器渲染管线及性能瓶颈
掌握CSS选择器优化的最佳实践
熟练减少重排重绘的策略与方法
实现高性能CSS动画的关键技术
掌握关键CSS提取与加载优化

学习内容

CSS性能优化概述：渲染管线、性能瓶颈分析
选择器优化：匹配方向、键选择器、复杂度控制
重排与重绘：概念区别、触发条件、减少策略
CSS动画性能：高性能属性、GPU加速、合成层
will-change使用：正确用法、时机把握
关键CSS提取：首屏CSS、内联策略、异步加载
图片优化：CSS Sprites、格式选择、HTTP/2影响

学习建议

重点理解重排重绘的概念，这是CSS性能的核心
动画性能优化优先使用transform和opacity
选择器优化关注键选择器（最右侧），避免深层嵌套
will-change谨慎使用，只在确实需要时添加
关键CSS提取配合构建工具自动化实现

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

📝 配套习题（20 题）

1

单选题

CSS性能优化的主要目标是什么？

A

减少CSS文件体积，加快下载速度

B

减少浏览器渲染时间，提升页面加载和交互体验

C

增加CSS选择器的复杂度

D

使用更多的CSS属性实现视觉效果

2

单选题

浏览器渲染页面时，哪个阶段最容易成为CSS性能瓶颈？

A

样式计算阶段

B

布局阶段（重排）

C

绘制阶段（重绘）

D

合成阶段

3

单选题

CSS选择器的匹配方向是从左到右还是从右到左？

A

从左到右，先匹配父元素再匹配子元素

B

从右到左，先匹配最右侧的选择器再向左验证

C

两种方式都可以，取决于浏览器实现

D

从中间向两边匹配

4

单选题

以下哪个选择器性能最差？

A

#header .nav-item

B

div div div a span.link

C

.container > .item:first-child

D

button[data-type="submit"]

5

多选题

以下哪些是CSS选择器优化的有效做法？

A

使用ID选择器替代深层嵌套选择器

B

避免使用通配符选择器作为键选择器

C

减少选择器的嵌套层级

D

使用属性选择器替代类选择器

E

避免在大型文档中使用复杂伪类选择器

6

单选题

重排（Reflow）与重绘（Repaint）的主要区别是什么？

A

重排只改变颜色，重绘改变布局

B

重排改变元素几何属性，重绘只改变视觉外观

C

重排比重绘性能开销更小

D

两者完全相同，只是名称不同

7

单选题

修改以下哪个CSS属性会触发重排？

A

color

B

background-color

C

width

D

opacity

8

多选题

以下哪些操作会触发重排？

A

修改元素的font-size

B

修改元素的transform属性

C

添加或删除DOM元素

D

修改元素的class属性（样式包含几何变化）

E

读取offsetWidth属性

9

多选题

以下JavaScript代码中，哪些会触发强制同步布局（Layout Thrashing）？

A

element.style.width = '100px'; element.offsetWidth;

B

element.style.width = '100px'; element.style.height = '50px';

C

for(let i=0; i<100; i++) { elements[i].style.width = '10px'; elements[i].offsetWidth; }

D

element.style.color = 'red'; element.offsetWidth;

E

const width = element.offsetWidth; element.style.width = width + 10 + 'px';

10

填空题

减少重排的策略包括：使用_________替代left/top做位移动画，批量修改样式时先让元素__________，使用________避免读写交替触发强制同步布局。

11

单选题

实现高性能CSS动画，应优先使用哪些属性？

A

left、top、width、height

B

transform、opacity

C

margin、padding

D

font-size、line-height

12

单选题

使用animation: slide 1s; @keyframes slide { from {left:0} to {left:100px} }与使用transform: translateX实现相同位移效果，性能差异的主要原因是？

A

left动画需要浏览器重新计算布局，transform只改变视觉呈现

B

left不支持动画，只有transform支持

C

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

D

两者性能相同，只是语法不同

13

多选题

以下哪些CSS属性动画可以利用GPU硬件加速？

A

transform: translate

B

transform: scale

C

transform: rotate

D

opacity

E

filter: blur

F

width

14

单选题

以下哪种方式是will-change的正确用法？

A

给所有元素设置 will-change: transform

B

在用户点击按钮后设置 will-change: opacity，动画结束后立即移除

C

在CSS中为静态元素设置 will-change: all

D

在动画开始后设置will-change

15

单选题

关键CSS（Critical CSS）是指什么？

A

最重要的CSS规则，不可删除

B

首屏渲染所需的CSS规则集合

C

性能最优的CSS写法

D

浏览器必须执行的CSS动画

16

单选题

将关键CSS内联到HTML文档头部的作用是什么？

A

减少CSS文件体积

B

避免CSS加载阻塞首屏渲染，加快首屏显示

C

禁止外部CSS文件加载

D

增加HTML文件的体积

17

多选题

关于CSS阻塞渲染的说法，哪些是正确的？

A

外部CSS文件会阻塞渲染，直到CSSOM构建完成

B

内联CSS不会阻塞渲染

C

CSS阻塞渲染是为了避免无样式内容闪烁（FOUC）

D

媒体查询不匹配的CSS也会阻塞渲染

E

JavaScript执行可能被CSS加载阻塞

18

单选题

使用CSS Sprites显示雪碧图中的某个图标，需要设置哪些CSS属性？

A

background-image和background-size

B

background-image、background-position和设置元素的width、height

C

只需要设置background-color

D

img标签的src属性

19

单选题

在CSS动画中使用will-change的最佳时机是什么？

A

在动画开始的同时设置will-change

B

在动画结束后设置will-change

C

在用户交互触发动画之前设置will-change（如hover时）

D

在页面加载时给所有元素设置will-change

20

多选题

替代CSS @import的最佳做法是什么？

A

使用JavaScript动态加载CSS

B

使用多个标签引入CSS文件

C

将所有CSS合并为一个文件

D

使用内联样式替代外部CSS

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

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

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