程序猿指南
Search K

Appearance

JavaScript异步性能优化2024：前端开发者掌握高效异步编程完整指南 ​

📊 SEO元描述：2024年最新JavaScript异步性能优化教程，详解并发控制、请求合并、资源预加载技术。包含完整实战案例，适合前端开发者掌握异步性能优化技能。

核心关键词：JavaScript异步性能优化2024、并发控制技术、请求合并策略、资源预加载、异步编程优化

长尾关键词：JavaScript异步怎么优化、并发控制怎么实现、请求合并技巧、资源预加载方法、异步性能优化策略

📚 JavaScript异步性能优化学习目标与核心收获 ​

通过本节JavaScript异步性能优化详解，你将系统性掌握：

  • ✅ 并发控制技术精通：掌握高效的异步操作并发控制策略
  • ✅ 请求合并策略应用：学会优化网络请求的合并和批处理技术
  • ✅ 资源预加载技能：熟练使用各种资源预加载和缓存策略
  • ✅ 异步性能监控：建立完整的异步操作性能监控体系
  • ✅ 高并发场景优化：处理大量异步操作的性能优化技巧
  • ✅ 异步架构设计：设计高效的异步操作架构和模式

🎯 适合人群 ​

  • 高级JavaScript开发者的异步性能优化需求
  • 前端架构师的异步系统设计能力
  • 全栈开发者的前端异步优化技能
  • 性能工程师的异步性能调优专业需求

🌟 异步性能优化是什么？为什么对现代Web应用至关重要？ ​

异步性能优化是什么？这是现代Web应用性能提升的核心技术。异步性能优化是通过优化异步操作的执行方式、并发控制和资源管理来提升应用响应速度，也是高性能Web应用架构的重要组成部分。

异步性能优化的核心价值 ​

  • 🎯 响应速度提升：通过并发执行减少总体等待时间
  • 🔧 资源利用优化：最大化利用网络和计算资源
  • 💡 用户体验改善：减少阻塞，提供流畅的交互体验
  • 📚 系统吞吐量增加：提高系统处理请求的能力
  • 🚀 可扩展性增强：为应用扩展提供性能基础

💡 性能数据：合理的异步优化可以将应用响应时间减少50-80%，显著提升用户满意度

并发控制：管理异步操作的执行策略 ​

并发控制是异步性能优化的核心，通过合理控制并发数量和执行策略来平衡性能和资源使用。

javascript
// 🎉 并发控制系统实现

class ConcurrencyController {
    constructor(maxConcurrency = 6) {
        this.maxConcurrency = maxConcurrency;
        this.running = new Set();
        this.queue = [];
        this.stats = {
            completed: 0,
            failed: 0,
            totalTime: 0,
            avgTime: 0
        };
    }
    
    // 基础并发控制
    async execute(tasks) {
        const results = [];
        const promises = [];
        
        for (let i = 0; i < tasks.length; i++) {
            const promise = this.executeWithLimit(tasks[i], i);
            promises.push(promise);
            results.push(promise);
        }
        
        return Promise.allSettled(promises);
    }
    
    // 限制并发数的执行
    async executeWithLimit(task, index) {
        return new Promise((resolve, reject) => {
            this.queue.push({
                task,
                index,
                resolve,
                reject,
                startTime: Date.now()
            });
            
            this.processQueue();
        });
    }
    
    // 处理队列
    async processQueue() {
        if (this.running.size >= this.maxConcurrency || this.queue.length === 0) {
            return;
        }
        
        const item = this.queue.shift();
        this.running.add(item);
        
        try {
            const startTime = performance.now();
            const result = await item.task();
            const endTime = performance.now();
            const duration = endTime - startTime;
            
            // 更新统计信息
            this.stats.completed++;
            this.stats.totalTime += duration;
            this.stats.avgTime = this.stats.totalTime / this.stats.completed;
            
            item.resolve(result);
        } catch (error) {
            this.stats.failed++;
            item.reject(error);
        } finally {
            this.running.delete(item);
            // 继续处理队列
            this.processQueue();
        }
    }
    
