减少重绘和回流可显著提升页面性能，因二者直接触发渲染管线、消耗大量CPU/GPU资源；回流需重新计算几何属性并构建渲染树，重绘仅重画像素，频繁触发会导致卡顿。
减少重绘（repaint）和回流（reflow）能显著提升页面速度，因为它们直接触发浏览器的渲染管线，消耗大量 CPU 和 GPU 资源。每次回流都要重新计算元素的几何属性（位置、尺寸），并重新构建渲染树；重绘则需重画像素。频繁触发会导致页面卡顿、响应延迟，尤其在中低端设备上更明显。
哪些操作会触发回流和重绘
理解触发条件是优化前提：
-
回流（高开销）：读取或修改元素的布局相关属性，如
offsetTop、clientWidth、getComputedStyle()（若涉及几何计算）、添加/删除 DOM 元素、改变元素尺寸或位置（width、height、padding、font-size等） -
重绘（相对低开销）：仅改变不影响布局的样式，如
color、background-color、visibility（注意：visibility: hidden不触发回流，但display: none会）
批量读写 DOM，避免强制同步回流
浏览器会将多次 DOM 读写操作合并为一次回流，但一旦在写操作前读取布局信息，就会强制立即执行回流（称为“强制同步回流”），打断优化机制。
✅ 好做法：先集中读取所有需要的布局值，再集中修改样式
立即学习“Java免费学习笔记（深入）”；
❌ 避免写法：
div.style.width = '100px';
console.log(div.offsetWidth); // 强制回流
div.style.height = '200px'; // 再次回流
✅ 推荐写法：
const w = div.offsetWidth;
const h = div.offsetHeight;
div.style.cssText = `width: ${w}px; height: ${h}px;`; // 一次批量应用
用 CSS 变换和图层提升代替直接修改几何属性
对动画或频繁变化的元素，优先使用 transform 和 opacity：
-
transform: translateX(10px)不触发回流，只触发合成（compositing），由 GPU 加速 - 给元素添加
will-change: transform或transform: translateZ(0)可提前创建独立图层，减少重绘范围 - 避免用
top/left动画，它会持续触发回流
简化 CSS 选择器与避免隐式表布局
复杂的 CSS 规则会拖慢回流时的样式计算和渲染树构建：
- 避免深层嵌套选择器（如
div ul li a），用语义化 class 替代 - 慎用
table布局，表格单元格的尺寸相互依赖，一个单元格变化可能引发整行甚至整表回流 - 移除未使用的 CSS，减小样式计算负担
不复杂但容易忽略——控制 DOM 操作频次、善用虚拟 DOM 或 requestAnimationFrame 批量更新、用 CSS 硬件加速替代 JS 布局计算，这些都能让页面更顺滑。
