标签: DOM操作

`insertAdjacentElement()` 是高效原生JS DOM方法，通过位置字符串（如`beforebegin`、`afterbegin`等）精确插入元素节点。解决`appendChild`灵活性差、`insertBefore`语法繁琐、`innerHTML`性能差问题，直接操作节点，避免事件丢失。衍生：`insertAdjacentHTML`、`insertAdjacentText`。

本文介绍了一个通用的`cleanAudio`函数，用于清理`<audio>`节点。该函数接收选择器或节点作为参数，实现停止播放、移除音源、释放资源、清理事件监听器以及移除DOM节点。通过克隆节点替换并移除的方式，有效清理了所有事件监听器，并释放资源。

Vue 组件卸载前需暂停音频播放。`onBeforeUnmount` 在 DOM 卸载前执行，可访问 DOM 元素；`onUnmounted` 在 DOM 卸载后执行，无法访问。因此，应使用 `onBeforeUnmount` 来确保在 DOM 销毁前暂停音频，避免潜在错误。

在使用`scrollIntoView`时，导航栏遮挡目标元素是个常见问题。本文提供了多种解决方案，包括推荐的CSS `scroll-margin-top` 属性，以及JavaScript手动计算偏移的`scrollTo`方法，还涉及动态获取导航栏高度和Intersection Observer等。最佳实践建议优先使用CSS方案。

讨论了 textarea 双击选中单词时连带选中空格的问题。提出了两种规避方案：双击后按住鼠标左移，或使用快捷键 Ctrl+Shift+Left 精确选择单词。针对用户体验给出了实用技巧。

浏览器渲染页面涉及回流(reflow)和重绘(repaint)。回流是节点大小、边距变化导致重计算，重绘是节点样式变化不影响布局。频繁的回流影响性能。优化方法包括合并样式修改、批量操作元素、缓存HTMLCollection结果。DOM操作慢主要因部分读操作导致lazy reflow失效。