requestAnimationFrame是实现平滑文字动画的首选，需逐字符包裹span、分离计算与渲染、合理使用transform和will-change，并配合matchMedia和document.hidden做响应式中断控制。

用 requestAnimationFrame 实现平滑文字动画

直接用 setTimeout 或 setInterval 控制文字变化，容易掉帧、卡顿，尤其在低端设备上。浏览器对 requestAnimationFrame 有原生优化，能自动匹配屏幕刷新率（通常是 60fps），是动态文本的首选驱动方式。

关键点：

• 每次回调只做一次 DOM 更新，避免反复读写 offsetWidth 或 getComputedStyle
• 动画逻辑与渲染分离：先计算状态（如每个字符的 opacity、transform），再批量写入 style
• 务必在动画结束时调用 cancelAnimationFrame，否则内存泄漏风险高

let animationId = null;
function animateText() {
  // 更新字符状态逻辑（例如逐字淡入）
  updateCharStates();
  // 批量应用样式
  applyCharStyles();
  animationId = requestAnimationFrame(animateText);
}
animationId = requestAnimationFrame(animateText);

逐字动画必须拆分 ，不能靠 innerText 或正则替换

想让每个汉字/字母独立动起来？别试图用 textContent + 正则去“包裹”——这会破坏原有 DOM 结构，且无法保留空格、换行、HTML 实体（如  ）等细节。

正确做法是手动遍历文本节点，按字符粒度创建 并保留原始节点类型：

• 跳过 、 等非渲染节点
• 对 Text 节点逐字符处理， 、zuojiankuohaophpcn 等实体需先解码再拆分
• 保留原始空白符：用 node.wholeText + whiteSpace: pre 或 pre-wrap 防止折叠

function wrapTextNodes(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    const text = node.textContent;
    const parent = node.parentNode;
    Array.from(text).forEach(char => {
      const span = document.createElement('span');
      span.textContent = char;
      span.style.display = 'inline-block';
      parent.insertBefore(span, node);
    });
    parent.removeChild(node);
  }
}

transform + will-change 是性能关键，别滥用 opacity

纯 opacity 动画虽简单，但触发重绘（repaint），而 transform: translateX() 或 scale() 只走合成层（compositor），GPU 加速更稳。加上 will-change: transform 可提前提示浏览器优化路径，但仅对持续动画元素设置，否则反而增加内存开销。

常见误用：

• 给整个文字容器设 will-change，而不是每个
• 动画一停就立刻移除 will-change，导致频繁图层重建
• 在移动端对大量字符启用 filter: blur()，严重拖慢帧率

建议：动画开始前加 will-change，结束 200ms 后用 setTimeout 移除。

响应式中断时，用 window.matchMedia 主动暂停动画

用户缩放页面、切换横竖屏、或打开开发者工具时，resize 事件可能高频触发，若此时还在跑 requestAnimationFrame，极易卡死 UI。不能只监听 resize，要结合媒体查询主动判断是否进入“非活跃状态”。

实操建议：

• 用 window.matchMedia('(max-width: 768px)') 监听断点，匹配失败时暂停动画
• 监听 document.hidden，页面切到后台立即 cancelAnimationFrame
• 避免在 input 或 scroll 事件里启动文字动画——用户正在操作时，视觉干扰大于体验提升

复杂点在于：动画状态（如已播放 60%）需要保存，恢复时得接续而非重播。这点常被忽略，结果是窗口大小一变，文字就从头闪一遍。