减少回流和重绘可提升页面性能。应避免频繁DOM操作，使用documentFragment或cloneNode批量处理，缓存查询结果；通过CSS类切换样式而非直接修改style；避免循环中读取offset等布局属性；动画优先用transform和opacity，配合will-change启用硬件加速，减少性能损耗。
减少回流（重排）和重绘是提升HTML页面性能的关键。回流是指浏览器重新计算元素几何位置和大小的过程，重绘则是更新元素外观但不改变布局。这两个操作都很消耗性能，尤其是频繁触发时会导致页面卡顿。
避免频繁操作DOM
每次对DOM的修改都可能触发回流或重绘。应尽量减少直接操作，可通过以下方式优化：
- 使用documentFragment或cloneNode在内存中构建结构，完成后再插入文档
- 批量修改DOM，避免逐条添加或删除
- 缓存DOM查询结果，避免重复querySelector或getElementById
使用CSS类代替直接样式修改
直接通过JavaScript修改元素样式（如el.style.width = "100px"）容易触发回流。推荐将样式写在CSS中，通过切换class来控制：
- 提前定义好不同状态的CSS类
- 用classList.add/remove切换状态，减少内联样式操作
- 这样更易维护，也便于浏览器做渲染优化
避免读取会触发回流的属性
访问某些属性（如offsetTop、clientWidth、scrollHeight）会强制浏览器同步计算布局，导致回流。
立即学习“前端免费学习笔记（深入）”；
- 不要在循环中读取这些布局信息
- 将值缓存到变量中，避免重复访问
- 使用getBoundingClientRect()获取多个值一次到位
优化动画实现方式
动画最容易引发频繁重绘甚至回流。应优先选择不会影响布局的属性进行动画：
- 使用transform和opacity实现动画，它们由合成层处理，性能更好
- 为动画元素设置will-change: transform或translateZ(0)，启用硬件加速
- 避免使用top/left等定位属性做频繁动画，会触发回流
基本上就这些。关键是理解哪些操作会触发回流重绘，并在开发中养成高效编码习惯。不复杂但容易忽略。
