面试题：CSS 响应式网页中 Flexbox 与 Grid 布局的性能优化

重排与重绘：当 Flexbox 或 Grid 布局发生变化时，例如窗口大小改变、元素添加/删除等，可能导致页面重排和重绘。重排会重新计算元素的位置和大小，重绘则重新绘制元素到屏幕上，频繁的重排重绘会消耗大量性能。
复杂布局计算：大量元素使用 Flexbox 或 Grid 布局时，浏览器需要进行复杂的布局计算，尤其是嵌套布局较多时，这会占用较多 CPU 资源，导致页面渲染卡顿。
内存占用：每个使用 Flexbox 或 Grid 布局的元素都会在内存中占用一定空间，大量元素会导致内存占用过高，影响页面性能，特别是在移动设备上。
图片加载影响：如果图片在 Flexbox 或 Grid 布局的元素内，图片加载过程可能会影响布局稳定性，例如图片加载完成后撑开布局，导致重排。

减少重排重绘
- 批量修改样式：不要一条一条地修改元素样式，而是一次性修改多个样式。例如使用 class 切换，而不是直接操作 style 属性。
- 使用 will-change 提示浏览器：在布局变化前，通过 will-change: transform 等声明告知浏览器，让浏览器提前做好优化准备，但不要滥用，因为它会占用额外的内存。
简化布局结构
- 避免过度嵌套：尽量减少 Flexbox 或 Grid 布局的嵌套层数，简化布局结构，降低浏览器的计算复杂度。
- 使用 display: none 隐藏元素：在需要隐藏元素时，使用 display: none，它不会影响布局，而 visibility: hidden 仍会占据空间，可能导致布局计算更复杂。
优化内存使用
- 合理使用 flex-shrink 和 grid-template-rows/columns：通过合理设置这些属性，控制元素的大小和布局，避免元素过度占用内存。
- 及时释放不再使用的元素：例如在单页应用中，当页面切换后，及时释放不再使用的 DOM 元素及其相关资源。
处理图片加载
- 使用 loading="lazy"：对图片添加 loading="lazy" 属性，实现图片的懒加载，避免图片一次性全部加载影响布局和性能。
- 设置图片尺寸：在 HTML 或 CSS 中提前设置好图片的尺寸，避免图片加载后撑开布局导致重排。

优先使用 transform：在布局调整时，如果只是需要移动、缩放或旋转元素，优先使用 transform 属性，因为它不会触发重排，只触发重绘，性能更好。例如在响应式布局中，通过媒体查询改变元素的位置时，使用 transform: translateX() 等。
使用 CSS 变量：在不同的布局状态下，通过修改 CSS 变量的值来改变布局样式，这样可以减少重复的样式声明，提高维护性，同时浏览器也更容易优化。例如：

:root {
  --main-gap: 16px;
}
@media (min - width: 768px) {
  :root {
    --main-gap: 32px;
  }
}
.container {
  gap: var(--main-gap);
}

采用 requestAnimationFrame：如果布局调整涉及到动画效果，使用 requestAnimationFrame 来控制动画，它会在浏览器下一次重绘之前调用回调函数，保证动画的流畅性，避免频繁触发重排重绘。例如：

function updateLayout() {
  // 布局调整代码
}
requestAnimationFrame(updateLayout);

知识考点