必须用<span>包裹单词并设background-color过渡动画，禁用::selection和rgba；JS替换需安全遍历文本节点，避免innerHTML重写；注意避免触发重排以保动画流畅。
用 background-color + transition 实现单词级背景高亮动画
直接给单词加 background-color 并设置 transition 是可行的，但必须确保该单词被包裹在行内元素（如 <span>）中，且不能依赖纯文本节点——浏览器不会对裸文本节点应用过渡动画。
- 必须用
<span class="highlight">关键词</span>包裹目标词，不能靠 CSS 选择器“选中文字”再加动画（CSS 无此能力） -
transition要写在初始状态里，比如.highlight { background-color: transparent; transition: background-color 0.3s ease; }，否则首次 hover 不会动 - 避免用
rgba()或半透明色做初始/结束色——部分浏览器（尤其是 Safari）对background-color的 rgba 过渡支持不稳定，优先用纯色 +transparent
为什么 ::selection 不适合做这个动画
::selection 只能定义用户手动选中文本时的样式，无法触发、控制或绑定到交互事件（如 hover、click），更不支持 transition。它不是用来做“主动高亮”的工具。
- 你没法用 JS 触发
::selection样式，也不能给它加动画时长 - 它的样式优先级高，但作用域极窄：仅限用户鼠标拖选或双击选中时生效
- 想实现“悬停即高亮”，必须走元素包裹 + 类名切换这条路
JS 动态高亮多个单词时，innerHTML 替换容易出错
用正则匹配并替换文本为带 <span> 的 HTML 很常见，但直接操作 innerHTML 会破坏原有 DOM 结构（比如删掉已绑定的事件监听器、清空表单值、打断富文本编辑器状态）。
- 优先用
document.createElement+Node.textContent+Node.replaceChild做安全替换，避免重写整个 innerHTML - 正则要加
g和i标志，但注意特殊字符（如.、?）需转义，否则会漏匹配或报错 - 如果原文含 HTML 标签（比如
<strong>重要</strong>），正则替换可能污染标签结构，此时应先遍历文本节点处理，而非粗暴全局替换
动画卡顿？检查是否触发了重排（reflow）
给 background-color 加 transition 本身是 GPU 友好的，但如果高亮元素的父容器有 overflow: hidden 且内容溢出，或自身设置了 border-radius + overflow: hidden，动画过程中可能频繁触发重排，导致掉帧。
立即学习“前端免费学习笔记（深入）”；
- 确保高亮
<span>没有设置display: inline-block或padding（会改变行高，引发重排） - 若必须加内边距，改用
box-shadow: inset模拟，它比padding更轻量 - 在 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，看高亮区域是否频繁闪红——闪红意味着重绘开销大
