我的前端小站

Appearance

网络优化 ​

1. 监控 ​

1.1. 主动探测 ​

  • 使用商业服务，模拟用户从不同地区访问应用，监控响应时间、错误率等指标。
  • 使用e2e（end-to-end）监控工具，定期发起请求，记录响应时间、状态码等信息。

1.2. 用户日志收集 ​

监控用户端的网络请求日志，收集接口响应时间、错误率等指标。以及接口的性能数据。
目前有多种第三方日志收集服务可用，如 Sentry 等。还有付费服务如 阿里或字节的日志服务。

1.2.1. Performance API ​

js
// 监听页面加载完成后获取性能数据
window.addEventListener('load', () => {
  // 获取所有资源的性能记录（包括 XMLHttpRequest、fetch 请求）
  const entries = performance.getEntriesByType('resource');
  entries.forEach(entry => {
    if (entry.initiatorType === 'xmlhttprequest' || entry.initiatorType === 'fetch') {
      console.log('接口 URL:', entry.name);
      console.log('DNS 解析时长(ms):', entry.domainLookupEnd - entry.domainLookupStart);
      console.log('总请求时长(ms):', entry.responseEnd - entry.startTime);
    }
  });

  // 针对单个接口的性能记录（如已知接口 URL）
  const apiEntry = performance.getEntriesByName('https://api.example.com/data')[0];
  if (apiEntry) {
    console.log('目标接口 DNS 时长:', apiEntry.domainLookupEnd - apiEntry.domainLookupStart);
  }
});

1.2.2. 小程序端 ​

小程序端wx.request中开启enableProfile,可以记录接口的性能数据。小程序网络调优

1.3. 后续处理 ​

  1. 数据预处理：对收集到的日志数据进行清洗、去重、格式化等处理，确保数据质量。
  2. 指标定义：定义关键性能指标（KPI），如平均响应时间、错误率、请求成功率等，DNS请求时长，慢接口率等。
  3. 数据分析：使用数据分析工具 对日志数据进行可视化展示，识别性能瓶颈和异常情况。
  4. 告警机制：设置阈值，当某些指标超过预设范围时，触发告警通知相关人员。
  5. 持续优化：根据监控数据和分析结果，持续优化网络请求和接口性能，定期回顾和调整优化策略。

2. 协议升级 ​

Http1.1 存在固有缺陷，如队头阻塞、连接数限制等问题，导致性能瓶颈。

2.1. Http2 ​

  1. 多路复用: 单连接内并行传输多个请求 / 响应，避免 HTTP/1.1 的 “连接数限制” 和 “队头阻塞”
  2. 头部压缩: 使用 HPACK 压缩头部信息，减少数据传输量
  3. 二进制帧编码: 使用二进制格式传输数据，减少解析开销

2.2. Http3 ​

  1. 基于 QUIC 协议，使用 UDP 传输，比 TCP 三次握手节省 1-2 个 RTT，减少连接建立时间
  2. 多路复用: 类似于 HTTP/2，但避免了TCP的队头阻塞问题
  3. 内置加密: QUIC 协议内置 TLS 1.3 加密，提供更快的安全连接
  4. 拥塞控制: QUIC 提供更灵活的拥塞控制机制，适应网络变化

3. 数据传输优化 ​

3.1. Gzip或Brotli压缩 ​

使用 Gzip 或 Brotli 等压缩算法，减少传输数据量，提高加载速度。

  • Brotli 采用预设的字典和更高效的压缩算法，通常比 Gzip 压缩率更高，适用于静态资源。（性能和兼容性略差）
  • 启用压缩：在服务器（如 Nginx、Apache、Node.js 等）中配置压缩规则，指定对哪些 MIME 类型（如application/json、text/plain）启用压缩。
nginx
gzip on;
gzip_types application/json text/plain text/css application/javascript;  # 针对接口常见类型开启
gzip_min_length 1k;  # 小于1KB的数据不压缩（避免开销大于收益）
  • 协商压缩方式：服务器通过Accept-Encoding请求头识别客户端支持的压缩算法（如Accept-Encoding: gzip, br），并在响应头中用Content-Encoding说明实际使用的算法（如Content-Encoding: gzip）。

3.2. 媒体资源压缩 ​

  • 图片: 使用 WebP 格式，支持更高压缩率和更小文件大小。（IOS14以下不支持，需要兼容处理）
  • 视频: 使用 H.265 或 AV1 编码，提供更高压缩率和更小文件大小，并支持自适应码率。在没声音的视频中，去掉音频轨道可以进一步减小文件大小。

4. 缓存 ​

4.1. 浏览器缓存 ​

  • 强缓存：用 Cache-Control: max-age=86400 或 Expires 标记静态资源（如图片、JS），直接从本地缓存读取（0 网络开销）；
  • 协商缓存：用 ETag/Last-Modified 验证资源是否更新，未更新时返回 304（仅传输响应头，节省带宽）。

