直接替换innerHTML会丢失高亮状态，因老节点被销毁；应局部更新className或style，结合dataset精准匹配、CSS变量解耦样式，并避免layout thrashing。
用 innerHTML 直接替换内容会丢失高亮状态
很多人一上来就写 container.innerHTML = newHtml，数据是刷进去了，但之前加的 class="highlight" 或内联样式全被清空。这不是“动态高亮”，只是“动态刷新”。真正的高亮需要保留或精准控制 DOM 节点的状态。
常见错误现象：
– 上一秒某条数据变红，下一秒又恢复默认颜色
– 高亮闪烁、跳动，甚至错位到其他行
– 用 setTimeout 模拟更新时，高亮只闪一下就消失
- 根本原因：每次重写
innerHTML都等于把整个容器 innerHTML 字符串重新解析成新 DOM，老节点全部销毁 - 正确思路：只更新需要变的部分，比如仅修改特定
<div> 的 <code>className或style.color - 如果必须批量更新，优先用
document.createElement+replaceChild或textContent+ 局部 class 切换，而非整段 HTML 字符串拼接 - 渲染时给每个数据项元素加上
data-id="order-123"和data-value="105"等语义化属性 - 更新数据时，先用
document.querySelectorAll('[data-id]')拿到所有项，再遍历比对el.dataset.id是否在新数据列表中 - 对匹配上的元素，用
parseInt(el.dataset.value) > 100判断是否要加highlightclass；不匹配的可留着、隐藏或移除 - 避免用
getElementsByClassName，它返回的是实时集合，容易在循环中出错
dataset + querySelectorAll 实现按条件精准高亮
假设你有一组实时数据，每条带唯一标识（如 id 或业务 key），且你想对“数值 > 100”的项加红色边框。这时候靠字符串匹配或索引下标都不可靠——顺序可能变、重复值可能干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
用 CSS 变量 + style.setProperty 控制高亮样式更灵活
硬编码 element.className = 'alert' 在多主题、多状态（警告/成功/异常）场景下很快失控。CSS 变量能让你把“高亮逻辑”和“样式表现”解耦。
示例结构：
:root {
--highlight-color: #ff3b30;
--highlight-bg: rgba(255, 59, 48, 0.1);
}
.item.highlight {
color: var(--highlight-color);
background: var(--highlight-bg);
}
JS 中只需：
itemEl.classList.toggle('highlight', value > 100);
// 或直接操作变量（适合更细粒度控制）
itemEl.style.setProperty('--highlight-color', isUrgent ? '#ff9500' : '#34c759');
- 好处：不用维护一堆 class 名，主题切换时只需改 :root 变量
- 注意：CSS 变量不能直接用于 transition，如需平滑变色，得用
color+transition: color 0.2s - 性能影响小，
style.setProperty比反复切 class 更轻量，尤其在高频更新（如每 500ms）时
高频更新下避免 layout thrashing 的关键点
如果你的数据每秒更新多次（比如监控大盘），每次高亮都触发重排重绘，页面会卡顿。浏览器不是万能的，它不会自动合并 style 修改。
- 别在循环里连续读写
offsetHeight、getBoundingClientRect()—— 这会强制同步计算布局 - 把所有 DOM 写操作（
classList.toggle、style.color）集中做，读操作（dataset.value）先批量取完 - 用
requestAnimationFrame批量提交变更，而不是在fetch回调里立刻改 DOM - 真要极致性能，考虑用
DocumentFragment构建离屏节点，最后一次性appendChild，但高亮一般不需要这一步
最常被忽略的是：高亮本身不是目的，它是信号。真正该花精力判断的，是“什么条件下才算值得高亮”——比如连续 3 次超阈值才标红，而不是每次波动都跳。这个业务逻辑漏了，前端再炫的动画也没意义。
