表格滚动卡顿不能靠will-change解决，因其对表格结构无效且易致图层爆炸；应优化滚动容器wrapper并配合transform，同时精简DOM、设passive监听、使用固定宽高纯表格结构。
表格滚动卡顿不是will-change能救的
直接给<table>或<tbody>加will-change: transform不仅无效，还会让低端安卓机更卡——浏览器会为每个启用该属性的元素尝试创建独立图层，而表格结构天然嵌套深、单元格多，极易触发图层爆炸。
<td>里嵌套<div>是性能雷区
表格单元格内混用 flex 容器或额外包裹层，会显著抬高样式匹配和布局计算成本。尤其在骁龙 425 或 MT6737 这类芯片上，单个<td>里套<div>会让重排耗时翻倍。
- 删掉所有无语义的
<div>包裹，用display: contents替代（Safari 15.4+ 支持） - 避免在
<td>上设width、height或padding以外的布局属性 - 别给
<tr>或<td>设transform——表格行/单元格不参与合成流水线，will-change会被忽略
真正该优化的是滚动容器本身
如果表格被包在固定高度的<div class="table-wrapper">里并启用了overflow-y: auto，那唯一值得加will-change的地方就是这个 wrapper，且必须配合真实transform生效。
- 写法必须是：
.table-wrapper { will-change: transform; transform: translateZ(0); } - 只在用户开始拖拽或触屏滚动瞬间动态添加 class，动画/滚动结束立刻移除
- 确保 wrapper 有明确
height或max-height，否则合成层可能被降级 - 绝对不要写
will-change: scroll-position——它在 Chrome/Firefox 中基本不生效，iOS Safari 完全无视
比will-change更关键的三件事
表格滚动卡顿八成根源不在渲染层，而在主线程被同步阻塞或结构失控。
立即学习“前端免费学习笔记（深入）”；
-
scroll监听器没加{ passive: true }：移动端默认等 JS 执行完才滚动，肉眼可见延迟 -
<table>嵌套超 6 层（比如<div><div><div><table>...）：touchstart 冒泡路径过长，低端机响应延迟可达 42ms - 没设
fetchpriority="high"和decoding="async"的关键图片：一张 200KB 图就能让主线程停顿，滚动瞬间掉帧
真正治本的方案是砍 DOM 深度、设 passive、用固定宽高的纯表格结构——will-change只是最后半步微调，不是起点。