    // 高级并发控制：优先级队列
    async executeWithPriority(tasks) {
        // 按优先级排序任务
        const prioritizedTasks = tasks.sort((a, b) => (b.priority || 0) - (a.priority || 0));
        
        const results = [];
        const executing = new Map();
        
        for (const task of prioritizedTasks) {
            // 等待有空闲槽位
            while (executing.size >= this.maxConcurrency) {
                await Promise.race(executing.values());
            }
            
            const promise = this.executeTask(task).finally(() => {
                executing.delete(task.id);
            });
            
            executing.set(task.id, promise);
            results.push(promise);
        }
        
        return Promise.allSettled(results);
    }
    
    // 执行单个任务
    async executeTask(task) {
        const startTime = performance.now();
        
        try {
            const result = await task.fn();
            const duration = performance.now() - startTime;
            
            console.log(`✅ 任务 ${task.id} 完成，耗时: ${duration.toFixed(2)}ms`);
            
            return {
                id: task.id,
                result,
                duration,
                status: 'fulfilled'
            };
        } catch (error) {
            const duration = performance.now() - startTime;
            
            console.error(`❌ 任务 ${task.id} 失败，耗时: ${duration.toFixed(2)}ms`, error);
            
            return {
                id: task.id,
                error,
                duration,
                status: 'rejected'
            };
        }
    }
    
    // 自适应并发控制
    async executeAdaptive(tasks, options = {}) {
        const {
            initialConcurrency = 3,
            maxConcurrency = 10,
            minConcurrency = 1,
            adaptationThreshold = 5,
            targetLatency = 1000 // 目标延迟(ms)
        } = options;
        
        let currentConcurrency = initialConcurrency;
        const results = [];
        const latencyHistory = [];
        
        for (let i = 0; i < tasks.length; i += currentConcurrency) {
            const batch = tasks.slice(i, i + currentConcurrency);
            const batchStartTime = performance.now();
            
            // 执行当前批次
            const batchResults = await Promise.allSettled(
                batch.map(task => this.executeTask(task))
            );
            
            const batchDuration = performance.now() - batchStartTime;
            const avgLatency = batchDuration / batch.length;
            
            latencyHistory.push(avgLatency);
            results.push(...batchResults);
            
            // 自适应调整并发数
            if (latencyHistory.length >= adaptationThreshold) {
                const recentAvgLatency = latencyHistory.slice(-adaptationThreshold)
                    .reduce((sum, lat) => sum + lat, 0) / adaptationThreshold;
                
                if (recentAvgLatency < targetLatency * 0.8 && currentConcurrency < maxConcurrency) {
                    // 延迟较低，增加并发数
                    currentConcurrency = Math.min(currentConcurrency + 1, maxConcurrency);
                    console.log(`📈 增加并发数至: ${currentConcurrency}`);
                } else if (recentAvgLatency > targetLatency * 1.2 && currentConcurrency > minConcurrency) {
                    // 延迟较高，减少并发数
                    currentConcurrency = Math.max(currentConcurrency - 1, minConcurrency);
                    console.log(`📉 减少并发数至: ${currentConcurrency}`);
                }
            }
        }
        
        return results;
    }
    
    // 获取统计信息
    getStats() {
        return {
            ...this.stats,
            running: this.running.size,
            queued: this.queue.length,
            successRate: this.stats.completed / (this.stats.completed + this.stats.failed) || 0
        };
    }
    
    // 清理资源
    cleanup() {
        this.queue.length = 0;
        this.running.clear();
    }
}

// 使用示例
const concurrencyController = new ConcurrencyController(4);

// 创建测试任务
const createTestTasks = (count) => {
    return Array.from({ length: count }, (_, i) => ({
        id: `task-${i}`,
        priority: Math.floor(Math.random() * 10),
        fn: async () => {
            // 模拟异步操作
            const delay = Math.random() * 1000 + 500;
            await new Promise(resolve => setTimeout(resolve, delay));
            return `Task ${i} completed`;
        }
    }));
};

// 测试基础并发控制
async function testBasicConcurrency() {
    console.log('🧪 测试基础并发控制');
    
    const tasks = createTestTasks(10).map(task => task.fn);
    const startTime = performance.now();
    
    const results = await concurrencyController.execute(tasks);
    const duration = performance.now() - startTime;
    
    console.log(`基础并发控制完成，总耗时: ${duration.toFixed(2)}ms`);
    console.log('统计信息:', concurrencyController.getStats());
}

