遮罩层必须用 position: fixed，因其能脱离文档流并锚定视口，滚动不偏移；absolute 易受 transform 等影响错位，relative/static 无法覆盖全屏；需设 top:0、left:0、width:100vw、height:100vh，配合 html/body height:100% 及 body 顶层挂载。
遮罩层为什么必须用 position: fixed？
因为只有 position: fixed 能让元素脱离文档流、锚定视口，滚动时也不偏移。用 absolute 会相对最近定位祖先，一旦表格或弹窗容器加了 transform，遮罩就错位；用 relative 或默认 static 更是只占内容空间，一滚就露底。
必须同时设：top: 0、left: 0、width: 100vw、height: 100vh——别用 100%，它依赖父容器高度，在 body 没撑满时直接失效；vw/vh 才真正对应视口尺寸，兼容 Safari 对「视口」的严格定义。
-
html和body需显式设height: 100%，否则某些 iOS Safari 版本里100vh计算异常 - 如果页面有
overflow: hidden的祖先容器，fixed元素可能被裁剪，此时要检查并移除该限制 - 遮罩必须挂到
document.body最顶层，不能嵌套在任何组件容器内，避免祖先触发新 stacking context 导致z-index失效
display: flex 居中比 transform: translate(-50%, -50%) 更稳？
是的。transform 居中依赖 top: 50%; left: 50%，但遇到高 DPI 屏幕、缩放、或 iOS 键盘弹出导致视口重算时，容易轻微偏移；而 display: flex; justify-content: center; align-items: center 是浏览器原生居中逻辑，不依赖像素计算，对未知尺寸子元素（比如动态加载的图标）也精准可靠。
关键点在于：flex 容器本身必须是 fixed 全屏，且子元素不能设 width: 100% 或 height: 100%，否则在 flex 里会被拉伸变形；固定尺寸 + margin: auto 反而更稳。
- 别给加载图标设
width: 100%; height: 100%，它会撑满整个遮罩区域 - 背景遮罩用
background-color: rgba(0, 0, 0, 0.5)，别用opacity——后者会让内部图标也变透明 - 遮罩层本身设
pointer-events: none，再给内部图标设pointer-events: auto，否则加「取消」按钮时会失灵
动画怎么写才不卡、不闪、不掉帧？
动画必须预定义在 的 <style></style> 里，不能靠 JS 动态注入 @keyframes，Safari 对动态声明支持不稳定，首次加载可能卡顿或不转。只对 opacity 和 transform 做动画，这两项走 GPU 合成，不触发布局（Layout）和绘制（Paint）。
示例：@keyframes loader-fade-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }，配合 animation: loader-fade-in 0.3s ease-out forwards。
- 禁用
display: none/block切换，会导致重排；用opacity+visibility: hidden/visible更轻量 - 别在动画里改
width、height、margin等触发布局的属性 - 移动端加
touch-action: none，防止 Safari 橡皮筋拖拽干扰遮罩体验
隐藏时机为什么不能只靠 window.onload？
window.onload 等的是所有资源（图片、字体、iframe）加载完，但用户感知的「页面可用」往往更早——比如 DOM 就绪、首屏内容渲染完成即可交互。纯靠它，遮罩会挂太久；但只监听 DOMContentLoaded 又太早，字体没加载完可能 FOUC（Flash of Unstyled Content）。
稳妥做法是双保险：window.onload 为主，再加一个 8 秒超时兜底。AJAX 场景下，必须在 fetch().finally() 里隐藏，不是只在 then 或 catch 中——失败、超时也要收掉遮罩，否则用户以为卡死了。
- 维护一个
isLoaderActive标志位，防重复showLoader()导致状态混乱 - 隐藏操作别直接删 DOM，先加退出动画 class，监听
animationend再移除节点 - 如果页面用了 Web Font，建议配合
document.fonts.load()判断字体就绪后再隐藏，避免文字跳变
实际最难的不是写几行 CSS，而是让遮罩在各种路径下都稳：首屏加载、表格重绘、ECharts 刷新、路由跳转……所有显隐逻辑必须统一走 showLoading()/hideLoading()，且状态可预测、可调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
