表格滚动卡顿不能靠will-change解决，因其对表格结构无效且易致图层爆炸；应优化滚动容器wrapper并配合transform，同时精简DOM、设passive监听、使用固定宽高纯表格结构。

表格滚动卡顿不是will-change能救的

直接给

或加will-change: transform不仅无效，还会让低端安卓机更卡——浏览器会为每个启用该属性的元素尝试创建独立图层，而表格结构天然嵌套深、单元格多，极易触发图层爆炸。

或

里嵌套

是性能雷区

表格单元格内混用 flex 容器或额外包裹层，会显著抬高样式匹配和布局计算成本。尤其在骁龙 425 或 MT6737 这类芯片上，单个

里套

会让重排耗时翻倍。

• 删掉所有无语义的
  包裹，用display: contents替代（Safari 15.4+ 支持）
• 避免在

上设width、height或padding以外的布局属性

别给

设transform——表格行/单元格不参与合成流水线，will-change会被忽略

真正该优化的是滚动容器本身

如果表格被包在固定高度的

里并启用了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 执行完才滚动，肉眼可见延迟
• 嵌套超 6 层（比如
  ...）：touchstart 冒泡路径过长，低端机响应延迟可达 42ms
• 没设fetchpriority="high"和decoding="async"的关键图片：一张 200KB 图就能让主线程停顿，滚动瞬间掉帧

真正治本的方案是砍 DOM 深度、设 passive、用固定宽高的纯表格结构——will-change只是最后半步微调，不是起点。


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载