应使用 window.addEventListener('load', ...) 移除遮罩层，因 load 等待所有资源（含图片、字体）加载完成，而 DOMContentLoaded 仅等待 HTML 解析完毕；同时需配合 pointer-events: none、visibility 替代 display、will-change 或 translateZ(0) 优化动画，并注意 Safari 兼容性与过渡时长合理设置。
页面加载时遮罩层不消失？检查 DOMContentLoaded 和 load 的触发时机
很多遮罩层在资源没加载完就消失了，图片/字体闪一下才正常，问题出在监听了错误的事件。浏览器解析完 HTML 就会触发 DOMContentLoaded，但此时图片、CSS 中的 @font-face、外部样式表可能还没加载完；而 load 会等所有资源（包括图片、iframe）都就绪才触发，更稳妥。
- 用
window.addEventListener('load', ...)移除遮罩，而不是DOMContentLoaded - 如果遮罩依赖某个关键 CSS 动画（比如
fade-out），确保该 CSS 已内联或提前加载，避免 FOUC（无样式内容闪烁） - 服务端渲染（SSR）场景下，
load仍可靠；但若用了document.write或动态插入脚本，可能干扰事件顺序
opacity + transition 失效？确认遮罩层未被强制重绘或层级中断
遮罩层设置了 opacity: 0 和 transition: opacity 0.4s ease，但动画卡顿或直接跳变，大概率是浏览器跳过了合成层优化，或者被其他样式打断了过渡链。
- 给遮罩层加
will-change: opacity或transform: translateZ(0)，强制创建独立合成层 - 避免在动画过程中同时修改
display（如从none切到block），这会中断 transition；改用visibility: hidden/visible配合opacity - 检查父容器是否有
overflow: hidden或clip-path，可能裁剪掉过渡过程中的半透明帧
遮罩层挡住点击？pointer-events: none 不是万能解
加载完成后想让页面立即可交互，但遮罩层即使 opacity: 0 仍拦截点击——因为默认 pointer-events 是 auto，透明不等于不可点。
- 动画结束瞬间必须同步设置
pointer-events: none，不能只靠opacity: 0 - 推荐写法：先用
transition改opacity，再在transitionend回调里设pointer-events: none和display: none（后者释放布局空间） - 注意：若遮罩层内有子元素设置了
pointer-events: auto，会覆盖父级设置，务必清空
兼容旧版 Safari？transition 和 will-change 要加前缀
Safari 13.1 之前对 will-change 支持不稳定，且部分老版本需要 -webkit-transition 才能触发硬件加速。
立即学习“前端免费学习笔记（深入）”；
- CSS 中写全：
transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; -
will-change在 Safari 上容易引发渲染异常，生产环境建议仅在必要时启用，并配合transform: translateZ(0)降级 - 测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Paint Rectangles”，看遮罩层是否每帧重绘（说明未进合成层）
最易被忽略的是：动画时间设太短（比如 0.1s），人眼根本感知不到过渡，反而显得“闪退”；设太长（如 1.2s）又拖慢首屏可交互时间。0.3–0.5s 是多数场景的平衡点。
