表格中嵌入进度条需用双div嵌套：外层td设固定高和overflow:hidden，内层div用width百分比控制填充；JS批量更新应使用requestAnimationFrame并预计算值；CSS transition需配合JS插值动画才能平滑；对比型进度条须用flex布局双容器独立计算宽度。
表格单元格里怎么塞进度条
直接往 <td> 里写 <progress> 不行——它会被表格盒模型挤压变形，且 IE 完全不渲染。必须用双 <div> 嵌套：外层 <td> 作为容器，内层 <div> 用 style.width 控制填充比例。
- 外层
<td>设固定高度（如height: 24px）和overflow: hidden，防止内层溢出 - 内层
<div>必须设height: 100%、background和明确的初始width: 0% - 别用
max-width替代width，它不触发过渡动画，视觉上会“啪”一下跳到目标值 - 百分比单位（
%）比像素更安全，避免因表格列宽动态变化导致计算错乱
JS 更新表格中多个进度条时怎么避免卡顿
遍历所有 <td> 并逐个改 style.width 是常见错误——DOM 批量读写会强制同步重排，尤其在 20+ 行表格里明显掉帧。
- 用
requestAnimationFrame批量更新，而不是setTimeout或setInterval：前者帧率锁定在 60fps，后者可能累积延迟或跳帧 - 所有进度值提前算好（比如从 API 返回的数组里映射出百分比），不要在每一帧里重新调用
getComputedStyle读取当前宽度 - 对每个进度条单独做边界校验：
Math.min(Math.max(0, percent), 100)，防止负数或超 100% 导致布局撑破表格 - 若数据来自异步请求，确保 DOM 就绪后再操作：监听
DOMContentLoaded，或把脚本放在</body>前
为什么不能只靠 CSS transition 实现平滑动画
单纯给内层 <div> 加 transition: width 0.3s 只能应付“静态设定”，一旦 JS 多次快速修改 style.width（比如 API 连续推送进度），浏览器来不及完成上一帧过渡就会被新值覆盖，结果就是卡顿或跳变。
- 必须配合 JS 动画逻辑：起始值、目标值、插值函数三者缺一不可
- 推荐线性插值：
current = start + (end - start) * t，其中t是归一化时间（0→1） - 避免用
transform: scaleX()——虽然硬件加速，但 Safari 对scaleX(0)渲染有偶发闪烁，且文字居中需额外调整transform-origin - 过渡只写
width，禁用all或background-color，否则轻微抖动都会触发重绘
对比型进度条（比如完成值 vs 目标值）怎么并排显示
<progress> 标签天生不支持双轨，表格里要并排展示两个数值（如「72/100」或「A组 65% vs B组 82%」），就得用两个同宽容器各自控制 width。
立即学习“前端免费学习笔记（深入）”；
- 结构上用两个并排
<div>，父容器设display: flex，子容器flex: 1确保等宽 - 各自独立计算百分比：
A_width = Math.round(a / max * 100)，B_width = Math.round(b / max * 100)，别共用一个最大值变量后硬除 - 千万别在一个容器里放两色块（比如红+蓝），盒模型误差可能导致总宽超过 100%，造成换行或溢出
- 文字标注建议用绝对定位覆盖在进度条上方，避免随宽度变化导致位置漂移
真实场景里最麻烦的不是画出来，而是当表格滚动、列宽自适应、或用户缩放页面时，内层 width 的百分比计算是否还稳定——这需要你在 JS 中监听 resize 并重算，但别忘了防抖。