// 测试优先级并发控制
async function testPriorityConcurrency() {
    console.log('\n🧪 测试优先级并发控制');
    
    const tasks = createTestTasks(8);
    const startTime = performance.now();
    
    const results = await concurrencyController.executeWithPriority(tasks);
    const duration = performance.now() - startTime;
    
    console.log(`优先级并发控制完成，总耗时: ${duration.toFixed(2)}ms`);
}

// 测试自适应并发控制
async function testAdaptiveConcurrency() {
    console.log('\n🧪 测试自适应并发控制');
    
    const tasks = createTestTasks(20);
    const startTime = performance.now();
    
    const results = await concurrencyController.executeAdaptive(tasks, {
        initialConcurrency: 2,
        maxConcurrency: 8,
        targetLatency: 800
    });
    
    const duration = performance.now() - startTime;
    console.log(`自适应并发控制完成，总耗时: ${duration.toFixed(2)}ms`);
}

// 运行测试
testBasicConcurrency()
    .then(() => testPriorityConcurrency())
    .then(() => testAdaptiveConcurrency());

并发控制核心策略 ​

  • 固定并发数控制：限制同时执行的异步操作数量
  • 优先级队列：根据任务重要性调整执行顺序
  • 自适应并发：根据系统负载动态调整并发数
  • 资源池管理：复用连接和资源减少开销

请求合并：优化网络请求的批处理策略 ​

请求合并通过将多个小请求合并为少数大请求来减少网络开销和提升性能。

javascript
// 🔧 请求合并系统实现

class RequestBatcher {
    constructor(options = {}) {
        this.options = {
            batchSize: 10,           // 批次大小
            batchTimeout: 100,       // 批次超时时间(ms)
            maxWaitTime: 1000,       // 最大等待时间(ms)
            retryAttempts: 3,        // 重试次数
            ...options
        };
        
        this.batches = new Map();
        this.requestQueue = [];
        this.batchTimer = null;
        this.stats = {
            totalRequests: 0,
            batchedRequests: 0,
            savedRequests: 0,
            avgBatchSize: 0
        };
    }
    
    // 添加请求到批次
    async batchRequest(endpoint, data, options = {}) {
        return new Promise((resolve, reject) => {
            const request = {
                id: this.generateRequestId(),
                endpoint,
                data,
                options,
                resolve,
                reject,
                timestamp: Date.now()
            };
            
            this.requestQueue.push(request);
            this.stats.totalRequests++;
            
            // 启动批处理定时器
            this.scheduleBatchProcessing();
        });
    }
    
    // 调度批处理
    scheduleBatchProcessing() {
        if (this.batchTimer) {
            clearTimeout(this.batchTimer);
        }
        
        // 检查是否达到批次大小
        if (this.requestQueue.length >= this.options.batchSize) {
            this.processBatch();
            return;
        }
        
        // 设置超时处理
        this.batchTimer = setTimeout(() => {
            if (this.requestQueue.length > 0) {
                this.processBatch();
            }
        }, this.options.batchTimeout);
    }
    
    // 处理批次
    async processBatch() {
        if (this.requestQueue.length === 0) return;
        
        const batch = this.requestQueue.splice(0, this.options.batchSize);
        const batchId = this.generateBatchId();
        
        console.log(`📦 处理批次 ${batchId}，包含 ${batch.length} 个请求`);
        
        // 按端点分组请求
        const groupedRequests = this.groupRequestsByEndpoint(batch);
        
        // 并发处理不同端点的请求
        const batchPromises = Object.entries(groupedRequests).map(
            ([endpoint, requests]) => this.processBatchForEndpoint(endpoint, requests, batchId)
        );
        
        try {
            await Promise.all(batchPromises);
            
            // 更新统计信息
            this.stats.batchedRequests += batch.length;
            this.stats.savedRequests += Math.max(0, batch.length - Object.keys(groupedRequests).length);
            this.stats.avgBatchSize = this.stats.batchedRequests / 
                Math.ceil(this.stats.totalRequests / this.options.batchSize);
            
        } catch (error) {
            console.error(`批次 ${batchId} 处理失败:`, error);
        }
        
        // 继续处理剩余请求
        if (this.requestQueue.length > 0) {
            this.scheduleBatchProcessing();
        }
    }
    
    // 按端点分组请求
    groupRequestsByEndpoint(requests) {
        return requests.reduce((groups, request) => {
            if (!groups[request.endpoint]) {
                groups[request.endpoint] = [];
            }
            groups[request.endpoint].push(request);
            return groups;
        }, {});
    }
    
