频繁触发重排的HTML结构包括：1. table布局；2. 内联元素与float混用；3. 读取offsetWidth等后立即改样式；4. display: inline-block父容器含vertical-align子元素。
哪些 HTML 结构会频繁触发重排（reflow）
重排本质是浏览器重新计算元素几何属性（位置、尺寸），只要涉及布局变化就躲不掉。最典型的结构是那些让浏览器无法“提前知道尺寸”的写法。
-
table布局：表格单元格宽度依赖内容和同行其他单元格，一改就全表重排 - 内联元素 +
float混用：浮动元素脱离文档流，后续元素定位需反复回溯 - 使用
offsetWidth/offsetHeight等读取布局信息后立刻修改样式：强制同步触发重排，极易形成“读-改-读-改”循环 - 父容器用
display: inline-block且子元素含vertical-align：对齐行为依赖行高和兄弟元素，渲染时难以跳过计算
用 transform 和 opacity 替代哪些 CSS 属性
不是所有样式变更都会重排重绘。关键看是否影响布局或像素级绘制。现代浏览器对合成层（compositing layer）的优化很成熟，但前提是别踩错属性。
- 该用
transform: translateX(10px)，别用left: 10px—— 后者触发布局，前者只走合成器 - 该用
opacity: 0.5，别用visibility: hidden或display: none切换 —— 后两者会改变文档流，导致重排 - 避免在动画中读写
scrollTop、getBoundingClientRect()，它们强制刷新布局缓存 - 慎用
will-change: transform：只在真正需要时加，加太多反而增加内存开销和图层管理负担
innerHTML 批量更新比逐个 appendChild 快在哪
本质不是“字符串快”，而是浏览器对 DOM 批量解析有优化路径。逐个操作会多次触发样式计算和布局，而一次性插入可延迟到整个片段构建完再处理。
- 用
document.createDocumentFragment()收集节点再挂载，效果接近innerHTML，且更安全（防 XSS） -
innerHTML = str在旧版 IE 中可能清空事件监听器；现代浏览器没问题，但若节点已有绑定，仍建议用replaceChildren()或先移除再插入 - 如果只是改文本内容，优先用
textContent而非innerHTML—— 后者会触发 HTML 解析，哪怕内容里没标签 - 大量列表渲染时，避免在循环里直接操作
document.body.appendChild(item)，累积 100 次就是 100 次潜在重排
