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

CSS渲染与布局原理

20 题 90 分钟 难度：

考察知识点

  • CSS 渲染流水线：DOM/CSSOM 构建、渲染树生成、布局、绘制、合成全流程
  • 回流/重排与重绘机制：触发条件、性能影响、优化策略、强制同步回流
  • 合成层与渲染性能：GPU 加速、will-change 使用、层叠上下文、动画优化
  • BFC 与布局上下文：创建条件、隔离特性、实际应用场景（清除浮动、外边距折叠）
  • 层叠上下文与渲染层：z-index 层级、渲染层划分、对性能的影响
1
单选题

在浏览器渲染流水线中，以下哪个阶段的执行顺序是正确的？

A

构建 DOM 树 → 构建 CSSOM 树 → 布局 → 绘制 → 合成

B

构建 CSSOM 树 → 构建 DOM 树 → 绘制 → 布局 → 合成

C

构建 DOM 树 → 布局 → 构建 CSSOM 树 → 绘制 → 合成

D

构建 DOM 树 → 构建 CSSOM 树 → 合成 → 布局 → 绘制

2
单选题

关于渲染树（Render Tree）的构建，以下说法正确的是？

A

渲染树包含 DOM 树中的所有元素节点

B

渲染树是 DOM 树和 CSSOM 树合并后的结果，不包含不可见元素

C

渲染树仅包含 CSSOM 树中的样式规则

D

渲染树与 DOM 树节点一一对应，数量完全相同

3
多选题

在浏览器渲染流水线中，以下哪些操作发生在"布局（Layout）"阶段？

A

计算 DOM 元素的几何信息（位置和大小）

B

将元素绘制到位图中

C

确定元素之间的层级关系

D

处理盒模型相关的属性计算

E

建立渲染树中节点的坐标系统

4
单选题

以下哪个 CSS 属性的修改只会触发重绘，不会触发回流？

A

width

B

position

C

color

D

padding

5
多选题

以下哪些操作会触发浏览器的回流（Reflow）？

A

改变元素的 font-size 属性

B

获取元素的 offsetWidth 属性值

C

给元素添加或删除子节点

D

修改元素的 background-color 属性

E

改变浏览器窗口大小

F

使用 getComputedStyle 获取元素计算样式

6
判断题

浏览器会将多个回流操作批量处理，但读取 offsetTop、scrollTop 等属性会立即触发强制同步回流。

A

对

B

错

7
单选题

关于 CSS 合成层（Compositing Layer），以下说法正确的是？

A

合成层由 CPU 创建，可以减少主线程的压力

B

所有 CSS 动画都会自动创建合成层

C

合成层由 GPU 管理，可以避免主线程阻塞导致的动画卡顿

D

合成层越多越好，可以最大化渲染性能

8
多选题

以下哪些 CSS 属性或设置可以帮助元素提升为独立的合成层？

A

transform: translateZ(0)

B

will-change: transform

C

position: absolute

D

opacity 配合动画使用

E

backface-visibility: hidden

F

overflow: hidden

9
填空题

CSS 属性 will-change 用于提前告知浏览器元素将要发生的变化，以便浏览器进行优化。使用时应指定具体的变化属性，如 will-change: _________; 表示元素即将进行变换操作。但需注意，不要对______元素使用此属性，因为每个合成层都需要额外的______开销。

10
单选题

关于块级格式化上下文（BFC），以下说法正确的是？

A

BFC 内部的元素会与外部的浮动元素发生重叠

B

BFC 是一个独立的渲染区域，内部元素不影响外部布局

C

BFC 只能通过 overflow: hidden 来创建

D

BFC 内部的子元素仍然遵循外部的文档流规则

11
多选题

以下哪些 CSS 设置可以触发元素创建块级格式化上下文（BFC）？

A

float: left

B

overflow: auto

C

display: inline-block

D

position: relative

E

display: flex

F

column-count: 2

12
判断题

BFC 可以阻止父元素与子元素之间的外边距折叠（Margin Collapse）。

A

对

B

错

13
单选题

关于层叠上下文（Stacking Context）与渲染的关系，以下说法正确的是？

A

层叠上下文只影响元素的显示顺序，不影响渲染性能

B

创建层叠上下文的元素会成为独立的渲染层，可能提升为合成层

C

z-index 为 0 的元素一定会创建新的层叠上下文

D

层叠上下文与 BFC 是同一个概念，只是叫法不同

14
单选题

在使用 CSS 动画实现一个持续旋转的元素时，以下哪种方案能够最大程度减少主线程压力？

A

使用 left 和 top 属性配合 absolute 定位实现动画

B

使用 margin 属性控制元素位置变化

C

使用 transform: rotate() 配合 will-change: transform

D

使用 width 和 height 属性实现缩放动画

15
多选题

为了优化首次渲染性能（FCP/LCP），以下哪些做法可以减少渲染阻塞？

A

将关键 CSS 内联到 <head> 中

B

对非关键 CSS 使用 media 属性进行条件加载

C

使用 <link rel="preload"> 预加载关键字体文件

D

将所有 JavaScript 脚本放在 <head> 顶部

E

使用 async 或 defer 属性加载非关键脚本

F

增加外部 CSS 文件的数量以实现并行下载

16
多选题

以下哪些场景可以通过创建 BFC 来解决？

A

父元素高度塌陷，无法包含浮动子元素

B

相邻块级元素的外边距发生折叠

C

文字环绕浮动元素排版

D

行内元素之间的空白间隙问题

E

阻止浮动元素覆盖相邻元素内容

F

固定定位元素超出视口显示

17
判断题

使用 CSS 的 transform 和 opacity 属性进行动画时，可以完全绕过主线程，在合成线程中处理动画帧。

A

对

B

错

18
判断题

CSS 的加载和解析会阻塞 DOM 树的构建，因此应该将 CSS 放在文档底部以加速页面渲染。

A

对

B

错

19
填空题

在开发中减少回流和重绘的优化策略包括：使用______批量修改样式而非逐条修改 style 属性；对需要多次布局操作的元素先设置_____________脱离文档流再操作；使用________________进行批量 DOM 操作；通过______________替代 window.onresize 监听元素尺寸变化。

20
简答题

请解释 BFC（块级格式化上下文）的概念，并列举至少 3 种创建 BFC 的方式及其在开发中的实际应用场景。

← 上一个试卷 CSS样式属性
下一个试卷 → CSS盒模型

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

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

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

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