CSS渲染与布局原理
考察知识点
- CSS 渲染流水线：DOM/CSSOM 构建、渲染树生成、布局、绘制、合成全流程
- 回流/重排与重绘机制：触发条件、性能影响、优化策略、强制同步回流
- 合成层与渲染性能：GPU 加速、will-change 使用、层叠上下文、动画优化
- BFC 与布局上下文：创建条件、隔离特性、实际应用场景（清除浮动、外边距折叠）
- 层叠上下文与渲染层：z-index 层级、渲染层划分、对性能的影响
BFC 可以阻止父元素与子元素之间的外边距折叠（Margin Collapse）。
CSS 的加载和解析会阻塞 DOM 树的构建，因此应该将 CSS 放在文档底部以加速页面渲染。
使用 CSS 的 transform 和 opacity 属性进行动画时，可以完全绕过主线程，在合成线程中处理动画帧。
浏览器会将多个回流操作批量处理，但读取 offsetTop、scrollTop 等属性会立即触发强制同步回流。
关于渲染树（Render Tree）的构建，以下说法正确的是？
以下哪个 CSS 属性的修改只会触发重绘，不会触发回流？
关于 CSS 合成层（Compositing Layer），以下说法正确的是？
在使用 CSS 动画实现一个持续旋转的元素时，以下哪种方案能够最大程度减少主线程压力？
关于层叠上下文（Stacking Context）与渲染的关系，以下说法正确的是？
关于块级格式化上下文（BFC），以下说法正确的是？
在浏览器渲染流水线中，以下哪个阶段的执行顺序是正确的？
以下哪些 CSS 设置可以触发元素创建块级格式化上下文（BFC）？
以下哪些 CSS 属性或设置可以帮助元素提升为独立的合成层？
为了优化首次渲染性能（FCP/LCP），以下哪些做法可以减少渲染阻塞？
以下哪些场景可以通过创建 BFC 来解决？
以下哪些操作会触发浏览器的回流（Reflow）？
在浏览器渲染流水线中，以下哪些操作发生在"布局（Layout）"阶段？
CSS 属性 will-change 用于提前告知浏览器元素将要发生的变化，以便浏览器进行优化。使用时应指定具体的变化属性，如 will-change: ____________; 表示元素即将进行变换操作。但需注意，不要对____________元素使用此属性，因为每个合成层都需要额外的____________开销。
在开发中减少回流和重绘的优化策略包括：使用____________批量修改样式而非逐条修改 style 属性；对需要多次布局操作的元素先设置____________脱离文档流再操作；使用____________进行批量 DOM 操作；通过ResizeObserver替代 window.onresize 监听元素尺寸变化。
请解释 BFC（块级格式化上下文）的概念，并列举至少 3 种创建 BFC 的方式及其在开发中的实际应用场景。