4.2. CDN缓存 ​

将静态资源（如图片、视频）缓存到 CDN 边缘节点（覆盖全球城市），用户请求直接从最近节点获取。

  • 新资源发布后，主动推送至 CDN 节点，避免用户首次访问时缓存未命中（回源拉取导致延迟）。

4.3. 服务端缓存 ​

  • 用 Redis 缓存 API 响应（如商品详情）、数据库查询结果，避免重复计算 / 查询（响应时间从 100ms 降至 1ms）

4.4. 业务接口缓存 ​

对于不会改变的数据，或几乎不改变的数据，如一些配置数据、字典数据等，可以在业务层面进行缓存，避免频繁访问数据库或远程服务。

  • 采用合适更新策略, 如定时更新。
  • 默认使用旧数据， 如果数据改变了，可以刷新页面或仅更新缓存数据。
  • 在小程序中，可以使用缓存管理器（cacheManager），在弱网情况下，使用缓存数据，避免频繁请求网络。弱网体验优化

5. 提前建立连接 ​

5.1. DNS预解析 ​

  • 在页面加载前，浏览器可以提前解析域名，减少 DNS 查询时间。可以通过 <link rel="dns-prefetch" href="//example.com"> 标签实现。
  • 也可以在代码主动发起，\healthy请求，提前建立 DNS 解析。
  • 在小程序中，可以在管理后台配置 DNS 预解析，提前解析常用域名。

5.2. TCP预连接 ​

在页面加载前，浏览器可以提前建立 TCP 连接，减少连接建立时间。可以通过 <link rel="preconnect" href="//example.com"> 标签实现。

TCP 预连接：不仅包含 DNS 解析过程，还会提前进行 TCP 握手以及 TLS 协商（如果使用 HTTPS 协议）。
它是在正式发出 HTTP 请求之前，浏览器预先与服务器建立起完整的连接，当后续真正请求资源时，可直接使用
已建立好的连接，节省了 DNS 查询、TCP 握手和 TLS 协商的时间。

DNS 预请求：也称为 DNS 预解析，仅提前对域名进行 DNS 解析，将域名转换为对应的 IP 地址。当浏览器
后续需要请求该域名下的资源时，就无需再等待 DNS 解析过程，可以直接使用已解析好的 IP 地址进行连接，
从而减少了请求资源时的延迟。

5.3. HTTP/2 Server Push ​

在 HTTP/2 中，服务器可以主动推送资源到客户端，而不需要客户端请求。一般用于推送页面所需的 CSS、JS、图片等资源，减少后续请求延迟。（目前应用场景较少）

7. 域名收敛 ​

  • 降低DNS 解析成本：每个新域名都需要经过 DNS 解析（将域名转为 IP 地址），过程可能耗时 10-100ms（甚至更久，取决于网络）。域名越多，累计解析时间越长。

  • 降低TCP 连接成本：每个域名首次访问时需建立 TCP 连接（三次握手），若使用 HTTPS 还需 TLS 握手（额外 1-2 个 RTT）。这些握手过程会显著增加首屏加载延迟。

  • 在Http2中，由于支持多路复用（没有并发数量限制），理论上单域名是最优解。

8. HttpDNS ​

HTTPDNS 是一种基于 HTTP 协议的域名解析技术，核心是绕过传统的本地 DNS（LDNS）解析流程，直接通过 HTTP 协议向专门的 DNS 服务器（如阿里云、腾讯云等提供的 HTTPDNS 服务）发送域名解析请求，获取目标域名的 IP 地址。

工作原理 ​

  1. 客户端（如 App、浏览器）需要解析域名（如 www.example.com）时，不调用系统默认的 DNS 接口，而是通过 HTTP/HTTPS 向 HTTPDNS 服务器发送请求（例如：https://httpdns.example.com/d?domain=www.example.com）。
  2. HTTPDNS 服务器收到请求后，根据客户端的真实 IP 地址（而非本地 DNS 的 IP）进行智能解析，返回最优的目标 IP 列表（如距离用户最近的服务器 IP）。
  3. 客户端获取 IP 后，直接通过该 IP 发起网络请求（如 HTTP/HTTPS 连接），无需再经过本地 DNS。

优点 ​

  1. 避免 DNS 污染：HTTPDNS 通过 HTTP 协议直接查询，绕过本地 DNS，避免了 DNS 劫持、污染等问题。
  2. 智能解析：HTTPDNS 可以根据客户端的实际 IP 地址进行智能解析，返回最优的 IP 地址，提高访问速度和稳定性。

小程序上使用HttpDNS ​

在小程序中，不支持IP调用。所以仅支持小程序提供HttpDNS服务。小程序文档