优化DOM操作需减少重排重绘：优先用querySelector/All精准选元素并缓存；批量更新用DocumentFragment；纯文本设textContent，HTML内容用innerHTML（注意转义）；状态切换用classList而非style。
直接操作DOM更新页面内容，关键在于减少重排重绘、避免频繁访问布局属性、批量处理变更，并优先使用现代API。
用document.querySelector精准获取元素
相比getElementById或getElementsByClassName，querySelector语法灵活、语义清晰，且返回单个元素（更符合多数场景）：
- 选中唯一元素时，用querySelector('#header')比getElementById('header')更统一
- 需多个同类型元素时，用querySelectorAll('.item')返回静态NodeList，可直接用forEach
- 避免反复调用查询方法——把查到的元素存为变量复用
批量更新：用DocumentFragment暂存节点
一次性插入大量子元素时，逐个appendChild会多次触发重排。改用DocumentFragment先组装再挂载：
- 创建const frag = document.createDocumentFragment()
- 循环中用frag.appendChild(item)添加节点（不触发渲染）
- 最后parent.appendChild(frag) —— 仅一次真实DOM操作
修改内容优先用textContent和innerHTML而非innerText
textContent最快最安全，适合纯文本；innerHTML适用于含HTML结构的动态内容：
立即学习“Java免费学习笔记（深入）”；
- 设纯文本用el.textContent = 'Hello' —— 不解析HTML，无XSS风险，性能最好
- 需渲染HTML时用el.innerHTML = 'Done' —— 注意自行转义用户输入
- 避免innerText：它会触发回流计算样式，且行为在不同浏览器中不一致
状态驱动更新：善用classList切换样式
通过增删class控制视觉状态，比直接操作style属性更高效、更易维护：
- 开关类名：btn.classList.toggle('active')
- 批量操作：el.classList.add('valid', 'submitted') 或 remove('pending')
- 检查状态：if (el.classList.contains('error')) { ... }
不复杂但容易忽略：每次DOM写操作都可能引发重排，把读（如offsetHeight）和写分开、批量处理、少用innerHTML拼接长字符串，就能明显提升响应速度。
