优先用 createElement + appendChild 或 DocumentFragment 批量操作，避免 innerHTML 的安全与性能问题；有 ID 时用 getElementById；事件绑定始终用 addEventListener 并注意委托与清理；避免强制同步布局，读写分离并善用 transform。
直接修改 innerHTML 还是用 createElement？
多数情况下，innerHTML 看似快捷，但存在安全风险和性能隐患：它会销毁并重建整个子树，触发重排（reflow）和重绘（repaint），还会丢弃已绑定的事件监听器。而 document.createElement + appendChild 虽然代码略多，但更可控、可复用，且不会意外清空已有状态。
- 动态插入大量结构化内容（如列表项）时，优先用
DocumentFragment批量操作，再一次性挂载，避免多次重排 - 仅更新文本内容时，用
textContent替代innerHTML，既防 XSS 又更快 - 若必须用
innerHTML（例如渲染富文本），务必先对字符串做严格转义，或使用DOMPurify.sanitize()
querySelector 和 getElementById 哪个更快？
getElementById 是 DOM API 中最快的查找方式，因为它走的是底层 ID 索引，时间复杂度接近 O(1)；而 querySelector 需要解析 CSS 选择器并遍历匹配，即使只查 #id，也比 getElementById 慢 2–5 倍（实测 Chromium 下）。
- 有明确 ID 时，无条件用
document.getElementById('myId') -
querySelector适合复杂定位（如article > .content:first-child），但避免在循环中反复调用——缓存结果 - 批量查找同类元素（如所有按钮），
querySelectorAll返回静态 NodeList，比getElementsByClassName的实时 HTMLCollection 更稳定
事件绑定该用 addEventListener 还是 onclick 属性？
永远用 addEventListener。直接赋值 element.onclick = handler 会覆盖之前绑定的监听器，且无法控制捕获/冒泡阶段，也不支持选项（如 { once: true, passive: true }）。
- 高频触发事件（如
scroll、mousemove）务必加节流或防抖，或启用{ passive: true }提升滚动流畅度 - 为动态插入的节点绑定事件时，优先用事件委托：在父级监听，用
event.target.matches('.btn')判断来源 - 组件卸载前记得调用
removeEventListener，否则可能引发内存泄漏（尤其 React/Vue 等框架外的手动管理场景）
频繁读写 offsetTop、clientWidth 会拖慢页面吗？
会，而且很严重。这类属性属于“强制同步布局”（Forced Synchronous Layout），浏览器必须立即计算当前样式和布局，打断渲染流水线，造成卡顿。尤其在动画循环（如 requestAnimationFrame）中反复读写，性能雪崩。
立即学习“Java免费学习笔记（深入）”；
- 把读操作集中到一起（如先批量读取所有
offsetTop，再统一写入style.left），避免“读-写-读-写”交错 - 用
getBoundingClientRect()替代多个偏移属性组合，它只触发一次布局计算 - 纯视觉位移优先用
transform和opacity，它们由合成器线程处理，不触发布局和绘制
const el = document.getElementById('box');
// ❌ 危险：两次强制布局
console.log(el.offsetTop);
el.style.left = '100px';
console.log(el.clientWidth); // 再次强制布局
// ✅ 安全：读完再写
const rect = el.getBoundingClientRect();
el.style.transform = `translateX(${rect.left + 10}px)`;
DOM 操作本身不难，难的是判断什么时候该批处理、什么时候该避让、什么时候该交还给 CSS。很多性能问题不是出在“没写对”，而是出在“没想清楚浏览器正在做什么”。
