html不支持歌词同步滚动，需用javascript监听audio的ontimeupdate事件；解析lrc须保留毫秒精度，用parsefloat转时间戳；跳过无时间行；用二分查找+缓存优化性能；滚动用transform:translatey()并设固定行高；加±0.05秒宽容窗口防错行。
HTML 本身不支持歌词同步滚动，<time></time> 标签只是语义化容器，没有时间感知能力；真正能驱动同步的是 JavaScript 配合 <audio></audio> 的 ontimeupdate 事件和 DOM 操作逻辑。
解析 LRC 字符串必须提取毫秒级时间戳
常见错误是只取到秒级（如 "00:28.44" → 28.44），但音频 currentTime 是浮点数，单位为秒，精度可达毫秒。若原始 LRC 含三位小数（"00:28.440"），应保留并转为 28.440，否则在快进/拖动时容易错行。
- 用
parseFloat()直接解析带小数的时间字符串，别用parseInt()截断 - 分钟部分乘 60 后，要加上秒部分（含小数），再统一转为浮点数，例如：
parseInt("00") * 60 + parseFloat("28.440") === 28.440 - 跳过无时间戳的行（如
[ar:歌手]、[ti:歌名]），避免NaN进入数组
ontimeupdate 里不能每帧遍历整个歌词数组
频繁调用 $.each() 或 for 遍历全部歌词，在长歌词（>200 行）或低端设备上会卡顿。关键不是“写不对”，而是没做查找优化。
- 把
lrcArray按t字段升序排列（LRC 通常已有序，但需确保） - 用二分查找（
findIndex+ 左闭右开区间）替代线性遍历，将时间复杂度从 O(n) 降到 O(log n) - 加一层缓存：记录上一次匹配的索引
lastIndex，当前currentTime只需从lastIndex开始向后检查 2–3 行（因音频播放是连续的）
滚动居中要用 transform: translateY()，不是 margin-top 或 top
用 margin-top 改变 <ul></ul> 位置会触发重排（reflow），尤其在高频 ontimeupdate 下明显掉帧；top 需要父容器设 position: relative，且仍属布局属性。
- 给歌词容器（如
<ul class="lyricsList"></ul>）设transform: translateY(0)和will-change: transform - 每次定位时只更新
style.transform = `translateY(${offset}px)`，offset 是基于当前行索引与容器可视高度计算出的像素偏移 - 行高必须固定（如
line-height: 30px），否则 offset 计算失准；配合overflow: hidden和固定容器高度使用
最容易被忽略的是宽容窗口（tolerance window）——音频解码和 JS 执行存在微小延迟，直接用 currentTime >= t && currentTime 容易漏掉过渡帧。应在判断时加入 ±50ms 缓冲，比如 <code>currentTime > t - 0.05 && currentTime ，再结合节流（<code>requestAnimationFrame 包裹）才真正稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
