Promise.all和await有什么区别？为什么HTTP/2时代必须这样写Fetch？

HTTP/1.1 的世界:
┌─────────────┐
│ 浏览器       │
└─────┬───────┘
      │ 请求CSS
      ├─────────────────> ┌─────────┐
      │ <─────────────────┤ 服务器   │
      │ 响应CSS            └─────────┘
      │
      │ 请求JS (等CSS下完才能发)
      ├─────────────────>
      │ <─────────────────
      │ 响应JS
      │
      │ 请求图片 (继续等...)
      ├─────────────────>
      │ <─────────────────
      │ 响应图片

HTTP/2 的世界:
┌─────────────┐
│ 浏览器       │
└─────┬───────┘
      │ 一条TCP连接
      ├════════════════════> ┌─────────┐
      ║ Stream 1: CSS请求    │         │
      ║ Stream 2: JS请求     │ 服务器   │
      ║ Stream 3: 图片请求   │         │
      ║                      │         │
      ║ <────── CSS响应      │         │
      ║ <────── 图片响应     │         │
      ║ <────── JS响应       └─────────┘
      ║ (乱序返回,互不阻塞)

// ❌ 错误示范:串行请求
asyncfunction loadDashboard() {
// 等用户数据回来
const user = await fetch('/api/user').then(r => r.json());

// 再请求通知数据
const notifications = await fetch('/api/notifications').then(r => r.json());

// 最后请求统计数据
const stats = await fetch('/api/stats').then(r => r.json());

console.log(user, notifications, stats);
}

// ✅ 正确示范:并行请求
async function loadDashboard() {
  const [user, notifications, stats] = await Promise.all([
    fetch('/api/user').then(r => r.json()),
    fetch('/api/notifications').then(r => r.json()),
    fetch('/api/stats').then(r => r.json())
  ]);
  
  console.log(user, notifications, stats);
}

HTTP/1.1 传输:
文本格式,一个响应是连续的字节流
GET /api/user HTTP/1.1
Host: example.com
...

HTTP/2 传输:
二进制格式,拆成多个帧
┌──────────┬──────────┬──────────┐
│Frame(S1) │Frame(S2) │Frame(S1) │
│HEADERS   │DATA      │DATA      │
└──────────┴──────────┴──────────┘

// 高优先级的关键CSS
fetch('/critical.css', { priority: 'high' });

// 低优先级的统计脚本
fetch('/analytics.js', { priority: 'low' });

浏览器请求 index.html
      ↓
服务器响应 index.html
   同时主动推送:
      - style.css
      - script.js
      - logo.png

// 应用启动时,并行加载所有初始化数据
asyncfunction initializeApp() {
const [
    userProfile,
    appConfig,
    permissions,
    menuItems
  ] = awaitPromise.all([
    fetch('/api/user/profile').then(r => r.json()),
    fetch('/api/config').then(r => r.json()),
    fetch('/api/permissions').then(r => r.json()),
    fetch('/api/menu').then(r => r.json())
  ]);

return { userProfile, appConfig, permissions, menuItems };
}

// 同时加载列表和第一条详情
asyncfunction loadListWithFirstDetail() {
const listPromise = fetch('/api/articles').then(r => r.json());

const list = await listPromise;

// 有了列表,立即并行加载第一条详情和其他数据
const [firstDetail, categories] = awaitPromise.all([
    fetch(`/api/articles/${list[0].id}`).then(r => r.json()),
    fetch('/api/categories').then(r => r.json())
  ]);

return { list, firstDetail, categories };
}

