# 性能与浏览器兼容性

URL: https://caijiao.org/axios/vs-fetch/performance
Source: docs/axios/vs-fetch/performance.md
Description: 本章节深入分析 Axios 与 Fetch 在性能表现和浏览器兼容性方面的差异，包括请求速度、响应处理效率、内存占用、老旧浏览器支持情况及移动端适配能力，帮助开发者在不同场景下选择合适的 HTTP 请求方案，提高前端性能和用户体验。

在选择 HTTP 请求库时，性能和浏览器兼容性是重要考量因素。Axios 与 Fetch 各有优劣。

## 一、性能对比

1. **请求速度**

   * Axios 内部基于 XMLHttpRequest，适合多数请求场景，开销略高于原生 Fetch。
   * Fetch 基于原生 Promise 和 Streams，性能较高，尤其是处理大文件或流式响应时。

2. **响应处理效率**

   * Axios 自动转换 JSON 数据，减少额外处理步骤。
   * Fetch 需手动调用 `res.json()`，对复杂响应结构略有额外开销。

3. **内存占用**

   * Axios 封装丰富功能，内存占用略高。
   * Fetch 轻量，无额外封装，适合性能敏感场景。

## 二、浏览器兼容性

1. **Axios**

   * 支持 IE 9 及以上浏览器（使用 polyfill）。
   * 对老旧浏览器的 XMLHttpRequest 封装较好。

2. **Fetch**

   * 原生支持现代浏览器（Chrome, Firefox, Edge, Safari）。
   * IE 不支持，需要 polyfill（如 `whatwg-fetch`）。

3. **移动端适配**

   * Axios 在 Android 和 iOS WebView 中兼容性良好。
   * Fetch 在部分旧版 WebView 上可能存在兼容性问题。

## 三、异常与错误处理

* Axios 对 HTTP 非 2xx 自动抛错，便于统一处理。
* Fetch 默认不抛错，需要手动判断 `res.ok`。

## 四、总结

| 特性    | Axios           | Fetch              |
| ----- | --------------- | ------------------ |
| 请求性能  | 稍慢但稳定           | 原生高性能，流处理更优        |
| 响应处理  | 自动 JSON 转换      | 手动调用 `res.json()`  |
| 内存占用  | 较高              | 较低                 |
| IE 支持 | ✅ (需要 polyfill) | ❌ (需要 polyfill)    |
| 移动端兼容 | ✅               | ✅ 但旧 WebView 可能不支持 |

**结论**：

* 对现代浏览器和性能敏感场景，Fetch 更轻量高效。
* 对兼容性需求高、项目复杂或需要拦截器功能，Axios 更适合。