减少http请求次数是前端性能优化最直接有效的手段，通过合并js/css、css sprites、api批量请求及内联关键小资源等方式降低请求开销，尤其提升弱网和移动端体验。
减少 HTTP 请求次数是 JavaScript 前端性能优化中最直接有效的手段之一。核心逻辑在于：每个请求都携带 DNS 查询、TCP 握手、TLS 协商（HTTPS）、HTTP 头传输等固定开销，哪怕资源很小，这些“启动成本”也几乎不变。请求越少，整体加载延迟越低，尤其在弱网或移动端效果显著。
合并 JS/CSS 资源文件
把多个小脚本或样式表打包成一个文件，是最常用且见效快的方式。比如原来引入 8 个 .js 文件，现在只请求 1 个 bundle，请求次数从 8 降到 1。
- 用 Webpack、Vite 或 Rollup 等构建工具自动完成，配置 splitChunks 或 output.chunkFilename 即可实现智能合并与分包
- 手动合并适合简单项目，但要注意顺序：依赖关系必须保持，否则运行时报错
- 单个文件不宜过大（建议 ≤200KB），否则首屏渲染会卡顿；可结合动态 import 实现按需加载，平衡“合并”与“缓存粒度”
使用 CSS Sprites（雪碧图）管理图标类图片
对大量小图标（如导航栏按钮、状态 icon），不为每个图发一次请求，而是拼成一张大图，再用 background-position 定位显示。
- 适用于尺寸固定、变化少的装饰性图片，比如按钮图标、评分星星、社交平台 logo
- 现代项目中可用 SVG Sprite 替代 PNG Sprites，体积更小、缩放无损，且支持内联和 symbol 引用
- 注意维护成本：新增图标需重新生成雪碧图，建议配合自动化工具（如 svg-sprite-loader）
接口请求合并（API Batch）
前端调用后端接口时，避免“一个 ID 一次请求”，改用批量接口统一拉取数据。例如用户列表页，不要循环调用 /user/1、/user/2…，而应调用 /users?ids=1,2,3,4...。
- 在 Vue/React 中可封装 requestBatch 工具函数，收集几毫秒内的同类请求，合并参数后发出单次请求
- 配合防抖或队列机制，防止等待过久影响交互响应；典型延迟阈值设为 10–50ms
- 服务端需提供对应批量接口，或用 GraphQL 的字段聚合能力天然支持多资源一次获取
内联关键小资源
极小的 JS 或 CSS（如首屏样式、初始化逻辑），直接写进 HTML 的 <script></script> 或 <style></style> 标签里，彻底省去一次 HTTP 请求。
- 适合体积
- 注意内联脚本无法被浏览器缓存，频繁变更的内容不适合内联
- HTML 中可使用
<script type="module"></script>+defer控制执行时机，避免阻塞渲染
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
