通过在 <head> 中动态插入隐藏 body 的样式，并在所有 JavaScript 替换逻辑执行完毕后再移除该样式，可确保用户始终看到最终渲染结果，彻底消除“先显示原始 HTML、再闪替内容”的视觉缺陷。
通过在 `
` 中动态插入隐藏 `body` 的样式，并在所有 javascript 替换逻辑执行完毕后再移除该样式，可确保用户始终看到最终渲染结果，彻底消除“先显示原始 html、再闪替内容”的视觉缺陷。在现代 Web 开发中，常需在页面加载时动态注入内容（如导航栏、广告横幅等），但若使用 window.onload 或 DOMContentLoaded，浏览器通常会先绘制未修改的原始 HTML，再执行 JS 替换——造成明显的“闪烁”（FOUC, Flash of Unstyled Content）。虽然 DOMContentLoaded 触发早于 window.onload，但它仍发生在浏览器已开始构建渲染树之后，无法真正阻止首次绘制。
核心思路：阻断初始渲染，而非等待时机
浏览器渲染流程中，<body> 的首次绘制发生在 HTML 解析完成、CSSOM 构建就绪后。因此，最可靠的方式是在解析早期即阻止 <body> 可见，待所有 DOM 操作完成后才解除限制。关键在于：该策略必须完全自包含，不依赖外部 CSS 文件或手动维护的样式规则。
以下为推荐的纯 Vanilla JS 实现方案：
<head>
<script>
// 1. 立即注入隐藏 body 的内联样式（无 defer，确保最早执行）
const style = document.createElement('style');
style.id = 'inserter-screen-flash-prevention';
style.textContent = 'body { display: none !important; }';
document.head.appendChild(style);
// 2. 等待资源加载与 DOM 就绪（推荐使用 window.onload，确保图片/iframe 等也加载完成）
window.onload = () => {
insertAll().then(() => {
// 3. 所有异步操作完成后，移除隐藏样式
document.getElementById('inserter-screen-flash-prevention')?.remove();
});
};
function insertAll() {
return Promise.all(
Array.from(document.querySelectorAll('.inserter')).map(el => {
const url = el.dataset.src || '/default-banner.html';
return fetch(url)
.then(res => res.text())
.then(html => {
el.outerHTML = html; // 替换整个元素
})
.catch(err => {
console.warn(`Failed to load ${url}:`, err);
el.remove(); // 加载失败时移除占位符
});
})
);
}
</script>
</head>✅ 优势说明：
- 零外部依赖：所有逻辑封装在 <head> 的 <script> 中，无需预置 CSS 类或额外 HTML 属性；
- 强兼容性：支持所有现代浏览器及 IE11+；
- 精准控制：window.onload 确保图片、iframe 等关键资源加载完毕后再渲染，避免因异步内容缺失导致布局跳动；
- 错误防御：fetch 失败时自动清理占位符，提升健壮性。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 document.head.innerHTML += ...（会重写整个 <head>，可能破坏已有 <meta>、<link> 等）；应使用 appendChild() 安全插入；
- 若页面含大量 .inserter 元素，建议添加加载状态提示（如 skeleton placeholder），提升用户体验；
- 移除样式前务必确认所有替换已完成（推荐用 Promise.all 统一等待），否则可能提前显示未完成页面。
此方案本质是“渲染门控”（Render Gate）模式：用最小代价拦截初始绘制，将控制权完全交还给 JS 逻辑，兼顾性能、可维护性与用户体验。
