面试题：如何通过 CSS 布局策略减少重绘与回流

运用 Flexbox 和 Grid 减少重绘与回流提升页面性能的思路

合理使用固定布局：对于页面中不随用户操作或数据变化而改变位置和大小的元素，使用固定的尺寸和位置，避免因元素尺寸或位置的动态改变引发回流。例如，页头、页脚等元素可设置固定高度和宽度。
减少元素层级：复杂的 DOM 结构会增加回流计算的成本。尽量将相关元素合并，减少嵌套层级。比如，在 Flexbox 或 Grid 布局中，避免不必要的多层容器。
批量操作 DOM：不要在循环中多次改变元素的样式，而是先改变元素的类名，通过修改 CSS 类来批量改变样式，这样只会触发一次回流和重绘。
利用 Flexbox 和 Grid 的优势：
- Flexbox：适用于一维布局，如水平导航栏或垂直排列的卡片。其简洁的布局模型能快速计算元素位置，减少回流。例如，使用 display: flex; justify-content: space-around; 可以均匀分布子元素，并且在子元素数量或大小变化时，计算相对简单。
- Grid：用于二维布局，像表格状的布局或复杂的页面网格。它能高效管理元素的位置，在页面重新布局时减少回流。比如，通过 display: grid; grid-template-columns: repeat(3, 1fr); 可以创建一个三列等宽的网格布局。

示例代码

Flexbox 示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .item {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

在此示例中，.container 使用 Flexbox 布局，通过 justify-content: space-around 均匀分布子元素，flex-wrap: wrap 使子元素在容器宽度不足时换行。这样的布局方式在添加或删除子元素时，能相对高效地重新布局，减少回流。

Grid 示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }

        .grid-item {
            height: 150px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</body>

</html>

此代码中，.grid-container 使用 Grid 布局，grid-template-columns: repeat(3, 1fr) 创建了三列等宽的网格，grid-gap: 10px 设置了网格间的间距。这种布局在调整列数或网格内容时，能有效减少重绘和回流的开销。

星途面试题库

面试题：如何通过 CSS 布局策略减少重绘与回流

知识考点

面试题答案

运用 Flexbox 和 Grid 减少重绘与回流提升页面性能的思路

示例代码

Flexbox 示例

Grid 示例