按钮点击触发全页重绘的根源在于未隔离绘制边界和样式污染链；需用contain: paint配合固定宽高、无溢出绝对定位、无祖先transform/opacity/filter，且视觉变更须统一收口至css类。
高频交互按钮本身不重排，但每次点击若触发样式更新、DOM 变动或布局读取，就可能连带引发重绘甚至重排——局部渲染不是靠“局部”二字自动生效的，关键在隔离绘制边界和切断样式污染链。
为什么 button 点击会意外触发全页重绘
表面看只是改个 background-color 或加个 active class，但真实链路常被忽略：
- 按钮父容器没设
contain: paint，颜色变化后浏览器无法确认“只影响这个按钮”，于是把整行甚至整个section标记为需重绘区域 - 用了
visibility: hidden切换状态，元素仍在文档流中，且兄弟元素的inline-block对齐逻辑被迫重算（触发隐式重排 → 连带重绘） - 点击回调里顺手读了
el.offsetTop或getComputedStyle(el).color，强制 flush 渲染队列，把之前所有样式变更一次性 layout + paint - 按钮用
width: 100%套在 flex 容器里，而该容器父级是height: auto，每次状态切换都让浏览器重新推导高度，触发同步重排
用 contain: paint 锁死按钮绘制范围
这是最直接有效的局部渲染手段，但必须满足三个硬条件才能生效：
- 按钮自身或其最近的、有明确边界的祖先元素（如
<div class="btn-wrapper">）必须设置固定宽高，<code>height: auto或min-height不够用 - 不能有子元素使用
position: absolute且top/left超出该容器边界，否则绘制溢出，contain 失效 - 该容器的任意祖先不能有
transform、opacity或filter，否则会创建新的包含块，把本该隔离的绘制又卷进去 - 所有视觉变更（颜色、缩放、阴影）必须统一收口到 CSS 类中，例如：
.btn:active { background-color: #0056b3; transform: scale(0.95); } - 避免在事件回调中混用
classList.add()和el.style.xxx，哪怕只是临时加个pointer-events: none，也应通过.btn--disabled类控制 - 如果必须动态计算值（如根据点击位置偏移），用
el.setAttribute('data-offset', x)，再靠 CSS 属性选择器驱动：[data-offset="100"] { transform: translateX(100px); } - 元素必须已提升为独立图层，最轻量做法是加
will-change: transform，但仅用于真正高频动画的按钮；长期挂载会增加 GPU 内存压力，别全局加 - 动画逻辑里绝对不要出现
el.offsetWidth、el.getBoundingClientRect()这类调用，哪怕只是用来 debug；想测尺寸？提前缓存好，或用 ResizeObserver 监听，而非在帧内实时读 - 慎用
filter: brightness()做点击反馈——它虽不重排，但会强制新建图层并触发额外合成，移动端掉帧明显；改用background-blend-mode或渐变叠加更轻量
验证是否生效：Chrome DevTools → Rendering → 勾选 Paint flashing，点按钮，高亮应严格限制在容器内。若整片区域泛红，说明 contain 没起作用。
class 切换比内联 style 更安全，但得配对写法
单独加 btn-active 类没问题，但若同时在 JS 里手动设 el.style.transform = 'scale(0.95)'，就会破坏合成层一致性，导致浏览器放弃硬件加速，降级为软件重绘。
动画属性必须走合成层，且不能依赖布局读取
按钮悬停或点击反馈动画，top/left 是重排雷区，transform 和 opacity 是唯一稳妥路径，但有两个隐藏前提：
真正难的不是加 contain 或写 transform，而是整个按钮组件的 HTML 结构、CSS 继承链、JS 事件逻辑三者必须对齐——漏掉任一环，局部渲染就退化成幻觉。
