HTML 减少 HTTP 请求优化

每个 HTTP 请求都有 DNS 查询、TCP 连接、TLS 握手开销，减少请求是性能优化基础。

内联资源

内联小 CSS

HTML

<head>
  <style>
    /* 内联关键 CSS，避免额外请求 */
    body { margin: 0; font-family: system-ui; }
    .container { max-width: 1200px; margin: 0 auto; }
  </style>
</head>

内联小 JavaScript

HTML

<!-- 内联关键脚本 -->
<script>
  document.documentElement.classList.add('js');
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
</script>

内联小图片

HTML

<!-- Base64 内联小图标 -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PC9zdmc+" alt="icon">

<!-- SVG 直接内联 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

CSS 精灵图

将多个小图标合并为一张图片，减少图片请求数。

CSS

.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

.icon-home { background-position: 0 0; width: 24px; height: 24px; }
.icon-user { background-position: -24px 0; width: 24px; height: 24px; }
.icon-cart { background-position: -48px 0; width: 24px; height: 24px; }

资源合并

CSS 合并

HTML

<!-- ❌ 多个请求 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">

<!-- ✅ 单个请求 -->
<link rel="stylesheet" href="bundle.css">

JavaScript 合并

HTML

<!-- ❌ 多个请求 -->
<script src="utils.js"></script>
<script src="components.js"></script>
<script src="app.js"></script>

<!-- ✅ 单个请求 -->
<script src="bundle.js"></script>

HTTP/2 多路复用

HTTP/2 支持单连接多请求，合并策略需调整。

HTML

<!-- HTTP/2 下可保持模块化 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">

HTTP/2 下，细粒度文件反而利于缓存，但总数仍需控制。

内联阈值建议

资源类型	建议内联大小	说明
CSS	< 14KB	关键样式优先
JavaScript	< 1KB	核心初始化代码
图片	< 4KB	小图标、占位图
SVG	优先内联	无额外请求开销

注意事项

避免内联过大资源，会增加 HTML 体积且无法缓存。

CSS 精灵图适合小图标，不适合频繁更新的场景。

HTTP/2 下过度合并反而降低缓存效率。

使用构建工具自动处理合并和内联。

要点总结

内联小资源减少请求开销
CSS 精灵图合并多个小图标
合理使用 Base64 内联小图片
HTTP/2 下平衡合并与模块化
控制内联资源体积，避免增大 HTML

📝 发现内容有误？点击此处直接编辑