本身不减少重排，但showmodal()能绕过强制同步布局链路；若误用open=true或show()，则易因手动focus()、scrollintoview()、getboundingclientrect()等触发重排。
dialog 标签本身不直接“减少重排”，但用对了能避开大量由手动实现模态层引发的强制同步布局（forced synchronous layout）和意外滚动触发——这才是重排暴增的真正源头。
为什么 show() 或 open=true 会悄悄触发重排
很多开发者以为只要不用 display: none 就安全，其实不然：dialog.open = true 或调用 show()（非 showModal()）会让 dialog 进入“打开但非模态”状态。此时浏览器不会接管焦点或遮罩，你往往得靠 JS 手动 focus()、scrollIntoView()、甚至 getBoundingClientRect() 来对齐位置——这些操作全都会强制触发同步重排。
-
show()不进模态栈，:modal不匹配，CSS 动画无法利用transform硬件加速 - 手动
focus()后浏览器自动滚动，可能让overflow: auto容器重算宽度，暴露滚动条并导致内容左移 - 若在
requestAnimationFrame外调用getComputedStyle(el).height获取尺寸再设top，就是典型同步重排陷阱
showModal() 是唯一绕过重排链路的入口
只有 showModal() 能让浏览器全程接管：焦点限制、::backdrop 插入、ESC 关闭、Tab 键环、屏幕阅读器通告——全部走原生渲染管线，不依赖 JS 查询尺寸、不触发 scrollIntoView()、不打断渲染帧。
- 它不修改
dialog的display或visibility，而是激活一个独立的模态渲染上下文 - 动画必须用
transform: scale()+will-change: transform，别碰top/left/width - 关闭时用
dialog.close()，它会异步清理 backdrop 并恢复焦点，不阻塞主线程
autofocus 在 dialog 里要防滚动扰动
autofocus 属性本身不重排，但它触发的聚焦滚动行为，在 dialog 中极易放大副作用：比如 Safari 下弹出键盘 + 滚动 + fixed 元素错位，三者叠加造成视口跳变。
- 给
dialog内容区加overflow-y: scroll（常驻滚动条），避免滚动时宽度坍缩 - 禁用
position: fixed底部按钮，改用position: sticky; bottom: 0并确保父容器有min-height: 100vh - 不要在
showModal()后立刻input.focus()；等dialog的focusin事件自然触发，或监听dialog::backdrop的animationend
最易被忽略的一点：把 dialog 放错位置比写错 CSS 更致命——它必须是 body 的直接子元素。任何嵌套（哪怕只包一层 div）都可能导致 showModal() 触发异常滚动或焦点捕获失效，而这类问题在 DevTools 里根本看不到重排标记，只能靠录屏比对视口变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