    // 处理特定端点的批次
    async processBatchForEndpoint(endpoint, requests, batchId) {
        const batchData = requests.map(req => ({
            id: req.id,
            data: req.data,
            options: req.options
        }));
        
        try {
            // 发送批量请求
            const batchResponse = await this.sendBatchRequest(endpoint, batchData);
            
            // 分发响应到各个请求
            this.distributeBatchResponse(requests, batchResponse);
            
        } catch (error) {
            // 处理批次失败，尝试单独重试
            await this.handleBatchFailure(requests, error);
        }
    }
    
    // 发送批量请求
    async sendBatchRequest(endpoint, batchData) {
        const response = await fetch(`${endpoint}/batch`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                requests: batchData,
                batchId: this.generateBatchId(),
                timestamp: Date.now()
            })
        });
        
        if (!response.ok) {
            throw new Error(`批量请求失败: ${response.status} ${response.statusText}`);
        }
        
        return response.json();
    }
    
    // 分发批次响应
    distributeBatchResponse(requests, batchResponse) {
        const responseMap = new Map(
            batchResponse.results.map(result => [result.id, result])
        );
        
        requests.forEach(request => {
            const response = responseMap.get(request.id);
            
            if (response) {
                if (response.success) {
                    request.resolve(response.data);
                } else {
                    request.reject(new Error(response.error));
                }
            } else {
                request.reject(new Error('批次响应中未找到对应结果'));
            }
        });
    }
    
    // 处理批次失败
    async handleBatchFailure(requests, error) {
        console.warn('批次请求失败，尝试单独重试:', error.message);
        
        // 单独重试每个请求
        const retryPromises = requests.map(async (request) => {
            try {
                const response = await this.sendSingleRequest(
                    request.endpoint, 
                    request.data, 
                    request.options
                );
                request.resolve(response);
            } catch (retryError) {
                request.reject(retryError);
            }
        });
        
        await Promise.allSettled(retryPromises);
    }
    
    // 发送单个请求
    async sendSingleRequest(endpoint, data, options) {
        const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            },
            body: JSON.stringify(data)
        });
        
        if (!response.ok) {
            throw new Error(`请求失败: ${response.status} ${response.statusText}`);
        }
        
        return response.json();
    }
    
    // GraphQL请求合并
    async batchGraphQLQueries(queries) {
        const batchQuery = {
            query: queries.map((q, index) => `
                query${index}: ${q.query}
            `).join('\n'),
            variables: queries.reduce((vars, q, index) => {
                if (q.variables) {
                    Object.keys(q.variables).forEach(key => {
                        vars[`${key}${index}`] = q.variables[key];
                    });
                }
                return vars;
            }, {})
        };
        
        try {
            const response = await fetch('/graphql', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(batchQuery)
            });
            
            const result = await response.json();
            
            // 分发结果
            return queries.map((_, index) => result.data[`query${index}`]);
            
        } catch (error) {
            console.error('GraphQL批量查询失败:', error);
            throw error;
        }
    }
    
    // 智能请求去重
    deduplicateRequests(requests) {
        const seen = new Map();
        const deduplicated = [];
        const duplicates = [];
        
        requests.forEach(request => {
            const key = this.generateRequestKey(request);
            
            if (seen.has(key)) {
                // 重复请求，添加到等待列表
                const original = seen.get(key);
                duplicates.push({ request, original });
            } else {
                seen.set(key, request);
                deduplicated.push(request);
            }
        });
        
        return { deduplicated, duplicates };
    }
    
    // 生成请求键用于去重
    generateRequestKey(request) {
        return `${request.endpoint}:${JSON.stringify(request.data)}`;
    }
    
    // 获取统计信息
    getStats() {
        return {
            ...this.stats,
            efficiency: this.stats.savedRequests / this.stats.totalRequests || 0,
            queueLength: this.requestQueue.length
        };
    }
    
    // 辅助方法
    generateRequestId() {
        return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
    
    generateBatchId() {
        return `batch_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
    
    // 清理资源
    cleanup() {
        if (this.batchTimer) {
            clearTimeout(this.batchTimer);
        }
        this.requestQueue.length = 0;
        this.batches.clear();
    }
}

// 使用示例
const requestBatcher = new RequestBatcher({
    batchSize: 5,
    batchTimeout: 200,
    maxWaitTime: 2000
});

// 模拟API请求
async function simulateAPIRequests() {
    console.log('🧪 测试请求合并');
    
    const requests = [];
    
    // 创建多个并发请求
    for (let i = 0; i < 15; i++) {
        const request = requestBatcher.batchRequest('/api/users', {
            userId: i,
            action: 'getData'
        });
        requests.push(request);
    }
    
    try {
        const results = await Promise.allSettled(requests);
        console.log(`完成 ${results.length} 个请求`);
        console.log('批处理统计:', requestBatcher.getStats());
    } catch (error) {
        console.error('批处理失败:', error);
    }
}

// 测试GraphQL查询合并
async function testGraphQLBatching() {
    console.log('\n🧪 测试GraphQL查询合并');
    
    const queries = [
        { query: 'user(id: 1) { name, email }' },
        { query: 'posts(limit: 5) { title, content }' },
        { query: 'comments(postId: 1) { author, text }' }
    ];
    
    try {
        const results = await requestBatcher.batchGraphQLQueries(queries);
        console.log('GraphQL批量查询结果:', results);
    } catch (error) {
        console.error('GraphQL批量查询失败:', error);
    }
}

// 运行测试
simulateAPIRequests().then(() => testGraphQLBatching());

资源预加载：提前获取和缓存关键资源 ​

资源预加载通过提前获取用户可能需要的资源来减少等待时间，提升用户体验。

javascript
// 🚀 资源预加载系统实现

class ResourcePreloader {
    constructor(options = {}) {
        this.options = {
            maxConcurrentLoads: 4,
            cacheSize: 100,
            prefetchThreshold: 0.7, // 预加载阈值
            ...options
        };
        
        this.cache = new Map();
        this.loadingPromises = new Map();
        this.preloadQueue = [];
        this.stats = {
            hits: 0,
            misses: 0,
            preloaded: 0,
            failed: 0
        };
        
        this.setupIntersectionObserver();
        this.setupPrefetchHints();
    }
    
    // 预加载资源
    async preload(url, type = 'fetch', priority = 'normal') {
        // 检查缓存
        if (this.cache.has(url)) {
            this.stats.hits++;
            return this.cache.get(url);
        }
        
        // 检查是否正在加载
        if (this.loadingPromises.has(url)) {
            return this.loadingPromises.get(url);
        }
        
        // 创建加载Promise
        const loadPromise = this.loadResource(url, type, priority);
        this.loadingPromises.set(url, loadPromise);
        
        try {
            const resource = await loadPromise;
            
            // 缓存资源
            this.cacheResource(url, resource);
            this.stats.preloaded++;
            
            return resource;
        } catch (error) {
            this.stats.failed++;
            throw error;
        } finally {
            this.loadingPromises.delete(url);
        }
    }
    
    // 加载资源
    async loadResource(url, type, priority) {
        const startTime = performance.now();
        
        try {
            let resource;
            
            switch (type) {
                case 'image':
                    resource = await this.loadImage(url);
                    break;
                case 'script':
                    resource = await this.loadScript(url);
                    break;
                case 'style':
                    resource = await this.loadStylesheet(url);
                    break;
                case 'fetch':
                    resource = await this.loadData(url);
                    break;
                case 'font':
                    resource = await this.loadFont(url);
                    break;
                default:
                    throw new Error(`不支持的资源类型: ${type}`);
            }
            
            const loadTime = performance.now() - startTime;
            console.log(`✅ 预加载完成: ${url} (${loadTime.toFixed(2)}ms)`);
            
            return resource;
        } catch (error) {
            const loadTime = performance.now() - startTime;
            console.error(`❌ 预加载失败: ${url} (${loadTime.toFixed(2)}ms)`, error);
            throw error;
        }
    }
    
    // 加载图片
    loadImage(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            
            img.onload = () => resolve(img);
            img.onerror = () => reject(new Error(`图片加载失败: ${url}`));
            
            // 设置跨域属性
            img.crossOrigin = 'anonymous';
            img.src = url;
        });
    }
    
    // 加载脚本
    loadScript(url) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            
            script.onload = () => resolve(script);
            script.onerror = () => reject(new Error(`脚本加载失败: ${url}`));
            
            script.src = url;
            script.async = true;
            
            document.head.appendChild(script);
        });
    }
    
    // 加载样式表
    loadStylesheet(url) {
        return new Promise((resolve, reject) => {
            const link = document.createElement('link');
            
            link.onload = () => resolve(link);
            link.onerror = () => reject(new Error(`样式表加载失败: ${url}`));
            
            link.rel = 'stylesheet';
            link.href = url;
            
            document.head.appendChild(link);
        });
    }
    
    // 加载数据
    async loadData(url) {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`数据加载失败: ${response.status} ${response.statusText}`);
        }
        
        const contentType = response.headers.get('content-type');
        
        if (contentType && contentType.includes('application/json')) {
            return response.json();
        } else {
            return response.text();
        }
    }
    
    // 加载字体
    loadFont(url, fontFamily) {
        return new Promise((resolve, reject) => {
            const font = new FontFace(fontFamily || 'preloaded-font', `url(${url})`);
            
            font.load().then(() => {
                document.fonts.add(font);
                resolve(font);
            }).catch(reject);
        });
    }
    
    // 智能预加载
    async smartPreload(urls, options = {}) {
        const {
            priorityOrder = [],
            loadOnIdle = true,
            respectDataSaver = true
        } = options;
        
        // 检查数据节省模式
        if (respectDataSaver && navigator.connection && navigator.connection.saveData) {
            console.log('🔄 检测到数据节省模式，跳过预加载');
            return;
        }
        
        // 检查网络状态
        const networkInfo = this.getNetworkInfo();
        if (networkInfo.effectiveType === 'slow-2g' || networkInfo.effectiveType === '2g') {
            console.log('🔄 网络较慢，减少预加载');
            urls = urls.slice(0, Math.ceil(urls.length / 2));
        }
        
        // 按优先级排序
        const sortedUrls = this.sortByPriority(urls, priorityOrder);
        
        // 分批预加载
        const batches = this.createBatches(sortedUrls, this.options.maxConcurrentLoads);
        
        for (const batch of batches) {
            if (loadOnIdle) {
                await this.waitForIdle();
            }
            
            const batchPromises = batch.map(item => 
                this.preload(item.url, item.type, item.priority)
                    .catch(error => console.warn('预加载失败:', item.url, error))
            );
            
            await Promise.allSettled(batchPromises);
        }
    }
    
    // 设置Intersection Observer进行可视区域预加载
    setupIntersectionObserver() {
        if (!('IntersectionObserver' in window)) return;
        
        this.intersectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const element = entry.target;
                    const preloadUrl = element.dataset.preload;
                    const preloadType = element.dataset.preloadType || 'fetch';
                    
                    if (preloadUrl) {
                        this.preload(preloadUrl, preloadType, 'high')
                            .catch(error => console.warn('可视区域预加载失败:', error));
                        
                        // 停止观察已处理的元素
                        this.intersectionObserver.unobserve(element);
                    }
                }
            });
        }, {
            rootMargin: '50px' // 提前50px开始预加载
        });
    }
    
    // 观察元素进行预加载
    observeElement(element) {
        if (this.intersectionObserver) {
            this.intersectionObserver.observe(element);
        }
    }
    
    // 设置预取提示
    setupPrefetchHints() {
        // 监听链接悬停事件
        document.addEventListener('mouseover', (event) => {
            if (event.target.tagName === 'A') {
                const href = event.target.href;
                if (href && !this.cache.has(href)) {
                    // 延迟预加载，避免误触
                    setTimeout(() => {
                        this.preload(href, 'fetch', 'low')
                            .catch(error => console.warn('悬停预加载失败:', error));
                    }, 100);
                }
            }
        });
    }
    
    // 预测性预加载
    async predictivePreload(userBehaviorData) {
        // 基于用户行为数据预测可能访问的资源
        const predictions = this.analyzeBehaviorPatterns(userBehaviorData);
        
        // 按预测概率排序
        const sortedPredictions = predictions.sort((a, b) => b.probability - a.probability);
        
        // 预加载高概率资源
        const highProbabilityResources = sortedPredictions
            .filter(p => p.probability > this.options.prefetchThreshold)
            .slice(0, 10); // 限制数量
        
        for (const prediction of highProbabilityResources) {
            try {
                await this.preload(prediction.url, prediction.type, 'low');
                console.log(`🎯 预测性预加载: ${prediction.url} (概率: ${prediction.probability})`);
            } catch (error) {
                console.warn('预测性预加载失败:', prediction.url, error);
            }
        }
    }
    
    // 分析行为模式
    analyzeBehaviorPatterns(behaviorData) {
        // 简化的行为分析算法
        const patterns = new Map();
        
        behaviorData.forEach(action => {
            const key = `${action.from}->${action.to}`;
            patterns.set(key, (patterns.get(key) || 0) + 1);
        });
        
        const totalActions = behaviorData.length;
        const predictions = [];
        
        patterns.forEach((count, pattern) => {
            const [from, to] = pattern.split('->');
            predictions.push({
                url: to,
                type: 'fetch',
                probability: count / totalActions,
                pattern: pattern
            });
        });
        
        return predictions;
    }
    
    // 缓存资源
    cacheResource(url, resource) {
        // 检查缓存大小限制
        if (this.cache.size >= this.options.cacheSize) {
            // 删除最旧的缓存项
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(url, {
            data: resource,
            timestamp: Date.now(),
            accessCount: 0
        });
    }
    
    // 获取缓存资源
    getCachedResource(url) {
        const cached = this.cache.get(url);
        if (cached) {
            cached.accessCount++;
            this.stats.hits++;
            return cached.data;
        }
        
        this.stats.misses++;
        return null;
    }
    
    // 辅助方法
    getNetworkInfo() {
        if (navigator.connection) {
            return {
                effectiveType: navigator.connection.effectiveType,
                downlink: navigator.connection.downlink,
                rtt: navigator.connection.rtt
            };
        }
        return { effectiveType: 'unknown' };
    }
    
    sortByPriority(urls, priorityOrder) {
        return urls.sort((a, b) => {
            const aPriority = priorityOrder.indexOf(a.url);
            const bPriority = priorityOrder.indexOf(b.url);
            
            if (aPriority === -1 && bPriority === -1) return 0;
            if (aPriority === -1) return 1;
            if (bPriority === -1) return -1;
            
            return aPriority - bPriority;
        });
    }
    
    createBatches(items, batchSize) {
        const batches = [];
        for (let i = 0; i < items.length; i += batchSize) {
            batches.push(items.slice(i, i + batchSize));
        }
        return batches;
    }
    
    waitForIdle() {
        return new Promise(resolve => {
            if ('requestIdleCallback' in window) {
                requestIdleCallback(resolve);
            } else {
                setTimeout(resolve, 0);
            }
        });
    }
    
    // 获取统计信息
    getStats() {
        return {
            ...this.stats,
            cacheSize: this.cache.size,
            hitRate: this.stats.hits / (this.stats.hits + this.stats.misses) || 0,
            loadingCount: this.loadingPromises.size
        };
    }
    
    // 清理资源
    cleanup() {
        this.cache.clear();
        this.loadingPromises.clear();
        
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
        }
    }
}

// 使用示例
const preloader = new ResourcePreloader({
    maxConcurrentLoads: 3,
    cacheSize: 50
});

// 预加载关键资源
async function preloadCriticalResources() {
    console.log('🚀 开始预加载关键资源');
    
    const criticalResources = [
        { url: '/api/user/profile', type: 'fetch', priority: 'high' },
        { url: '/images/hero-banner.jpg', type: 'image', priority: 'high' },
        { url: '/css/critical.css', type: 'style', priority: 'high' },
        { url: '/js/app-bundle.js', type: 'script', priority: 'normal' }
    ];
    
    try {
        await preloader.smartPreload(criticalResources, {
            priorityOrder: ['/api/user/profile', '/images/hero-banner.jpg'],
            loadOnIdle: true
        });
        
        console.log('✅ 关键资源预加载完成');
        console.log('预加载统计:', preloader.getStats());
    } catch (error) {
        console.error('预加载失败:', error);
    }
}

// 设置可视区域预加载
function setupViewportPreloading() {
    const lazyElements = document.querySelectorAll('[data-preload]');
    lazyElements.forEach(element => {
        preloader.observeElement(element);
    });
}

// 运行示例
preloadCriticalResources().then(() => {
    setupViewportPreloading();
});

异步性能优化核心策略：

  • 🎯 并发控制：合理控制异步操作的并发数量和执行策略
  • 🎯 请求合并：将多个小请求合并为少数大请求减少开销
  • 🎯 资源预加载：提前获取用户可能需要的资源
  • 🎯 智能缓存：基于使用模式的智能缓存策略
  • 🎯 性能监控：持续监控异步操作的性能表现

💼 最佳实践：异步性能优化需要根据具体业务场景选择合适的策略，并持续监控和调整优化效果

📚 JavaScript异步性能优化学习总结与下一步规划 ​

✅ 本节核心收获回顾 ​

通过本节JavaScript异步性能优化详解的学习，你已经掌握：

  1. 并发控制技术精通：掌握了多种异步操作并发控制策略
  2. 请求合并策略应用：学会了优化网络请求的批处理技术
  3. 资源预加载技能：熟练使用各种资源预加载和缓存策略
  4. 异步性能监控：建立了完整的异步操作性能监控体系
  5. 高并发场景优化：掌握了处理大量异步操作的优化技巧

🎯 JavaScript异步性能优化下一步 ​

  1. 深入学习Web Workers：掌握多线程异步处理技术
  2. 探索Service Worker：学习离线缓存和后台同步技术
  3. 实践微前端异步架构：在大型应用中应用异步优化策略
  4. 学习边缘计算优化：了解CDN和边缘计算的异步优化

🔗 相关学习资源 ​

  • 异步编程最佳实践：JavaScript异步编程权威指南
  • Web性能优化：现代Web性能优化技术和策略
  • 网络请求优化：HTTP/2、HTTP/3和网络优化技术
  • 浏览器缓存策略：浏览器缓存机制和优化方法

💪 实践建议 ​

  1. 建立性能基线：为异步操作建立性能基线和监控
  2. A/B测试优化效果：通过实验验证优化策略的效果
  3. 持续优化迭代：根据用户反馈和数据持续优化
  4. 团队知识分享：在团队中推广异步性能优化最佳实践

🔍 常见问题FAQ ​

Q1: 如何确定合适的并发数量？ ​

A: 需要根据服务器能力、网络条件和用户设备性能综合考虑。建议从较小的并发数开始，通过监控和测试逐步调整。

Q2: 请求合并会增加延迟吗？ ​

A: 合理的请求合并可以减少总体延迟，但需要平衡批次大小和等待时间，避免过度延迟单个请求。

Q3: 资源预加载会浪费带宽吗？ ​

A: 需要基于用户行为数据进行智能预加载，避免预加载用户不需要的资源。同时要考虑用户的网络条件。

Q4: 如何处理异步操作的错误？ ​

A: 建立完善的错误处理机制，包括重试策略、降级方案和用户友好的错误提示。

Q5: 异步优化对SEO有影响吗？ ​

A: 合理的异步优化可以提升页面加载速度，对SEO有正面影响。但要确保关键内容能够被搜索引擎正确抓取。

🛠️ 异步性能优化实施指南 ​

常见异步性能问题解决方案 ​

请求瀑布问题 ​

javascript
// 问题：串行请求导致的性能问题
// 解决：并行请求优化

// ❌ 串行请求
async function serialRequests() {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    return { user, posts, comments };
}

// ✅ 并行请求
async function parallelRequests() {
    const [user, posts] = await Promise.all([
        fetchUser(),
        fetchPosts()
    ]);
    
    const comments = await fetchComments(posts[0].id);
    return { user, posts, comments };
}

内存泄漏预防 ​

javascript
// 问题：异步操作导致的内存泄漏
// 解决：正确的资源清理

class AsyncResourceManager {
    constructor() {
        this.abortControllers = new Set();
        this.timeouts = new Set();
    }
    
    async fetchWithCleanup(url) {
        const controller = new AbortController();
        this.abortControllers.add(controller);
        
        try {
            const response = await fetch(url, {
                signal: controller.signal
            });
            return response.json();
        } finally {
            this.abortControllers.delete(controller);
        }
    }
    
    cleanup() {
        // 取消所有进行中的请求
        this.abortControllers.forEach(controller => {
            controller.abort();
        });
        this.abortControllers.clear();
        
        // 清理定时器
        this.timeouts.forEach(timeoutId => {
            clearTimeout(timeoutId);
        });
        this.timeouts.clear();
    }
}

"掌握JavaScript异步性能优化技术是现代前端开发者的核心竞争力。通过系统学习并发控制、请求合并和资源预加载，你将能够构建高性能的异步应用架构，为用户提供快速响应的优质体验！"