如何在HTML加载完成但未绘制前运行JavaScript，避免DOM替换闪烁

问题背景 #

我有一段JavaScript脚本，会将所有带有.inserter类的元素替换为从其他文件获取的HTML内容（例如横幅和导航栏）。目前使用window.onload事件触发脚本，会先渲染未修改的HTML，之后瞬间完成替换，导致出现难看的闪烁效果。我希望先完成所有DOM替换操作，再渲染最终的HTML页面，且脚本需要能够访问DOM。尝试过async、defer、DOMContentLoaded等方式，但均未生效。原本因希望脚本尽可能独立而避免用CSS隐藏body，现已找到可行方案。

可行解决方案 #

方案一：利用document.write同步生成DOM #

核心是在页面解析阶段（<head>内同步执行脚本）直接输出最终的DOM内容，跳过占位元素的渲染步骤：

<head>
  <script>
    // 同步获取外部HTML内容（仅适用于同域资源）
    function loadHtmlSync(url) {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, false);
      xhr.send();
      return xhr.status === 200 ? xhr.responseText : '';
    }

    // 预加载需要插入的组件内容
    const headerContent = loadHtmlSync('/components/header.html');
    const bannerContent = loadHtmlSync('/components/banner.html');

    // 直接写入完整的body内容，替换占位符
    document.write(`
      <body>
        ${headerContent}
        ${bannerContent}
        <!-- 原页面的其他主体内容 -->
        <main class="content">
          <!-- 页面核心内容 -->
        </main>
      </body>
    `);
  </script>
</head>

方案二：内存中构建完整DOM后替换 #

支持异步获取内容，同时保证最终DOM一次性渲染，避免闪烁：

<head>
  <script>
    (async function() {
      // 批量异步获取组件HTML
      const componentPromises = [
        fetch('/components/header.html').then(res => res.text()),
        fetch('/components/banner.html').then(res => res.text())
      ];
      const [headerHtml, bannerHtml] = await Promise.all(componentPromises);

      // 获取原始页面HTML，替换所有.inserter占位元素
      let pageHtml = document.documentElement.outerHTML;
      pageHtml = pageHtml.replace(/<div class="inserter" data-component="([^"]+)"><\/div>/g, (match, componentName) => {
        switch(componentName) {
          case 'header': return headerHtml;
          case 'banner': return bannerHtml;
          default: return match;
        }
      });

      // 在内存中创建新文档，替换当前文档实现无闪烁渲染
      const newDocument = document.implementation.createHTMLDocument();
      newDocument.documentElement.innerHTML = pageHtml;
      document.replaceChild(newDocument.documentElement, document.documentElement);
    })();
  </script>
</head>

方案优势 #

• 完全无需CSS隐藏body元素，仅依赖原生JavaScript和HTML实现
• 从根源跳过占位元素的渲染环节，彻底消除闪烁问题
• 两种方案适配不同场景：同步方案适合简单静态组件，异步方案适合多组件并行加载的复杂场景

内容的提问来源于stack exchange，提问作者Ryan Tshovu