HTML文件引入加载延迟求助：页面刷新/跳转需2-3秒加载资源

问题核心 #

通过include-html属性实现HTML片段（含CSS资源）动态引入时，功能正常但存在2-3秒加载延迟：页面启动、刷新或跳转时，引入的CSS、Bootstrap资源需延迟加载完成，重载页面可复现该问题。

原因分析 #

1. 串行加载逻辑：现有include.js每找到一个带include-html的元素就发送请求并立即返回，导致多个引入文件只能串行加载，总加载时间为各文件请求时间之和，无法并行缩短耗时。
2. CSS渲染阻塞延迟：关键样式资源（Bootstrap、自定义CSS）通过JS动态插入，浏览器需等待JS执行完成后才会解析这些资源，期间页面处于无样式状态。
3. 冗余递归调用：每次请求完成后递归调用includeHTML()，增加了不必要的执行开销。

解决方案 #

方案1：重构include.js为并行加载逻辑 #

修改include.js，一次性收集所有待引入元素，并行发送请求，避免串行等待：

function includeHTML() {
  const elements = document.querySelectorAll("[include-html]");
  if (!elements.length) return;

  elements.forEach(elmnt => {
    const file = elmnt.getAttribute("include-html");
    if (!file) return;

    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          elmnt.innerHTML = this.responseText;
        } else if (this.status === 404) {
          elmnt.innerHTML = "页面未找到。";
        }
        elmnt.removeAttribute("include-html");
      }
    };
    xhttp.open("GET", file, true);
    xhttp.send();
  });
}

方案2：将关键CSS资源提前至主HTML头部 #

把links.html中的CSS资源直接放到主页面<head>中，避免JS动态加载导致的渲染阻塞：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 直接引入关键资源，移除动态include逻辑 -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Document</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
    
    <script src="js/include.js"></script>
</head>
<body>
    <!-- 保留navbar和footer的动态引入 -->
    <div include-html="include/navbar.html"></div>
    <h2 class="p-5">文件已成功引入，但无法立即加载，CSS和Bootstrap文件需2-3秒才能加载完成。</h2>
    <h4 class="p-5">可重载页面查看该问题<br>请帮忙排查。</h4>
    <div include-html="include/footer.html"></div>
    
    <script>
        includeHTML();
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>
</body>
</html>

同时删除主页面中<meta include-html="include/links.html">这一行。

方案3：预加载关键动态资源 #

通过preload提前告知浏览器加载待引入的HTML片段，减少后续请求延迟：

<head>
    <!-- 预加载navbar和footer资源 -->
    <link rel="preload" href="include/navbar.html" as="fetch">
    <link rel="preload" href="include/footer.html" as="fetch">
    
    <!-- 其他头部内容 -->
</head>

额外优化建议 #

• 合并小型CSS/JS文件，减少HTTP请求数量。
• 对静态资源配置浏览器缓存规则，降低重复请求的加载耗时。
• 确保第三方CDN资源（如Bootstrap）使用就近节点的资源链接。

内容的提问来源于stack exchange，提问作者Akash K