🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在网页渲染过程中，重绘（Repaint）与重排（Reflow）是影响页面性能的关键因素。了解哪些CSS属性会触发这两种操作，对于优化网页性能、提升用户体验至关重要。本文将系统梳理触发重绘与重排的CSS属性，剖析其原理与影响。

一、重绘与重排的基本概念

• 重排（Reflow）：也称为回流，是指浏览器重新计算元素的几何属性（如位置、尺寸、布局），并重新构建渲染树的过程。重排会导致页面布局的重新计算，是一种高成本操作，可能引发一系列连锁反应，影响其他元素的位置和大小。
• 重绘（Repaint）：当元素的视觉外观发生变化，但不影响其几何属性时，浏览器会执行重绘操作。例如改变颜色、背景等，重绘仅更新元素的显示外观，不会涉及布局调整，性能开销相对较低。

二、触发重排的CSS属性

2.1 盒模型相关属性

属性	说明
width	修改元素宽度直接改变尺寸，引发元素及其子元素的布局重新计算
height	同理，高度变化会影响垂直方向的布局
margin	外边距调整会改变元素与相邻元素的间距，触发周围元素重排
padding	内边距变化会影响元素内部内容的空间，改变元素自身尺寸
border	边框宽度、样式或颜色的修改（宽度变化会影响尺寸）
box-sizing	改变盒模型计算方式（如 content-box 与 border-box 的切换）

示例代码：

/* 触发重排 */
.element {
    width: 200px; /* 修改宽度 */
    padding: 10px; /* 修改内边距 */
    margin-top: 20px; /* 修改外边距 */
}

2.2 定位与布局属性

属性	说明
position	从 static 切换到 relative/absolute/fixed 会脱离正常文档流
top/left	改变元素在定位中的偏移量，直接影响其位置
float	浮动元素会影响周围元素的排列，改变文档流布局
clear	清除浮动，强制元素换行，影响后续元素的布局
display	如 display: none 会从文档流中移除元素，display: block 则重新布局

示例代码：

/* 触发重排 */
.element {
    position: absolute; /* 改变定位方式 */
    top: 50px; /* 调整位置 */
    float: left; /* 设置浮动 */
    display: none; /* 从文档流中移除 */
}

2.3 字体与文本属性

属性	说明
font-size	字体大小变化会改变文本占据的空间，影响行高和布局
font-family	更换字体会改变字符宽度和高度，导致文本重新排版
line-height	行高调整直接影响文本段落的垂直间距

示例代码：

/* 触发重排 */
p {
    font-size: 18px; /* 增大字体大小 */
    font-family: Arial, sans-serif; /* 更换字体 */
    line-height: 1.5; /* 调整行高 */
}

三、触发重绘的CSS属性

3.1 颜色与背景属性

属性	说明
color	改变文本颜色，仅影响视觉外观，不涉及布局调整
background-color	修改背景色，重绘元素背景区域，不改变尺寸和位置
border-color	改变边框颜色，更新边框视觉效果
background-image	更换背景图片，重绘背景区域

示例代码：

/* 触发重绘 */
.element {
    color: red; /* 修改文本颜色 */
    background-color: #f0f0f0; /* 修改背景色 */
    border-color: blue; /* 修改边框颜色 */
    background-image: url('new-image.jpg'); /* 更换背景图片 */
}

3.2 阴影与装饰属性

属性	说明
box-shadow	添加或修改元素阴影效果，仅影响外观
text-shadow	修改文本阴影，不影响文本布局
outline	改变轮廓样式、颜色或宽度，不影响元素实际尺寸

示例代码：

/* 触发重绘 */
button {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
    text-shadow: 1px 1px 2px #ccc; /* 添加文本阴影 */
    outline: 2px solid green; /* 修改轮廓 */
}

四、特殊情况与优化策略

4.1 强制同步布局（Forced Synchronous Layout）

当JavaScript代码读取元素的布局相关属性（如 offsetWidth、scrollTop）时，浏览器可能会强制立即执行重排以获取最新值。频繁读取此类属性会导致不必要的性能损耗。

优化建议：

• 批量读取布局属性，减少强制重排次数；
• 使用 requestAnimationFrame 等异步机制，避免在动画过程中同步读取布局属性。

4.2 复合属性的影响

部分CSS属性（如 transition、transform）在合理使用时可降低性能损耗：

• transform：使用 transform 进行位移、缩放或旋转时，不会触发重排，仅触发复合层绘制（合成层），性能更佳；
• opacity：修改透明度仅触发重绘，不影响布局。

示例代码：

/* 推荐使用transform实现动画，减少重排 */
.element {
    transform: translateX(50px); /* 平移元素 */
    opacity: 0.5; /* 修改透明度 */
}

五、总结

操作类型	触发属性示例
重排	width、position、float、display、font-size 等影响几何布局的属性
重绘	color、background-color、box-shadow、text-shadow 等视觉外观属性

理解CSS属性对重绘与重排的影响，是优化网页性能的重要基础。在实际开发中，应尽量减少频繁修改触发重排的属性，合理利用复合属性和异步机制，降低渲染损耗，提升页面流畅度。