如何减少网站页面的HTTP请求数量？

合并文件

• 合并 CSS 和 JavaScript 文件：将多个 CSS 文件合并成一个 CSS 文件，多个 JavaScript 文件合并成一个 JavaScript 文件。这样浏览器只需发送一次请求获取合并后的文件，而不是多次请求不同的文件。在构建项目时，可以使用工具如 Webpack、Gulp 等，它们提供了文件合并和压缩的功能，能够方便地实现这一优化。
• 图片合并（雪碧图）：将多个小图标或图片合并成一张大的雪碧图（Sprite），然后通过 CSS 的背景定位技术来显示需要的部分。这样可以减少图片的 HTTP 请求数量，提高页面加载速度。有一些在线工具如 SpritePad、CSS Sprite Generator 等可以帮助生成雪碧图和相应的 CSS 代码。

利用缓存

• 浏览器缓存：设置合理的缓存策略，让浏览器缓存静态资源。通过在服务器端设置 HTTP 响应头中的缓存相关字段，如 Cache-Control、Expires 等，告诉浏览器哪些资源可以缓存，以及缓存的时长。这样用户再次访问网站时，对于未过期的资源，浏览器会直接从本地缓存中获取，而无需再次发送 HTTP 请求。
• CDN 缓存：内容分发网络（CDN）会在离用户较近的节点缓存网站的静态资源。当用户请求这些资源时，会从距离最近的 CDN 节点获取，减少了向源服务器发送请求的次数。将网站的图片、CSS、JavaScript 等静态资源部署到 CDN 上，可以有效减少 HTTP 请求数量和加载时间。

采用懒加载和异步加载

• 懒加载：对于页面中在初始加载时不可见的内容，如图片、视频、iframe 等，采用懒加载技术。当这些元素进入浏览器的可视区域时，再触发加载操作，而不是在页面加载时就全部请求。这样可以减少页面初始加载时的 HTTP 请求数量，加快页面的首次渲染速度。在 JavaScript 中有一些成熟的懒加载库，如 LazyLoad、Intersection Observer API 等可以实现这一功能。
• 异步加载：对于一些非关键的脚本，采用异步加载的方式。通过在 script 标签中添加 async 或 defer 属性，让脚本在后台加载和执行，不阻塞页面的渲染和其他资源的加载。async 属性会使脚本在下载完成后立即执行，而 defer 属性会使脚本在 HTML 文档解析完成后再执行。

优化 HTML 结构

• 减少不必要的标签和嵌套：精简 HTML 代码，去除不必要的标签和嵌套层次。过多的标签和过深的嵌套会增加浏览器解析 HTML 文档的时间和复杂度，同时也可能导致额外的 HTTP 请求。保持 HTML 结构简洁明了，有助于提高页面的加载效率。
• 避免使用 iframe：iframe 会创建一个独立的文档上下文，每个 iframe 都需要单独的 HTTP 请求来加载其内容。如果不是必须使用 iframe，尽量避免使用，以减少 HTTP 请求数量。如果确实需要使用 iframe，也要确保其内容是必要且加载速度快的。

其他优化措施

• Base64 编码：对于一些较小的图片或字体文件，可以将其转换为 Base64 编码，直接嵌入到 HTML 或 CSS 文件中。这样浏览器在加载页面时就无需再发送额外的 HTTP 请求来获取这些资源。但要注意，Base64 编码会使文件大小增加约 33%，所以只适用于较小的资源。
• 字体优化：减少自定义字体的使用，因为每个字体文件都需要一个 HTTP 请求。如果必须使用自定义字体，尽量选择精简的字体子集，只包含页面中实际使用到的字符，以减小字体文件的大小，减少 HTTP 请求的成本。