Web 开发中减少 HTTP 请求的性能优化技巧

你好，我是木亦。

在瞬息万变的 Web 开发领域，性能优化是每一个开发者手中的 "秘密武器"，如果你要打造高效、流畅用户体验，性能优化必不可少。而减少 HTTP 请求，则是性能优化中最为核心的一招，它的重要性怎么强调都不为过。

想象一下，每一次 HTTP 请求就像是派遣一位信使，穿越漫长的网络 "高速公路"，去远方的服务器获取资源。这个过程不仅耗时，还会消耗大量的网络带宽和服务器资源。如果我们能巧妙地减少这些请求，就如同给网页加载速度安装了一台超级引擎，让它能够飞速响应，给用户带来前所未有的流畅体验。接下来，我将提供给你 8 个减少 HTTP 请求的技巧，希望可以帮助你在项目开发中，提升一定的性能。

一、合并文件、化零为整

在前端开发中，我们常常会遇到这样的情况：项目中散落着众多的 CSS 文件和 JavaScript 文件，它们各自为政，每一个文件都需要一次 HTTP 请求才能被加载到页面中。这就好比我们要寄送一堆小包裹，每个包裹都要单独计费，不仅效率低下，还会增加成本。

合并文件的操作，就像是将这些小包裹整合打包成一个大包裹再进行投递。这样一来，投递次数大幅减少，效率自然就提高了。

（一）CSS 文件合并

假设我们有三个 CSS 文件：style1.css、style2.css 和 style3.css。

css 复制代码

/* style1.css */
body {
  background-color: lightblue;
}

css 复制代码

/* style2.css */
h1 {
  color: red;
}

css 复制代码

/* style3.css */
p {
  font-size: 16px;
}

我们完全可以将它们合并成一个allStyles.css文件：

css 复制代码

body {
  background-color: lightblue;
}
h1 {
  color: red;
}
p {
  font-size: 16px;
}

在 HTML 文件中，只需要引入这一个合并后的文件：

html 复制代码

<link rel="stylesheet" href="allStyles.css">

通过这种方式，原本需要三次 HTTP 请求才能加载的 CSS 文件，现在只需要一次就可以了。这在小型项目中或许效果不太明显，但在大型项目中，可能会涉及到几十甚至上百个 CSS 文件，通过合并操作，能够极大地减少 HTTP 请求的数量，显著提升页面的加载速度和用户体验。

（二）JavaScript 文件合并

同理，对于 JavaScript 文件，假设我们有script1.js、script2.js 和 script3.js。

javascript 复制代码

// script1.js
function sayHello() {
  console.log('Hello');
}

javascript 复制代码

// script2.js
function sayWorld() {
  console.log('World');
}

javascript 复制代码

// script3.js
function sayHelloWorld() {
  sayHello();
  sayWorld();
}

将它们合并成一个allScripts.js：

javascript 复制代码

function sayHello() {
  console.log('Hello');
}
function sayWorld() {
  console.log('World');
}
function sayHelloWorld() {
  sayHello();
  sayWorld();
}

在 HTML 中引入合并后的文件：

html 复制代码

<script src="allScripts.js"></script>

合并 JavaScript 文件，不仅能够减少 HTTP 请求，还能使代码结构更加清晰，便于后续的维护和管理。不过，在合并过程中，一定要特别注意文件之间的依赖关系，确保合并后的代码能够正常运行，避免出现因依赖问题导致的功能异常。

（三）打包产物优化

试试构建工具的魔法，把CSS/JS文件打包成全家桶套餐。

javascript 复制代码

src/
  ├── header.js
  ├── carousel.js
  └── footer.js
↓ 打包后 ↓
dist/bundle.js

二、使用雪碧图（CSS Sprites）

在网页设计中，我们经常会用到各种各样的小图标，比如关闭图标、菜单图标、搜索图标等等。如果每个图标都单独作为一个图片文件进行加载，那么就会产生大量的 HTTP 请求，这无疑会拖慢页面的加载速度。

雪碧图（CSS Sprites）的出现，完美地解决了这个问题。它就像是一个精心整理的图标百宝箱，将多个小图标合并成一张大图片。当我们需要某个图标时，借助 CSS 的background - position属性，就能够像在地图上精准定位一样，快速找到并显示我们需要的图标。

首先，我们把这些小图标合并成一张大图片sprite.png。然后在 CSS 中这样运用：

css 复制代码

/* 关闭图标 */
.close-icon {
  width: 20px;
  height: 20px;
  background: url('sprite.png') no-repeat -20px 0;
}
/* 菜单图标 */
.menu-icon {
  width: 20px;
  height: 20px;
  background: url('sprite.png') no-repeat -40px 0;
}
/* 搜索图标 */
.search-icon {
  width: 20px;
  height: 20px;
  background: url('sprite.png') no-repeat -60px 0;
}

在 HTML 中：

html 复制代码

<i class="close-icon"></i>
<i class="menu-icon"></i>
<i class="search-icon"></i>

通过这种方式，一张图片就满足了多个图标需求，有效减少了 HTTP 请求。在使用雪碧图时，我们要特别注意图片的尺寸和布局，确保每个图标都能清晰显示，并且定位准确无误。此外，随着前端技术的不断发展，现在已经有许多自动化工具可以帮助我们更方便地生成和管理雪碧图，大大提高了开发效率。

三、利用浏览器缓存让网页加载 "快人一步"

大家都知道，我们在日常生活中，会在家里储备一些常用的物品，这样在需要的时候就可以直接取用，无需再去外面购买。在 Web 开发中，利用浏览器缓存的原理与之类似。

