优化页面布局重排需读写分离、固定容器尺寸、慎用动态Flex/Grid属性，并用CSS变量替代JS布局计算以减少强制重排。
页面布局重排（reflow）频繁，本质是浏览器反复计算元素几何位置与尺寸，常由 DOM 变动、样式读写交错、或弹性/网格容器内子项动态变化触发。Flex 和 Grid 本身高效，但用法不当会放大重排开销。关键不是少用它们，而是让浏览器“算得少、算得稳”。
避免在循环中读写 flex/grid 相关样式
比如在 for 循环里反复读取 offsetLeft 或 getComputedStyle(el).flexGrow，再立即修改 style.flexBasis，会强制浏览器同步计算布局，逐次触发重排。
- 把所有读操作集中到循环前（如缓存
clientWidth、getComputedStyle结果） - 把所有写操作集中到循环后（如批量修改 class 或一次性设
style.cssText） - 用
requestAnimationFrame延迟到下一帧执行写入，让读写分离更彻底
慎用依赖内容尺寸的 flex 属性
flex: 1、flex: auto、flex-grow: 1 本身不危险，但当父容器宽高未固定，且子项含图片、字体加载、或异步内容时，尺寸可能多次变化，引发连锁重排。
- 给 flex 容器设置明确的
width和height（或min-height），尤其在滚动区域或卡片列表中 - 图片加
width/height属性或使用aspect-ratio，避免加载后撑开容器 - 用
flex-shrink: 0防止内容收缩导致父容器尺寸抖动（如图标+文字组合）
Grid 中减少隐式轨道与跨行跨列动态变更
用 grid-template-rows: repeat(auto-fit, minmax(200px, 1fr)))) 很灵活，但内容增减时，轨道数量变化会重新分配所有格子位置；grid-row: span 2 在 JS 动态切换时，也可能迫使整行重算。
- 静态结构优先用显式定义：
grid-template-columns: 1fr 2fr 1fr比repeat(3, 1fr)更稳定 - 需响应式时，用媒体查询切换整套
grid-template，而非 JS 修改单个属性 - 避免在动画/高频事件中修改
grid-area或grid-column，改用transform或visibility控制显隐
用 CSS 自定义属性 + calc() 替代 JS 布局计算
例如实现等分布局，不要用 JS 算每个 item 的宽度再赋值 style.width，这会强制重排；而应通过 CSS 变量驱动：
.container {
--item-count: 3;
display: grid;
grid-template-columns: repeat(var(--item-count), 1fr);
}
JS 只需更新 element.style.setProperty('--item-count', n)，浏览器内部处理，不触发重排。
- 适合计数变化、列数切换、间距调整等场景
- 配合
@property（支持环境下）还能做类型约束与插值动画 - 比直接操作
style.gridTemplateColumns更轻量、更可预测
