dialog动画卡顿本质是重排+重绘被反复触发；直接用display:none/block切换会强制浏览器重跑layout→paint流程，应改用opacity+transform组合控制显隐，并避免滥用will-change和读取布局属性。
dialog动画卡顿，本质是重排+重绘被反复触发
直接用 display: none / display: block 控制 <dialog> 显隐，是卡顿最常见原因。浏览器每次切换都会清空该元素的布局缓存，强制重跑 layout → paint 流程，尤其在快速连续打开/关闭时，帧时间很容易突破 16ms。
真实场景中，你可能看到：第一次打开慢、第二次更慢、第三次直接掉帧；或者滚动页面时 dialog 弹出瞬间画面“抖一下”——这基本就是 forced layout 在作祟。
- 永远不要对
<dialog>元素本身写transition: display（它根本无效） - 避免在
open/close事件回调里读取getBoundingClientRect()或offsetHeight - 如果用了
showModal()，确保调用前没在主线程执行大数组排序或 DOM 遍历
用 opacity + transform 替代 display 切换
<dialog> 默认是 display: none，但你可以把它“固定在线上”，只控制视觉状态。关键不是隐藏，而是让它持续参与合成层管理。
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.dialog-fade {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
<p>.dialog-fade[open] {
opacity: 1;
transform: scale(1);
}</p><p>/<em> 必须加这行，否则 Safari 不升层 </em>/
.dialog-fade[open] {
will-change: transform, opacity;
}
- 把
<dialog class="dialog-fade">写死在 HTML 中，初始不加open属性 - JS 中用
dialog.showModal()触发后，再立即加open属性（或用toggleAttribute('open')） - 关闭时先移除
open，等 transition 结束后再调用dialog.close()，防止状态残留
避免 will-change 滥用和合成层污染
will-change: transform 看似万能，但在 <dialog> 上滥用反而拖慢性能。浏览器会为它单独建一个合成层，如果父容器有 overflow: hidden、transform 或 filter，这个层可能被截断或降级回 CPU 渲染。
检查方式：Chrome DevTools → Layers 面板，搜索 dialog 元素，确认它是否真在独立图层中；若旁边标着 “Composited due to will-change”，但帧时间仍高，说明升层失败。
- 只在
dialog.showModal()调用前一刻设置will-change，关闭后立刻清除：el.style.willChange = 'auto' - 不要给
<dialog>的子元素（如按钮、表单）也加will-change，它们会继承或干扰主层 - 禁用
backdrop-filter或半透明background，这些会让 backdrop 层也参与合成，显著增加 GPU 压力
移动端 Safari 的特殊坑：伪元素 + rotate 动画掉帧
如果你在 dialog 里用 ::after 画了一个旋转 loading spinner，iOS 15+ WebKit 很可能把它当软件渲染处理——哪怕你写了 transform: rotate(360deg)，只要没声明起始帧 rotate(0deg)，就会降级。
更隐蔽的是：Safari 对伪元素的 animation-timing-function: steps() 支持极差，一用就卡。
- 改用内联
<svg>或<canvas>实现旋转效果，手动用requestAnimationFrame控制角度 - 若坚持用 CSS，必须写全 keyframes，并显式定义
0%, 100%帧，且避开steps() - 别让 spinner 父容器设
contain: strict—— 它会隔离合成上下文，导致子元素无法升层
真正决定流畅度的，从来不是“用了多少优化技巧”，而是能否让每一帧都稳定落在 16ms 内。对 <dialog> 来说，最关键的三件事：不碰 display、不读布局属性、不在动画帧里做 DOM 查询——其他都是锦上添花。
