节流是表格列宽拖动中防止布局抖动和性能崩溃的必要手段，因mousemove高频触发会导致频繁样式计算、布局和重绘，需用requestAnimationFrame+状态缓存实现精准节流，并配合table-layout:fixed等CSS优化。
节流（throttle）在表格列宽拖动中不是“可选优化”，而是防止布局抖动和性能崩溃的必要手段。鼠标 mousemove 每秒触发几十甚至上百次，若每次都直接计算、重设列宽、触发布局（layout）或重绘（paint），会导致卡顿、文字闪烁、甚至浏览器无响应——尤其在低配设备或复杂表格中。
为什么必须节流？关键瓶颈在哪
拖动过程中频繁修改 th.style.width 或 <col>.width 会强制浏览器反复执行：
- 样式计算（Style recalculation）
- 布局（Layout / Reflow），尤其是 table-layout: fixed 下仍需重算列约束
- 绘制（Paint），特别是含 border、阴影、渐变等视觉效果时
这些操作是同步且高开销的。不加节流，mousemove 的调用密度远超渲染帧率（60fps ≈ 16.7ms/帧），大量无效中间状态被计算却未显示，纯属浪费。
推荐节流实现：requestAnimationFrame + 状态缓存
比定时器节流（如 setTimeout）更精准、更符合渲染周期。核心思路是：只在下一帧开始前更新一次宽度，丢弃中间所有 mousemove 值。
立即学习“Java免费学习笔记（深入）”；
示例代码（原生 JS，兼容现代浏览器）：
let isResizing = false;
let targetTH = null;
let startX = 0;
let startWidth = 0;
let rafId = null;
<p>function onResize(e) {
if (!isResizing || !targetTH) return;
const delta = e.pageX - startX;
const newWidth = Math.max(60, startWidth + delta); // 最小宽度保护
targetTH.style.width = newWidth + 'px';
}</p><p>function throttleResize(e) {
if (rafId !== null) cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(() => onResize(e));
}</p><p>table.addEventListener('mousedown', e => {
if (e.target.tagName === 'TH' && e.offsetX > e.target.offsetWidth - 8) {
isResizing = true;
targetTH = e.target;
startX = e.pageX;
startWidth = parseInt(getComputedStyle(targetTH).width) || targetTH.offsetWidth;
document.addEventListener('mousemove', throttleResize);
document.addEventListener('mouseup', stopResize);
}
});</p><p>function stopResize() {
isResizing = false;
targetTH = null;
if (rafId !== null) {
cancelAnimationFrame(rafId);
rafId = null;
}
document.removeEventListener('mousemove', throttleResize);
document.removeEventListener('mouseup', stopResize);
}
配合 CSS 避免隐式重排的细节
光靠 JS 节流还不够，CSS 层也要配合减少重排压力：
- 给
table设置table-layout: fixed，让列宽由th或<col>显式控制，避免内容撑开导致整表重算 - 确保
th使用width（而非min-width或flex）并设box-sizing: border-box - 禁用过渡动画：
th { transition: none !important; }，防止 width 变化触发 CSS 动画重绘 - 拖动时临时添加
cursor: col-resize，提升反馈感，不依赖布局计算
进阶：保存与恢复列宽状态
节流解决的是“拖动中”的性能问题；而用户离开后列宽丢失，体验仍不完整。建议在 stopResize 中持久化当前宽度：
- 存入
localStorage，键名按表格 ID 或 URL 路径生成 - 页面加载时读取并批量应用，避免逐个设置引发多次 layout
- 对宽度数组做防抖写入（例如延迟 300ms 再存），避免快速连续调整写入过多