// 对于大数据集,先加载核心数据,再加载详细数据
asyncfunction loadUserDashboard(userId) {
// 第一波:核心数据(快速展示)
const [summary, recentActivity] = awaitPromise.all([
    fetch(`/api/user/${userId}/summary`).then(r => r.json()),
    fetch(`/api/user/${userId}/recent`).then(r => r.json())
  ]);

// 渲染核心UI
  renderCoreDashboard(summary, recentActivity);

// 第二波:详细数据(后台加载)
const [fullHistory, analytics] = awaitPromise.all([
    fetch(`/api/user/${userId}/history`).then(r => r.json()),
    fetch(`/api/user/${userId}/analytics`).then(r => r.json())
  ]);

// 补充详细信息
  renderDetailedDashboard(fullHistory, analytics);
}

async function streamLargeJSON() {
const response = await fetch('/api/large-dataset');
const reader = response.body.getReader();
const decoder = new TextDecoder();

let buffer = '';

while (true) {
    const { done, value } = await reader.read();
    
    if (done) break;
    
    // 解码chunk
    buffer += decoder.decode(value, { stream: true });
    
    // 尝试处理完整的JSON对象
    // (实际项目中可以用ndjson格式,每行一个JSON)
    const lines = buffer.split('\n');
    buffer = lines.pop(); // 保留不完整的行
    
    lines.forEach(line => {
      if (line.trim()) {
        const item = JSON.parse(line);
        // 立即处理每一条数据
        processItem(item);
      }
    });
  }
}

// 鼠标悬停时预加载详情
function setupSmartPrefetch() {
document.querySelectorAll('.article-item').forEach(item => {
    item.addEventListener('mouseenter', () => {
      const articleId = item.dataset.id;
      
      // 预加载详情到缓存
      fetch(`/api/articles/${articleId}`)
        .then(r => r.json())
        .then(data => {
          // 存入缓存,点击时秒开
          cache.set(articleId, data);
        });
    });
  });
}

// 预缓存关键资源
asyncfunction precacheAssets() {
const cache = await caches.open('app-v1');

// 并行缓存多个资源
awaitPromise.all([
    cache.add('/styles/main.css'),
    cache.add('/scripts/app.js'),
    cache.add('/images/logo.png'),
    cache.add('/data/config.json')
  ]);

console.log('关键资源已缓存');
}

// 优先从缓存读取,失败才走网络
asyncfunction fetchWithCache(url) {
const cache = await caches.open('app-v1');
const cached = await cache.match(url);

if (cached) {
    console.log('从缓存加载:', url);
    return cached;
  }

console.log('从网络加载:', url);
const response = await fetch(url);

// 缓存新资源
  cache.put(url, response.clone());

return response;
}

// HTTP/1.1优化(现在不要这样做)
cdn1.example.com/a.js
cdn2.example.com/b.js
cdn3.example.com/c.js

需要合并的情况:
- 小图标 → 雪碧图或SVG Sprite(减少请求数)
- 内联CSS → Critical CSS内联(加快首屏)
- 核心JS → 打包(避免过度拆分)

可以拆分的情况:
- 大型库 → 按需加载(tree-shaking)
- 业务代码 → 路由懒加载(代码分割)
- 样式 → 按页面拆分(减少首屏体积)

// HTTP/2再快,这样写还是慢
for (let i = 0; i < 10; i++) {
  const data = await fetch(`/api/item/${i}`).then(r => r.json());
  processData(data); // 一个一个处理,太慢!
}

// 并行才是正道
const promises = [];
for (let i = 0; i < 10; i++) {
  promises.push(fetch(`/api/item/${i}`).then(r => r.json()));
}
const results = await Promise.all(promises);
results.forEach(processData); // 一起处理

// 检测当前请求是否使用HTTP/2
fetch('/api/test')
  .then(response => {
    console.log('协议:', response.headers.get(':protocol'));
    // HTTP/2 会显示 "h2"
  });

□ 服务器已启用HTTP/2
□ 使用Promise.all并行加载初始化数据
□ 移除了域名分片(统一到一个域名)
□ 资源拆分适度,避免过度合并
□ 关键路径使用流式加载
□ 配合Cache API做好缓存策略
□ 利用Resource Hints预加载资源
□ 监控HTTP/2连接状态和性能