核心是减少重排重绘，通过documentfragment批量插入、innerhtml字符串拼接、class切换替代内联样式、读写分离及requestanimationframe时机控制来优化性能。
核心思路是减少浏览器强制重排（Reflow）和重绘（Repaint）的次数，尤其避免在循环或高频操作中反复触发布局计算。关键不在于“少改 DOM”，而在于“把多次改动合并成一次生效”。
用 DocumentFragment 批量插入节点
每次直接向真实 DOM 追加元素（如 appendChild），浏览器都可能立即触发重排。DocumentFragment 是内存中的轻量容器，对它操作不会引起任何渲染开销。
- 创建 fragment：
const frag = document.createDocumentFragment() - 所有新节点先加到 frag 中（
frag.appendChild(item)） - 最后只调用一次真实 DOM 插入：
list.appendChild(frag)
100 次循环插入 → 从 100 次重排降至 1 次，首屏时间可从 ~800ms 降到 ~150ms。
用 innerHTML 字符串拼接替代逐个创建
适合内容结构简单、无复杂事件绑定的场景。字符串拼接在 JS 引擎中极快，且赋值 innerHTML 是单次 DOM 更新。
- 先拼好完整 HTML 字符串：
let html = '';+ 循环html += <li>Item ${i}</li> - 一次性写入：
list.innerHTML = html
注意：会清空原有子节点及绑定的事件监听器，不适合需要保留交互逻辑的列表。
样式修改优先走 class 切换
直接改 element.style.xxx 属于内联样式，每次赋值都可能触发重排；而切换 class 是原子操作，浏览器可批量处理 CSSOM 变更。
- ❌ 避免这样：
el.style.width = '200px'; el.style.color = 'blue'; - ✅ 推荐这样：
el.classList.add('active');，CSS 中定义.active { width: 200px; color: blue; }
还能配合 CSS transitions / transforms 实现 GPU 加速动画，彻底绕过布局阶段。
读写分离 + requestAnimationFrame 控制时机
浏览器会在 JS 执行中“强制同步布局”：只要你在修改样式后立刻读取 offsetHeight 或 getComputedStyle，就会打断执行流、触发重排。
- 把所有“读布局”操作集中在一起（如统一放在循环前）
- 把所有“写样式/DOM”操作集中在一起（如统一放在循环后）
- 对动画类更新，用
requestAnimationFrame延迟到下一帧开始前执行，确保与浏览器刷新节奏对齐
例如滚动中动态更新位置，应避免边 scroll 边计算 offsetTop，改为节流 + RAF 批量更新。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
