will-change是CSS属性，需在样式表或style中设置，仅对transform、opacity等可合成属性有效，须由JS动态启停并配合transform使用，否则反而降低性能。
页面动效要真正流畅，不能只靠 transition 或 transform 写得漂亮，关键还得让浏览器“提前知道”哪些元素要动、怎么动。will-change 就是这个“预告机制”，但它不是写在 HTML 标签里的属性，也不能随便乱加——用对了能明显提升动画顺滑度，用错了反而拖慢页面。
必须用 CSS 设置，且只对特定属性生效
will-change 是纯 CSS 属性，写在 HTML 的 style 或样式表里才有效。比如：
-
✅ 正确：
.slide-item { will-change: transform, opacity; } -
❌ 无效：
它只对浏览器能“合成”的属性起作用：最常用的是 transform 和 opacity；scroll-position 有严格限制，不推荐用于 body 或全屏滚动容器；而 left、top、width、background-color 这类会触发重排/重绘的属性，加了 will-change 也没用。
只在动画前动态启用，用完立刻清理
把 will-change 写死在 CSS 规则里（如所有 .card 都带 will-change: transform），等于长期占用 GPU 图层，内存涨、滚动卡、低端机易闪退。真实场景应由 JavaScript 精确控制生命周期：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 动画开始前 1–2 帧设置：
element.style.willChange = 'transform' - 监听
transitionend或animationend，结束后立即设回：element.style.willChange = 'auto' - 对列表或轮播等批量元素，优先只给当前可视区域内的项启用
配合 transform 才真正起效
will-change 不是加速器，而是“图层预分配指令”。它本身不省 CPU，反而增加 GPU 内存开销。只有当动效本身已基于 transform（如 translateX、scale）或 opacity 实现时，加上 will-change 才可能触发图层提升。例如：
- 用
transform: translateY(-100%)切换页面，比用top: -100vh高效得多 - 动效中避免读取
offsetTop、getBoundingClientRect()等触发同步回流的 DOM 操作 - 滚动区域内的视差项、滑入弹层、tab 切换面板，都是典型适用场景
验证是否真生效，别靠感觉
加了 will-change 不代表优化成功。打开 Chrome DevTools → More Tools → Layers 面板，手动触发动画，观察目标元素是否出现在图层列表中，且 Reason 字段显示 layer-for-transform 或 layer-for-opacity。如果只显示 will-change，说明提示收到了，但浏览器并未实际升层。再勾选 Rendering 面板的 «Paint flashing»，满屏绿色闪烁就是滥用信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
