网络请求优化实战：让你的应用加载更快-平芜编程栈

网络请求优化实战：让你的应用加载更快

大家好，我是蔓蔓。在大厂时，我负责过项目的性能优化，网络请求往往是瓶颈。今天我来和大家分享网络请求优化的实战技巧。

请求合并

// 1. 批量请求 async function fetchUsers(ids: number[]) { const response = await fetch(`/api/users?ids=${ids.join(',')}`); return response.json(); } // 2. 时间窗口合并 class RequestBatcher { constructor() { this.queue = []; this.timer = null; this.batchWindow = 50; // 50ms内的请求合并 } add(request) { this.queue.push(request); if (!this.timer) { this.timer = setTimeout(() => { this.executeBatch(); }, this.batchWindow); } } executeBatch() { const requests = this.queue; this.queue = []; this.timer = null; // 发送批量请求 fetchUsers(requests.map(r => r.id)).then(results => { requests.forEach((req, index) => { req.resolve(results[index]); }); }).catch(errors => { requests.forEach(req => req.reject(errors)); }); } } const batcher = new RequestBatcher(); // 使用 function getUser(id: number) { return new Promise((resolve, reject) => { batcher.add({ id, resolve, reject }); }); } // 同一时间内的多次调用会被合并 getUser(1); getUser(2); getUser(3);

请求缓存

class RequestCache { constructor(ttl = 5 * 60 * 1000) { // 默认5分钟 this.cache = new Map(); this.ttl = ttl; } get(key: string) { const entry = this.cache.get(key); if (!entry) return null; if (Date.now() - entry.timestamp > this.ttl) { this.cache.delete(key); return null; } return entry.value; } set(key: string, value: any) { this.cache.set(key, { value, timestamp: Date.now() }); } generateKey(url: string, options = {}) { return `${url}-${JSON.stringify(options)}`; } } const cache = new RequestCache(); // 缓存装饰器 async function fetchWithCache(url: string, options = {}) { const key = cache.generateKey(url, options); const cached = cache.get(key); if (cached) { return cached; } const response = await fetch(url, options); const data = await response.json(); cache.set(key, data); return data; }

请求取消

// 使用AbortController class RequestManager { constructor() { this.abortControllers = new Map(); } fetch(url: string, options = {}) { const abortController = new AbortController(); const signal = abortController.signal; this.abortControllers.set(url, abortController); const promise = fetch(url, { ...options, signal }).finally(() => { this.abortControllers.delete(url); }); return promise; } cancel(url: string) { const controller = this.abortControllers.get(url); if (controller) { controller.abort(); this.abortControllers.delete(url); } } cancelAll() { this.abortControllers.forEach((controller) => { controller.abort(); }); this.abortControllers.clear(); } } // 使用示例 const manager = new RequestManager(); // 发起请求 manager.fetch('/api/data'); // 路由切换时取消 router.beforeEach((to, from, next) => { manager.cancelAll(); next(); });

预加载与懒加载

// 预加载关键资源 function preloadResources() { // 预加载字体 const fontLink = document.createElement('link'); fontLink.rel = 'preload'; fontLink.as = 'font'; fontLink.href = '/fonts/my-font.woff2'; document.head.appendChild(fontLink); // 预加载关键数据 fetch('/api/init-data'); } // 图片懒加载 const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; imageObserver.unobserve(img); } }); }); document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img); }); // 路由预加载 const router = { navigate(to) { // 预加载下一个页面的资源 if (to === 'dashboard') { import('./dashboard.js'); // 预加载模块 fetch('/api/dashboard-data'); // 预加载数据 } } };

请求重试与降级

async function fetchWithRetry(url: string, options = {}, retries = 3) { let lastError; for (let i = 0; i < retries; i++) { try { const response = await fetch(url, { ...options, signal: options.signal }); if (response.ok) { return response; } // 只有5xx错误重试 if (response.status < 500) { throw new Error(`HTTP ${response.status}`); } } catch (error) { lastError = error; // 指数退避重试 await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000)); } } // 降级策略 if (options.fallback) { console.warn('Falling back to static data'); return new Response(JSON.stringify(options.fallback)); } throw lastError; } // 使用示例 fetchWithRetry('/api/data', { fallback: { items: [] } // 降级数据 });

压缩与优化

// 1. 使用压缩 // 服务端配置gzip/brotli // 2. 选择合适的图片格式 // 使用WebP、AVIF等现代格式 // 3. 图片压缩 // 压缩工具：TinyPNG, Squoosh // 4. 减少请求大小 function minimizeRequest(data) { // 只发送必要字段 const { id, name, ...rest } = data; return { id, name }; } // 5. 使用数据节流 class Throttler { constructor(interval = 2000) { this.lastTime = 0; this.interval = interval; } throttle(fn) { const now = Date.now(); if (now - this.lastTime >= this.interval) { fn(); this.lastTime = now; } } }