我们可以通过设置 HTTP 头信息，让浏览器预先存储一些常用的文件，比如 CSS 文件、JavaScript 文件、图片等等。当下次用户再次请求相同的文件时，浏览器就可以直接从本地缓存中读取，而无需再向服务器发送请求，这无疑大大提高了页面的加载速度。

在 Node.js 中，使用 Express 框架设置缓存头信息非常简单：

javascript 复制代码

const express = require('express');
const app = express();
// 设置静态文件缓存时间为1小时
app.use(express.static('public', { maxAge: 3600 }));
const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

这样，当浏览器访问public目录下的静态文件时，这些文件会被缓存 1 小时。在这 1 小时内再次请求相同文件，浏览器会直接从本地缓存中读取，无需向服务器发送请求。

不过，在使用浏览器缓存时，我们也需要注意一个问题：当我们更新文件时，如何确保用户能够获取到最新的版本？这时候，我们可以通过修改文件名、添加版本号等方式，强制浏览器重新获取最新文件，避免用户访问到旧版本的文件，从而保证用户始终能够享受到最新的功能和体验。

四、懒加载（Lazy Loading）的智慧

懒加载的原理非常简单，就像我们点外卖一样，只有当我们真正下单后，外卖才会被送达。在 Web 开发中，懒加载就是只有当用户真正需要某个资源时，才进行加载。

以图片懒加载为例，在 HTML 中：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <img src="placeholder.jpg" data-src="real-image.jpg" class="lazy-load" />
    <img src="placeholder.jpg" data-src="another-real-image.jpg" class="lazy-load" />
    <script>
      const lazyImages = document.querySelectorAll(".lazy-load");
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
          }
        });
      });
      lazyImages.forEach((image) => {
        observer.observe(image);
      });
    </script>
  </body>
</html>

这里我们先使用一个占位图片placeholder.jpg，当图片进入视口（也就是被用户看到）时，才通过 JavaScript 将真实图片地址赋给src属性，加载真实图片。这样就减少了初始页面加载时的 HTTP 请求，大大提高了页面的加载速度。

懒加载不仅适用于图片，还广泛应用于视频、脚本文件等资源的加载。在实际应用中，我们要根据项目的具体需求和用户体验，合理设置懒加载的触发条件和加载时机，以达到最佳的性能优化效果。

五、使用 CDN（内容分发网络）

CDN，全称 Content Delivery Network，也就是内容分发网络。它就像是一个遍布全球的超级大仓库，在世界各地都设有分仓库。当用户请求资源时，CDN 会智能地从离用户最近的分仓库快速送达资源，不仅传输速度极快，还能有效减轻源服务器的压力。

市面上有许多知名的 CDN 服务提供商，如七牛云、又拍云、阿里云 CDN 等，它们都能提供稳定可靠的服务。

比如我们要引入一个 JQuery 库，使用 CDN 的话，在 HTML 中这样编写：

html 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

这样就无需从自己的服务器发送请求获取 JQuery 库，而是直接从 CDN 的服务器获取，极大地减少了 HTTP 请求。

在使用 CDN 时，我们要选择信誉良好、节点分布广泛的服务商，并注意 CDN 服务的稳定性和兼容性。同时，对于一些对安全性要求较高的项目，要确保 CDN 服务不会带来安全隐患，比如数据泄露、恶意篡改等问题。

六、内联资源

内联资源，就是将一些小的 CSS 或 JavaScript 代码直接嵌入 HTML 文件中，而不是单独存放于外部文件。这样做的好处是，能够减少对外部文件的请求，从而提高页面的加载速度。

比如有一个简单的 CSS 样式，用于设置按钮的背景颜色和文字颜色：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      button {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <button>点击我</button>
  </body>
</html>

通过这种方式，原本需要单独引入 CSS 文件的操作被省略，减少了一次 HTTP 请求。

不过需要特别注意的是，内联资源只适用于代码量较小的情况。如果代码量过大，会使 HTML 文件变得臃肿不堪，不仅会影响页面的加载速度，还会降低代码的可维护性。因此，在实际应用中，我们要根据代码规模和项目需求，谨慎选择是否使用内联资源。

七、小文件的编码使用 Data URL

Data URL 是一种将小文件（比如图片）直接编码成字符串，然后巧妙嵌入到 HTML、CSS 或 JavaScript 文件中的技术。它的出现，为我们减少 HTTP 请求提供了一种新的思路。

例如，有一个小的图标文件icon.png，我们可以借助在线工具将它转换为 Data URL：

css 复制代码

.icon {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

在 HTML 中使用这个类：

html 复制代码

<div class="icon"></div>

这样就无需对icon.png发送 HTTP 请求，直接在文件中使用编码后的字符串来显示图标。

使用 Data URL 时，我们要注意编码后的字符串长度，因为过长的字符串可能会影响文件的加载和解析速度。通常情况下，Data URL 适用于一些体积非常小的图标或图片资源，对于较大的文件，还是建议使用传统的文件加载方式。

八、缓存接口数据

给常用 API 买个"记忆面包"吧：

javascript 复制代码

// 简单粗暴的缓存示例
const cachedFetch = async (url) => {
  const cacheKey = `cache_${url}`;
  const cachedData = localStorage.getItem(cacheKey);
  
  if (cachedData) return JSON.parse(cachedData);

  const freshData = await fetch(url);
  localStorage.setItem(cacheKey, JSON.stringify(freshData));
  return freshData;
}

掌握了这些减少 HTTP 请求的性能优化技巧，就等于掌握了提升 Web 项目性能的关键钥匙。它们能够帮助我们打造出更加高效、流畅的网页应用，在竞争激烈的 Web 开发领域中脱颖而出。