不能直接用 watch 监控白屏时间，因为白屏是浏览器渲染、资源加载与 js 执行综合作用的结果，无响应式值变化，需主动探测而非被动监听；watch 仅适用于已声明的响应式状态，而白屏检测必须先通过定时检查 dom 节点、fp/fcp 时间戳等手段实现，再将结果写入 ref/signal 供响应式系统消费。
不能直接用 watch 监控白屏时间——它不是 Vue 的响应式数据，也不是 SolidJS 的 Signal，更不是可被依赖追踪的计算状态。白屏是浏览器渲染行为的结果，属于 DOM 生命周期 + 资源加载 + JS 执行的综合现象，必须通过可观测性手段主动探测，而非被动响应式监听。
为什么 watch 不适用？
watch 的本质是响应式依赖追踪：它只对已声明为响应式的值（如 ref、signal、store）及其派生计算生效。而白屏本身没有“值变化”事件，也没有一个变量叫 isWhiteScreen 会在白屏发生时自动更新。即使你手动设一个 const isWhite = ref(false)，watch(isWhite, ...) 也毫无意义——因为你得先有办法检测白屏，才能去改这个 ref。
换句话说：watch 是“反应器”，不是“探测器”。它解决的是“状态变了怎么响应”，而白屏监控首先要解决“状态是否变了”——这一步必须靠主动检测逻辑完成。
响应式系统能帮上什么忙？
虽然不能用 watch 直接监听白屏，但现代响应式框架（Vue/SolidJS）的底层机制，可以显著提升白屏监控的精准度与低侵入性：
-
利用框架挂载/卸载钩子：在 Vue 的
onMounted/onUnmounted或 Solid 的onMount中启动/清理白屏检测定时器，避免内存泄漏； -
绑定关键节点的响应式存在性：比如用
ref绑定根容器<div id="app">，再结合 <code>watchEffect观察其el?.children.length或el?.offsetHeight是否长期为 0 —— 这比全局轮询更轻量、更语义化； -
将白屏判定结果纳入响应式状态流：把检测函数返回的
{ status: 'white' | 'ok', duration }存入 signal/ref，后续可驱动 UI（如显示重试按钮）、触发上报、或联动错误日志模块； -
配合计算属性做智能降级判断：例如 Solid 中用
createMemo汇总多个关键元素（header、main、logo）的可见性，仅当全部不可见且持续超时才标记为白屏，减少误报。 -
探测层（非响应式，必须主动运行）：
– 在DOMContentLoaded后启动；
– 定期（如每 300ms）检查关键节点：el && el.offsetHeight > 0 && el.textContent.trim()；
– 使用performance.getEntriesByType('paint')获取 FP/FCP 真实时间戳；
– 对 SPA 应用，在路由切换后重置检测计时器。 -
响应层（利用框架能力增强）：
– 把探测结果写入ref或signal；
– 用watch或createEffect监听该状态，触发日志上报、截图（html2canvas）、或自动恢复（如刷新数据、跳转兜底页）；
– 将白屏耗时作为自定义指标，通过performance.mark()+measure()上报到监控平台。
真正可行的白屏监控落地方式
结合响应式能力，推荐采用“探测 + 响应”双层结构：
一个 SolidJS 示例片段
（体现响应式系统如何赋能，而非替代探测逻辑）
const [whiteScreen, setWhiteScreen] = createSignal({ active: false, duration: 0 });
// 探测函数（需自行实现，此处略）
const startWhiteScreenCheck = () => {
const timer = setInterval(() => {
if (isCriticalElementMissing()) {
const elapsed = Date.now() - startTime;
if (elapsed > 3000) setWhiteScreen({ active: true, duration: elapsed });
} else {
setWhiteScreen({ active: false, duration: 0 });
clearInterval(timer);
}
}, 300);
};
<p>// 响应式副作用：白屏即上报
createEffect(() => {
const ws = whiteScreen();
if (ws.active) {
reportToMonitor({ type: 'blank_screen', duration: ws.duration });
takeScreenshot(); // 可选
}
});</p><p>onMount(startWhiteScreenCheck);
</p>
