CSS进阶-第二十八篇：CSS 性能优化与最佳实践-性能优化（二）：渲染性能优化

第二十八篇：CSS 性能优化与最佳实践-性能优化（二）：渲染性能优化

在前端开发中，页面的渲染性能直接影响用户体验。了解并优化可能导致渲染性能问题的因素，特别是与 CSS 相关的部分，是提升页面性能的关键。本文将深入探讨重排与重绘原理、选择器优化以及样式计算与缓存等方面的内容。

重排与重绘原理

重排（Reflow）

1. 原理：重排是指当 DOM 的变化影响了元素的几何属性（如位置、尺寸）时，浏览器需要重新计算元素的布局，进而更新渲染树的过程。浏览器渲染页面时，首先构建 DOM 树和 CSSOM 树，然后将两者合并生成渲染树，最后根据渲染树进行布局和绘制。当元素的布局属性（如 width、height、margin、padding、display 等）发生改变时，就会触发重排。因为这些改变会影响元素在页面中的位置和大小，浏览器需要重新计算整个页面的布局。
2. 实际案例与影响：假设我们有一个简单的 HTML 结构：