防止FOUC的关键是确保样式在HTML解析阶段就位，而非干预事件队列；应内联关键CSS、避免@import和异步加载，并采用media="print"预加载后切换为all。
要防止网页出现 flash of unstyled content（fouc），关键不是“最高优先级解绑并重组 window 加载事件监听”，而是避免依赖 onload 或 domcontentloaded 后才注入样式或执行关键渲染逻辑。所谓“以最高优先级解绑并重组”本身存在误解：浏览器对事件监听器的执行顺序由注册时机和事件阶段决定，不存在运行时“提升优先级”的 api；强行移除再重绑 onload 监听器不仅无效，还可能破坏原有逻辑（如框架、统计脚本、a/b 测试工具等已注册的监听器）。
核心原则：阻断 FOUC 的源头，而非干预事件队列
FOUC 本质是浏览器在 CSS 尚未加载/解析完成时就开始渲染 HTML 内容。解决重点应放在资源加载时机与渲染阻塞控制上：
-
内联关键 CSS（Critical CSS）：将首屏必需的样式直接写入
<head>的<style>标签中，确保无需网络请求即可应用 -
避免 @import 和异步 CSS：CSS
@import会阻塞并延迟后续样式表解析；rel="preload"+onload动态插入 CSS 也易引发 FOUC，除非配合media="print"临时属性并切换 -
使用
rel="stylesheet" media="all"并确保链接位置靠前：让浏览器尽早发现并开始获取主样式表
若必须操作加载事件，应谨慎且最小化干预
某些旧项目或特殊场景下需兼容第三方脚本，可做轻量协调，但不推荐解绑他人监听器：
-
用
document.readyState替代重复监听：在<head>中立即检查，如为'loading'则监听DOMContentLoaded，否则直接执行初始化 -
用
requestIdleCallback或setTimeout(fn, 0)延后非关键逻辑：避免在 DOM 解析高峰抢占主线程，间接减少渲染抖动 -
如确需替换 onload 行为（极少见），用
window.onload = fn覆盖（注意会清除所有已有监听器），但务必先保存原函数并在新逻辑中主动调用，否则破坏依赖
现代可靠方案：利用 media 属性+JS 切换
这是目前最稳定、无侵入、兼容性好的防 FOUC 技术：
- HTML 中引入 CSS 时设
rel="stylesheet" media="print"，使其不阻塞渲染但被预加载 - 在
<head>底部或DOMContentLoaded回调中，立即执行：const link = document.querySelector('link[rel="stylesheet"][media="print"]');<br>if (link) link.media = 'all'; - 此方式让样式表提前下载，又不参与初始渲染计算，切换瞬间生效，几乎消除 FOUC
不复杂但容易忽略：FOUC 是渲染流水线问题，不是事件调度问题。与其纠结如何“抢跑” onload，不如确保样式在 HTML 解析阶段就位——这才是真正意义上的“最高优先级”。
