说到 Reflow 和 Repaint，咱就是说这两个概念在前端性Neng优化中超级重要，你懂的。

先简单了解浏览器渲染页面的流程：

HTML + CSS 解析 ↓构建 DOM 树 + CSSOM 树 ↓合并成 Render Tree ↓Layout← 这一步就是 Reflow ↓Paint← 这一步就是 Repaint ↓Composite

页面首次加载时这个流程走一遍。之后每次你修改 DOM 或 CSS，浏览器需要从某个步骤重新开始，这就是性Neng开销的来源。

定义当页面中元素的几何信息发生变化时浏览器需要重新计算所有受影响元素的布局。

Reflow 是级联的。一个元素的尺寸变了它的兄弟元素、父元素、子元素dou可Neng需要重新计算位置。在复杂页面里一次 Reflow 可Neng需要重新计算几百上千个元素的布局。

const box = document.querySelectorbox.style.width = '200px' // 触发 Reflow ①box.style.height = '200px' // 触发 Reflow ②box.style.margin = '20px' // 触发 Reflow ③

每行dou触发一次 Reflow，共 次。

操作 触发 width/height/padding/margin改变 ✅ 回流 + 重绘 添加/删除可见 DOM 元素 ✅ 回流 + 重绘 font-size改变 ✅ 回流 + 重绘 color/background-color改变 ❌ 回流,✅ 重绘 visibility: hidden ❌ 回流,✅ 重绘 display: none ✅ 回流 + 重绘 transform/opacity改....特性 visibility: hidden display: none 是否占据空间 ✅ 占据原有布局空间 ❌ 完全从文档流中移除 是否触发回流 ❌ 不触发回流 ✅ 触发回流(因为布局改...

a、尽可Neng在dom末稍通过修改class来修改元素的style属性,尽可Neng减少受影响的dom元素。

// 方法一：一次性设置 classbox.className = 'box box--large' // 只触发 次 Reflow// 方法二：用 cssText 批量设置box.style.cssText = 'width: 200px; height: 200px; margin: 20px' // 只触发 次 Reflow 例 ：读取 DOM 属性会强制触发 Reflow

const box = document.querySelectorbox.style.width = '200px'// 以下读取操作会强制浏览器立刻完成未处理的 Reflow，才Neng返回准确值const width = box.offsetWidth // 强制 Reflowconst height = box.offsetHeight // 强制 Reflowbox.style.height = width + 'px' // 又触发一次 Reflow

这个"写 → 读 → 写 → 读"的交替模式是 Reflow Zui常见的陷阱，叫Zuo Layout Thrashing 。

优化方式：先把要读的值dou读完，再统一写：

// ✅ 先读const width = box.offsetWidthconst height = box.offsetHeight// 再写box.style.width = + 'px'box.style.height = + 'px'// 只触发 次 Reflow Repaint 是什么

定义当元素的视觉样式改变时浏览器需要重新绘制该元素。

Reflow 一定会触发 Repaint。 Repaint 不一定触发 Reflow。

所以 Reflow 的代价> Repaint 的代价。

现在再kan Vue 的异步批处理，逻辑就hen清晰了：

// Vue 同步geng新：改 次数据 → 次 Reflowthis.width = this.height = this.visible = true// Vue 异步批处理：改 次数据 → 合并 → 次 Reflow

Vue 的异步geng新本质上就是在帮你避免 Layout Thrashing，把多次 DOM 修改合并成一次只触发一次 Reflow + Repaint。

有些 CSS 属性由 GPU 处理，完全绕过 Reflow 和 Repaint：比如transform: translateX,哈哈，这也就是为什么,Zuo动画的时候，我们geng倾向于使用transform,而不是直接修改left,你懂的。

#javascript#ViewUI本文解释了网页渲染过程中回流与重绘的概念,并提供了减少这两种操作频率的方法,以提高网页性Neng。.对了说到这里有个小伙伴问我，为什么百度不收录我的网站呢？害，其实这个问题的答案有hen多种可Neng，但Zui常见的原因还是你的网站内容质量不够高，或者外部链接不够，或者是robots.txt文件设置不当等，你Ke以检查下这些方面kankan是不是有什么问题。

decrease repaints/reflows :尽量简化复杂的动画或动态效果，因为这些往往会导致频繁的重排和重绘。Ke以考虑将动画元素设置为position: fixed;或position: absolute;,使其脱离文档流,减少 对其他元素的影响。不对的，不对，应该说是让动画元素从DOM流中独立出来从而减少 对其他元素的影响，这样就Neng提高页面的性Neng表现啦！咱就是说这样Zuo的好处是显而易见的，你想啊，一个复杂动画Ru果老是导致整个页面重排重绘，那得多卡顿啊！说实话，这种情况在移动端geng加明显，因为移动设备的性Neng相对较弱，geng容易出现卡顿现象。所以为了让我们的网站geng加流畅，我们应该尽量减少 不必要的reflows和repaints。嗯，就这样吧！拜拜！下次再聊！😄👋

)