HTML徽章本身不拖慢性能，真正影响的是更新方式：优先用textContent避免innerHTML解析开销；transform缩放时角标需用translate精确定位；CSS变量控制样式比JS操作style更高效；未读数须添加aria-live等语义属性。
不会。HTML徽章本身不拖慢数字角标——真正影响性能的是你如何更新它、是否触发重排重绘、以及是否在高频场景下滥用 DOM 操作。
数字角标频繁更新时，textContent 比 innerHTML 更轻量
很多同学用 innerHTML 更新角标数字（比如 el.innerHTML = '99+'），这会强制浏览器解析 HTML 字符串、重建子节点树，哪怕内容只是纯文本。尤其在通知轮询、WebSocket 实时推送等场景下，反复调用会导致 layout thrashing。
- ✅ 正确做法：优先用
textContent或innerText（后者会触发重排，慎用） - ⚠️ 注意：
textContent不解析 HTML，不执行脚本，也不触发样式计算，是纯文本赋值的最快路径 - ❌ 避免在循环里写
el.innerHTML = `<span>${count}</span>`—— 多余的标签嵌套 + 解析开销
position: absolute 角标在父容器 transform 后可能错位
当徽章放在头像、按钮等元素右上角，且父容器用了 transform: scale(0.9) 或 rotate()，绝对定位的角标不会自动跟随缩放中心偏移，导致视觉“飘走”。这不是性能问题，但会让开发者误以为是渲染卡顿。
- ✅ 解决方案：给父容器设
position: relative，角标用position: absolute; top: -4px; right: -4px; transform: translate(50%, -50%) - ⚠️ 关键点：
transform: translate()必须加，否则不同字体渲染下 baseline 差异会让角标上下跳动 - ❌ 别依赖
margin-top: -Xpx微调——它会参与文档流计算，触发重排
用 CSS 变量控制角标颜色/大小，比 JS 操作 style 属性更高效
每次用 el.style.backgroundColor = '#f00' 都是一次强制样式同步计算；而改 CSS 变量（如 el.style.setProperty('--badge-bg', '#f00')）只触发合成层更新，不触发布局。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐结构：
<span class="badge" style="--badge-count: 8; --badge-bg: #dc2626"></span>，CSS 里用background-color: var(--badge-bg) - ⚠️ 注意：CSS 变量必须定义在作用域内（比如 :root 或组件根元素），否则无效
- ❌ 避免为每个角标单独写内联 style，尤其是通过 JS 拼接字符串设置
最容易被忽略的点是：角标数字是否需要语义化。如果它是未读消息数，就得让屏幕阅读器读出来（aria-live="polite" + aria-label）；如果只是装饰性“NEW”标识，就该加 aria-hidden="true"。混淆这两类用途，后期做无障碍审计时会返工。
