1. 内存泄漏问题深度解析

1.1 Ajax 请求中的内存泄漏根源

Ajax 请求如果不当管理,会导致严重的内存问题。主要泄漏点包括:

class MemoryLeakDetector {
    static LEAK_SOURCES = {
        UNRESOLVED_PROMISES: '未完成的Promise链',
        EVENT_LISTENERS: '未移除的事件监听器',
        CACHE_ACCUMULATION: '无限增长的缓存',
        TIMERS: '未清理的定时器',
        CLOSURE_REFERENCES: '闭包引用',
        DOM_REFERENCES: 'DOM元素引用'
    };

    // 检测常见内存泄漏模式
    static detectLeakPatterns() {
        const patterns = [];
        
        // 检查全局变量积累
        if (window.accumulatedData && window.accumulatedData.length > 1000) {
            patterns.push('全局数据积累');
        }
        
        // 检查未完成的请求
        if (window.pendingRequests && window.pendingRequests.size > 50) {
            patterns.push('过多未完成请求');
        }
        
        return patterns;
    }
}

// 典型的内存泄漏示例
class LeakyAjaxManager {
    constructor() {
        this.pendingRequests = new Map();
        this.responseCache = []; // 无限增长的缓存
        this.eventListeners = new Map();
    }
    
    // 有问题的请求方法 - 会导致内存泄漏
    async leakyFetch(url) {
        const controller = new AbortController();
        
        // 存储控制器但从不清理
        this.pendingRequests.set(url, controller);
        
        try {
            const response = await fetch(url, {
                signal: controller.signal
            });
            const data = await response.json();
            
            // 无限积累缓存
            this.responseCache.push(data);
            
            return data;
        } catch (error) {
            console.error('请求失败:', error);
        }
        // 注意:这里没有从 pendingRequests 中移除控制器
    }
}

1.2 内存泄漏的监控与检测

class MemoryMonitor {
    constructor() {
        this.initialMemory = performance.memory?.usedJSHeapSize || 0;
        this.leakThreshold = 50 * 1024 * 1024; // 50MB
        this.checkInterval = 30000; // 30秒
        this.startMonitoring();
    }
    
    startMonitoring() {
        setInterval(() => {
            this.checkMemoryUsage();
        }, this.checkInterval);
    }
    
    checkMemoryUsage() {
        if (!performance.memory) return;
        
        const currentMemory = performance.memory.usedJSHeapSize;
        const usageMB = Math.round(currentMemory / 1024 / 1024);
        const initialMB = Math.round(this.initialMemory / 1024 / 1024);
        
        console.log(`内存使用: ${usageMB}MB (初始: ${initialMB}MB)`);
        
        // 检测内存泄漏
        if (currentMemory - this.initialMemory > this.leakThreshold) {
            console.warn('⚠️ 检测到可能的内存泄漏');
            this.analyzeMemorySnapshot();
        }
        
        // 强制垃圾回收(开发环境)
        if (currentMemory > 100 * 1024 * 1024) { // 100MB
            this.forceGarbageCollection();
        }
    }
    
    analyzeMemorySnapshot() {
        // 分析对象保留路径
        if (window.performance && window.performance.memory) {
            const memoryInfo = window.performance.memory;
            console.table({
                '已使用堆大小': `${Math.round(memoryInfo.usedJSHeapSize / 1024 / 1024)}MB`,
                '堆大小限制': `${Math.round(memoryInfo.jsHeapSizeLimit / 1024 / 1024)}MB`,
                '总堆大小': `${Math.round(memoryInfo.totalJSHeapSize / 1024 / 1024)}MB`
            });
        }
    }
    
    forceGarbageCollection() {
        // 注意:这仅在 Chrome 开发工具中有效
        if (window.gc) {
            window.gc();
            console.log('强制执行垃圾回收');
        }
    }
    
    // 创建内存快照对比
    async createMemorySnapshot(label) {
        if (window.performance && window.performance.memory) {
            return {
                label,
                timestamp: Date.now(),
                usedJSHeapSize: performance.memory.usedJSHeapSize,
                totalJSHeapSize: performance.memory.totalJSHeapSize
            };
        }
        return null;
    }
}

// 使用示例
const memoryMonitor = new MemoryMonitor();

2. 请求池与并发控制

2.1 智能请求池实现

class RequestPool {
    constructor(maxConcurrent = 6, timeout = 30000) {
        this.maxConcurrent = maxConcurrent;
        this.timeout = timeout;
        this.pending = new Map();
        this.queue = [];
        this.activeCount = 0;
        this.stats = {
            totalRequests: 0,
            successfulRequests: 0,
            failedRequests: 0,
            timedOutRequests: 0
        };
        
        // 自动清理过期的请求记录
        this.cleanupInterval = setInterval(() => {
            this.cleanupExpiredRequests();
        }, 60000); // 每分钟清理一次
    }
    
    // 添加请求到池中
    async addRequest(url, options = {}) {
        return new Promise((resolve, reject) => {
            const requestId = this.generateRequestId();
            const request = {
                id: requestId,
                url,
                options,
                resolve,
                reject,
                timestamp: Date.now(),
                status: 'queued'
            };
            
            this.stats.totalRequests++;
            
            if (this.activeCount < this.maxConcurrent) {
                this.executeRequest(request);
            } else {
                this.queue.push(request);
                console.log(`请求进入队列: ${url} (队列长度: ${this.queue.length})`);
            }
            
            // 设置超时
            this.setTimeout(requestId);
        });
    }
    
    // 执行请求
    async executeRequest(request) {
        this.activeCount++;
        request.status = 'active';
        this.pending.set(request.id, request);
        
        const controller = new AbortController();
        const timeoutId = setTimeout(() => {
            controller.abort();
        }, this.timeout);
        
        try {
            const response = await fetch(request.url, {
                ...request.options,
                signal: controller.signal
            });
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            
            const data = await response.json();
            
            clearTimeout(timeoutId);
            this.completeRequest(request.id, 'success');
            request.resolve(data);
            this.stats.successfulRequests++;
            
        } catch (error) {
            clearTimeout(timeoutId);
            this.completeRequest(request.id, 'error');
            request.reject(error);
            
            if (error.name === 'AbortError') {
                this.stats.timedOutRequests++;
            } else {
                this.stats.failedRequests++;
            }
        } finally {
            this.activeCount--;
            this.processQueue();
        }
    }
    
    // 完成请求处理
    completeRequest(requestId, status) {
        const request = this.pending.get(requestId);
        if (request) {
            request.status = status;
            request.completionTime = Date.now();
            
            // 短暂保留记录用于统计,然后清理
            setTimeout(() => {
                this.pending.delete(requestId);
            }, 5000); // 5秒后清理
        }
    }
    
    // 处理队列中的下一个请求
    processQueue() {
        if (this.queue.length > 0 && this.activeCount < this.maxConcurrent) {
            const nextRequest = this.queue.shift();
            console.log(`从队列中取出请求: ${nextRequest.url}`);
            this.executeRequest(nextRequest);
        }
    }
    
    // 设置请求超时
    setTimeout(requestId) {
        setTimeout(() => {
            const request = this.pending.get(requestId);
            if (request && request.status === 'active') {
                this.cancelRequest(requestId, 'timeout');
            }
        }, this.timeout);
    }
    
    // 取消请求
    cancelRequest(requestId, reason = 'cancelled') {
        const request = this.pending.get(requestId);
        if (request) {
            // 从队列中移除(如果在队列中)
            const queueIndex = this.queue.findIndex(req => req.id === requestId);
            if (queueIndex > -1) {
                this.queue.splice(queueIndex, 1);
            }
            
            this.pending.delete(requestId);
            request.reject(new Error(`请求被取消: ${reason}`));
            
            if (reason === 'timeout') {
                this.stats.timedOutRequests++;
            }
        }
    }
    
    // 清理过期请求记录
    cleanupExpiredRequests() {
        const now = Date.now();
        const expirationTime = 5 * 60 * 1000; // 5分钟
        
        for (const [requestId, request] of this.pending) {
            if (now - request.timestamp > expirationTime) {
                this.pending.delete(requestId);
            }
        }
    }
    
    // 生成唯一请求ID
    generateRequestId() {
        return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
    
    // 获取池状态
    getStatus() {
        return {
            active: this.activeCount,
            queued: this.queue.length,
            pending: this.pending.size,
            stats: { ...this.stats }
        };
    }
    
    // 销毁池,清理所有资源
    destroy() {
        clearInterval(this.cleanupInterval);
        
        // 取消所有待处理请求
        for (const requestId of this.pending.keys()) {
            this.cancelRequest(requestId, 'pool_destroyed');
        }
        
        // 清空队列
        this.queue.length = 0;
        this.pending.clear();
    }
}

// 使用示例
const requestPool = new RequestPool(4, 10000); // 最大4个并发,10秒超时

// 批量请求示例
async function batchRequests(urls) {
    const requests = urls.map(url => 
        requestPool.addRequest(url, {
            headers: { 'Content-Type': 'application/json' }
        })
    );
    
    try {
        const results = await Promise.allSettled(requests);
        
        const successful = results.filter(r => r.status === 'fulfilled');
        const failed = results.filter(r => r.status === 'rejected');
        
        console.log(`批量请求完成: ${successful.length} 成功, ${failed.length} 失败`);
        console.log('请求池状态:', requestPool.getStatus());
        
        return {
            successful: successful.map(r => r.value),
            failed: failed.map(r => r.reason)
        };
    } catch (error) {
        console.error('批量请求错误:', error);
        throw error;
    }
}

2.2 优先级请求队列

class PriorityRequestPool extends RequestPool {
    constructor(maxConcurrent = 6, timeout = 30000) {
        super(maxConcurrent, timeout);
        this.priorityQueues = {
            high: [],
            normal: [],
            low: []
        };
    }
    
    // 添加优先级请求
    async addPriorityRequest(url, options = {}, priority = 'normal') {
        return new Promise((resolve, reject) => {
            const requestId = this.generateRequestId();
            const request = {
                id: requestId,
                url,
                options,
                resolve,
                reject,
                timestamp: Date.now(),
                status: 'queued',
                priority
            };
            
            this.stats.totalRequests++;
            
            // 根据优先级添加到不同队列
            this.addToPriorityQueue(request, priority);
            
            if (this.activeCount < this.maxConcurrent) {
                this.executeNextRequest();
            }
            
            this.setTimeout(requestId);
        });
    }
    
    // 添加到优先级队列
    addToPriorityQueue(request, priority) {
        this.priorityQueues[priority].push(request);
        
        // 重新排序队列(高优先级在前)
        this.reorderQueue();
    }
    
    // 重新排序队列
    reorderQueue() {
        this.queue = [
            ...this.priorityQueues.high,
            ...this.priorityQueues.normal,
            ...this.priorityQueues.low
        ];
    }
    
    // 执行下一个请求(考虑优先级)
    executeNextRequest() {
        let nextRequest = null;
        
        // 按优先级查找下一个请求
        if (this.priorityQueues.high.length > 0) {
            nextRequest = this.priorityQueues.high.shift();
        } else if (this.priorityQueues.normal.length > 0) {
            nextRequest = this.priorityQueues.normal.shift();
        } else if (this.priorityQueues.low.length > 0) {
            nextRequest = this.priorityQueues.low.shift();
        }
        
        if (nextRequest) {
            this.executeRequest(nextRequest);
        }
    }
    
    // 重写处理队列方法
    processQueue() {
        this.reorderQueue();
        super.processQueue();
    }
    
    // 重写取消请求方法
    cancelRequest(requestId, reason = 'cancelled') {
        // 从所有优先级队列中移除
        Object.keys(this.priorityQueues).forEach(priority => {
            const index = this.priorityQueues[priority].findIndex(req => req.id === requestId);
            if (index > -1) {
                this.priorityQueues[priority].splice(index, 1);
            }
        });
        
        super.cancelRequest(requestId, reason);
    }
    
    // 获取详细的队列状态
    getDetailedStatus() {
        const baseStatus = super.getStatus();
        return {
            ...baseStatus,
            priorityQueues: {
                high: this.priorityQueues.high.length,
                normal: this.priorityQueues.normal.length,
                low: this.priorityQueues.low.length
            }
        };
    }
}

// 使用示例
const priorityPool = new PriorityRequestPool(3, 15000);

// 不同优先级的请求
async function makePriorityRequests() {
    const highPriority = priorityPool.addPriorityRequest(
        '/api/critical-data',
        { method: 'GET' },
        'high'
    );
    
    const normalPriority = priorityPool.addPriorityRequest(
        '/api/user-data',
        { method: 'GET' },
        'normal'
    );
    
    const lowPriority = priorityPool.addPriorityRequest(
        '/api/analytics',
        { method: 'GET' },
        'low'
    );
    
    const results = await Promise.allSettled([
        highPriority, normalPriority, lowPriority
    ]);
    
    console.log('优先级请求池状态:', priorityPool.getDetailedStatus());
    return results;
}

3. 内存管理与资源回收

3.1 请求生命周期管理

class RequestLifecycleManager {
    constructor() {
        this.requestRegistry = new Map();
        this.responseCache = new Map();
        this.cacheMaxSize = 100; // 最大缓存条目数
        this.cacheExpiry = 5 * 60 * 1000; // 5分钟缓存过期
        
        // 定期清理
        this.cleanupInterval = setInterval(() => {
            this.cleanupExpiredResources();
        }, 30000); // 每30秒清理一次
    }
    
    // 注册新请求
    registerRequest(requestId, config = {}) {
        const requestInfo = {
            id: requestId,
            config,
            timestamp: Date.now(),
            status: 'pending',
            memoryUsage: this.estimateMemoryUsage(config),
            cleanupCallbacks: []
        };
        
        this.requestRegistry.set(requestId, requestInfo);
        return requestInfo;
    }
    
    // 估算内存使用量
    estimateMemoryUsage(config) {
        let size = 0;
        
        // 估算 headers 大小
        if (config.headers) {
            size += JSON.stringify(config.headers).length;
        }
        
        // 估算 body 大小
        if (config.body) {
            if (typeof config.body === 'string') {
                size += config.body.length;
            } else if (config.body instanceof FormData) {
                // FormData 大小估算较复杂,这里简化处理
                size += 1024; // 1KB 估计值
            } else {
                size += JSON.stringify(config.body).length;
            }
        }
        
        return size;
    }
    
    // 请求完成处理
    completeRequest(requestId, result, error = null) {
        const requestInfo = this.requestRegistry.get(requestId);
        if (!requestInfo) return;
        
        requestInfo.status = error ? 'failed' : 'completed';
        requestInfo.completionTime = Date.now();
        requestInfo.error = error;
        requestInfo.result = result;
        
        // 设置自动清理定时器
        this.scheduleCleanup(requestId);
    }
    
    // 安排资源清理
    scheduleCleanup(requestId) {
        const requestInfo = this.requestRegistry.get(requestId);
        if (!requestInfo) return;
        
        // 根据请求类型设置不同的清理延迟
        const cleanupDelay = this.getCleanupDelay(requestInfo);
        
        setTimeout(() => {
            this.cleanupRequestResources(requestId);
        }, cleanupDelay);
    }
    
    // 获取清理延迟时间
    getCleanupDelay(requestInfo) {
        const config = requestInfo.config || {};
        
        // 大文件上传/下载需要更长时间清理
        if (config.isLargeFile) {
            return 2 * 60 * 1000; // 2分钟
        }
        
        // 错误请求可以更快清理
        if (requestInfo.status === 'failed') {
            return 30000; // 30秒
        }
        
        return 60000; // 默认1分钟
    }
    
    // 清理请求资源
    cleanupRequestResources(requestId) {
        const requestInfo = this.requestRegistry.get(requestId);
        if (!requestInfo) return;
        
        console.log(`清理请求资源: ${requestId}`);
        
        // 执行所有清理回调
        requestInfo.cleanupCallbacks.forEach(callback => {
            try {
                callback();
            } catch (error) {
                console.error('清理回调执行失败:', error);
            }
        });
        
        // 清理大对象引用
        requestInfo.config = null;
        requestInfo.result = null;
        requestInfo.error = null;
        
        // 从注册表中移除
        this.requestRegistry.delete(requestId);
    }
    
    // 添加清理回调
    addCleanupCallback(requestId, callback) {
        const requestInfo = this.requestRegistry.get(requestId);
        if (requestInfo) {
            requestInfo.cleanupCallbacks.push(callback);
        }
    }
    
    // 缓存响应数据
    cacheResponse(cacheKey, data, expiry = this.cacheExpiry) {
        // 如果缓存已满,移除最旧的条目
        if (this.responseCache.size >= this.cacheMaxSize) {
            const oldestKey = this.responseCache.keys().next().value;
            this.responseCache.delete(oldestKey);
        }
        
        this.responseCache.set(cacheKey, {
            data,
            timestamp: Date.now(),
            expiry
        });
    }
    
    // 获取缓存响应
    getCachedResponse(cacheKey) {
        const cached = this.responseCache.get(cacheKey);
        
        if (!cached) return null;
        
        // 检查是否过期
        if (Date.now() - cached.timestamp > cached.expiry) {
            this.responseCache.delete(cacheKey);
            return null;
        }
        
        return cached.data;
    }
    
    // 清理过期资源
    cleanupExpiredResources() {
        const now = Date.now();
        
        // 清理过期缓存
        for (const [key, cached] of this.responseCache) {
            if (now - cached.timestamp > cached.expiry) {
                this.responseCache.delete(key);
            }
        }
        
        // 清理长时间挂起的请求
        for (const [requestId, requestInfo] of this.requestRegistry) {
            if (requestInfo.status === 'pending' && 
                now - requestInfo.timestamp > 10 * 60 * 1000) { // 10分钟
                console.warn(`强制清理挂起请求: ${requestId}`);
                this.cleanupRequestResources(requestId);
            }
        }
    }
    
    // 获取内存使用统计
    getMemoryStatistics() {
        let totalMemory = 0;
        let pendingRequests = 0;
        let completedRequests = 0;
        
        for (const requestInfo of this.requestRegistry.values()) {
            totalMemory += requestInfo.memoryUsage || 0;
            if (requestInfo.status === 'pending') {
                pendingRequests++;
            } else {
                completedRequests++;
            }
        }
        
        return {
            totalRequests: this.requestRegistry.size,
            pendingRequests,
            completedRequests,
            estimatedMemoryUsage: `${Math.round(totalMemory / 1024)}KB`,
            cacheSize: this.responseCache.size
        };
    }
    
    // 销毁管理器
    destroy() {
        clearInterval(this.cleanupInterval);
        
        // 清理所有资源
        for (const requestId of this.requestRegistry.keys()) {
            this.cleanupRequestResources(requestId);
        }
        
        this.responseCache.clear();
    }
}

// 使用示例
const lifecycleManager = new RequestLifecycleManager();

// 包装 fetch 请求,添加生命周期管理
async function managedFetch(url, options = {}) {
    const requestId = `fetch_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    
    // 注册请求
    const requestInfo = lifecycleManager.registerRequest(requestId, {
        url,
        ...options
    });
    
    try {
        const controller = new AbortController();
        
        // 添加清理回调:取消请求
        lifecycleManager.addCleanupCallback(requestId, () => {
            controller.abort();
        });
        
        const response = await fetch(url, {
            ...options,
            signal: controller.signal
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        const data = await response.json();
        
        // 标记请求完成
        lifecycleManager.completeRequest(requestId, data);
        
        return data;
        
    } catch (error) {
        // 标记请求失败
        lifecycleManager.completeRequest(requestId, null, error);
        throw error;
    }
}

3.2 响应数据内存优化

class ResponseMemoryOptimizer {
    constructor() {
        this.optimizationStrategies = new Map();
        this.setupDefaultStrategies();
    }
    
    setupDefaultStrategies() {
        // 大数组优化策略
        this.optimizationStrategies.set('largeArray', {
            shouldOptimize: (data) => Array.isArray(data) && data.length > 1000,
            optimize: (data) => this.optimizeLargeArray(data),
            restore: (optimized) => this.restoreLargeArray(optimized)
        });
        
        // 大对象优化策略
        this.optimizationStrategies.set('largeObject', {
            shouldOptimize: (data) => 
                typeof data === 'object' && 
                data !== null && 
                Object.keys(data).length > 50,
            optimize: (data) => this.optimizeLargeObject(data),
            restore: (optimized) => this.restoreLargeObject(optimized)
        });
        
        // 二进制数据优化
        this.optimizationStrategies.set('binaryData', {
            shouldOptimize: (data) => data instanceof ArrayBuffer,
            optimize: (data) => this.optimizeBinaryData(data),
            restore: (optimized) => this.restoreBinaryData(optimized)
        });
    }
    
    // 优化大数组 - 使用分页和懒加载
    optimizeLargeArray(array) {
        const chunkSize = 100;
        const chunks = [];
        
        for (let i = 0; i < array.length; i += chunkSize) {
            chunks.push(array.slice(i, i + chunkSize));
        }
        
        return {
            type: 'optimizedArray',
            totalLength: array.length,
            chunkSize,
            chunks,
            loadedChunks: new Set([0]) // 默认加载第一块
        };
    }
    
    restoreLargeArray(optimized) {
        // 只恢复已加载的块
        const result = [];
        for (const chunkIndex of optimized.loadedChunks) {
            if (optimized.chunks[chunkIndex]) {
                result.push(...optimized.chunks[chunkIndex]);
            }
        }
        return result;
    }
    
    // 加载特定块
    loadArrayChunk(optimizedArray, chunkIndex) {
        if (chunkIndex >= 0 && chunkIndex < optimizedArray.chunks.length) {
            optimizedArray.loadedChunks.add(chunkIndex);
            return optimizedArray.chunks[chunkIndex];
        }
        return null;
    }
    
    // 优化大对象 - 使用属性懒加载
    optimizeLargeObject(obj) {
        const properties = Object.keys(obj);
        const importantProps = properties.slice(0, 10); // 前10个属性立即加载
        const lazyProps = properties.slice(10);
        
        const optimized = {
            type: 'optimizedObject',
            immediate: {},
            lazy: {},
            totalProperties: properties.length
        };
        
        // 重要属性立即加载
        importantProps.forEach(prop => {
            optimized.immediate[prop] = obj[prop];
        });
        
        // 其他属性延迟加载
        lazyProps.forEach(prop => {
            optimized.lazy[prop] = obj[prop];
        });
        
        return optimized;
    }
    
    restoreLargeObject(optimized) {
        return {
            ...optimized.immediate,
            ...optimized.lazy
        };
    }
    
    // 优化二进制数据 - 使用 Blob URL
    optimizeBinaryData(arrayBuffer) {
        const blob = new Blob([arrayBuffer]);
        const blobUrl = URL.createObjectURL(blob);
        
        return {
            type: 'optimizedBinary',
            blobUrl,
            size: arrayBuffer.byteLength,
            originalType: 'ArrayBuffer'
        };
    }
    
    restoreBinaryData(optimized) {
        // 在实际使用时再通过 fetch(blobUrl) 获取数据
        return optimized.blobUrl;
    }
    
    // 自动优化数据
    optimizeData(data) {
        for (const [strategyName, strategy] of this.optimizationStrategies) {
            if (strategy.shouldOptimize(data)) {
                console.log(`应用优化策略: ${strategyName}`);
                return {
                    optimized: strategy.optimize(data),
                    strategy: strategyName,
                    restore: strategy.restore
                };
            }
        }
        
        // 无需优化
        return {
            optimized: data,
            strategy: 'none',
            restore: (data) => data
        };
    }
    
    // 计算优化节省的内存
    calculateMemorySavings(original, optimized) {
        const originalSize = this.estimateObjectSize(original);
        const optimizedSize = this.estimateObjectSize(optimized);
        
        return {
            original: originalSize,
            optimized: optimizedSize,
            saved: originalSize - optimizedSize,
            savingsPercent: ((originalSize - optimizedSize) / originalSize * 100).toFixed(1)
        };
    }
    
    estimateObjectSize(obj) {
        const jsonString = JSON.stringify(obj);
        return new TextEncoder().encode(jsonString).length;
    }
}

// 使用示例
const memoryOptimizer = new ResponseMemoryOptimizer();

// 优化大响应数据
async function fetchAndOptimizeLargeData(url) {
    const response = await fetch(url);
    const data = await response.json();
    
    const optimizationResult = memoryOptimizer.optimizeData(data);
    const savings = memoryOptimizer.calculateMemorySavings(data, optimizationResult.optimized);
    
    console.log(`内存优化效果: 节省 ${savings.savingsPercent}% (${savings.saved} bytes)`);
    
    return optimizationResult;
}

// 使用优化后的数据
function useOptimizedData(optimizationResult) {
    // 在需要完整数据时恢复
    const fullData = optimizationResult.restore(optimizationResult.optimized);
    return fullData;
}

4. 防抖、节流与请求取消

4.1 智能请求防抖与节流

class RequestThrottler {
    constructor() {
        this.requestHistory = new Map();
        this.throttleRules = new Map();
        this.debounceTimers = new Map();
        
        this.setupDefaultRules();
    }
    
    setupDefaultRules() {
        // 默认节流规则
        this.throttleRules.set('search', {
            type: 'debounce',
            delay: 300,
            maxPerMinute: 30
        });
        
        this.throttleRules.set('analytics', {
            type: 'throttle', 
            interval: 1000,
            maxPerMinute: 60
        });
        
        this.throttleRules.set('api', {
            type: 'throttle',
            interval: 200,
            maxPerMinute: 300
        });
    }
    
    // 添加自定义规则
    addRule(endpoint, rule) {
        this.throttleRules.set(endpoint, rule);
    }
    
    // 智能节流请求
    async throttledRequest(endpoint, requestFn, ...args) {
        const rule = this.throttleRules.get(endpoint) || this.throttleRules.get('api');
        
        if (!rule) {
            return requestFn(...args);
        }
        
        // 检查频率限制
        if (!this.checkRateLimit(endpoint, rule)) {
            throw new Error(`频率限制: ${endpoint}`);
        }
        
        switch (rule.type) {
            case 'debounce':
                return this.debounceRequest(endpoint, requestFn, rule.delay, ...args);
            case 'throttle':
                return this.throttleRequest(endpoint, requestFn, rule.interval, ...args);
            default:
                return requestFn(...args);
        }
    }
    
    // 防抖实现
    debounceRequest(endpoint, requestFn, delay, ...args) {
        return new Promise((resolve, reject) => {
            const key = `${endpoint}_${JSON.stringify(args)}`;
            
            // 清除之前的定时器
            if (this.debounceTimers.has(key)) {
                clearTimeout(this.debounceTimers.get(key));
            }
            
            // 设置新的定时器
            const timer = setTimeout(async () => {
                try {
                    this.recordRequest(endpoint);
                    const result = await requestFn(...args);
                    resolve(result);
                } catch (error) {
                    reject(error);
                } finally {
                    this.debounceTimers.delete(key);
                }
            }, delay);
            
            this.debounceTimers.set(key, timer);
        });
    }
    
    // 节流实现
    throttleRequest(endpoint, requestFn, interval, ...args) {
        return new Promise((resolve, reject) => {
            const now = Date.now();
            const lastRequest = this.requestHistory.get(endpoint);
            
            if (lastRequest && now - lastRequest.lastCall < interval) {
                // 在间隔期内,拒绝请求或加入队列
                reject(new Error(`节流限制: 请等待 ${interval - (now - lastRequest.lastCall)}ms`));
                return;
            }
            
            this.recordRequest(endpoint);
            
            requestFn(...args)
                .then(resolve)
                .catch(reject);
        });
    }
    
    // 检查频率限制
    checkRateLimit(endpoint, rule) {
        const history = this.requestHistory.get(endpoint);
        
        if (!history) return true;
        
        const now = Date.now();
        const minuteAgo = now - 60000;
        
        // 过滤出最近一分钟的请求
        const recentRequests = history.requests.filter(time => time > minuteAgo);
        
        if (recentRequests.length >= rule.maxPerMinute) {
            return false;
        }
        
        return true;
    }
    
    // 记录请求历史
    recordRequest(endpoint) {
        const now = Date.now();
        
        if (!this.requestHistory.has(endpoint)) {
            this.requestHistory.set(endpoint, {
                lastCall: now,
                requests: [now]
            });
        } else {
            const history = this.requestHistory.get(endpoint);
            history.lastCall = now;
            history.requests.push(now);
            
            // 保持最近100条记录
            if (history.requests.length > 100) {
                history.requests = history.requests.slice(-50);
            }
        }
    }
    
    // 清理过期的历史记录
    cleanupHistory() {
        const now = Date.now();
        const tenMinutesAgo = now - 10 * 60 * 1000;
        
        for (const [endpoint, history] of this.requestHistory) {
            history.requests = history.requests.filter(time => time > tenMinutesAgo);
            
            // 如果没有最近请求,删除记录
            if (history.requests.length === 0) {
                this.requestHistory.delete(endpoint);
            }
        }
        
        // 清理过期的防抖定时器
        for (const [key, timer] of this.debounceTimers) {
            // 定时器会自动清理,这里只是检查泄漏
            if (Date.now() - parseInt(key.split('_')[1]) > 60000) {
                clearTimeout(timer);
                this.debounceTimers.delete(key);
            }
        }
    }
    
    // 获取节流统计
    getThrottleStats() {
        const stats = {};
        
        for (const [endpoint, history] of this.requestHistory) {
            const minuteAgo = Date.now() - 60000;
            const recentCount = history.requests.filter(time => time > minuteAgo).length;
            
            stats[endpoint] = {
                totalRequests: history.requests.length,
                recentRequests: recentCount,
                lastRequest: new Date(history.lastCall).toISOString()
            };
        }
        
        return stats;
    }
}

// 使用示例
const throttler = new RequestThrottler();

// 搜索防抖示例
async function searchProducts(query) {
    return throttler.throttledRequest('search', async () => {
        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
        return response.json();
    }, query);
}

// 定期清理历史记录
setInterval(() => {
    throttler.cleanupHistory();
}, 60000);

4.2 请求取消与资源释放

class RequestCancellationManager {
    constructor() {
        this.cancelableRequests = new Map();
        this.cancelTokens = new Map();
    }
    
    // 创建可取消的请求
    createCancelableRequest(requestId, requestFn) {
        const controller = new AbortController();
        
        this.cancelableRequests.set(requestId, {
            controller,
            timestamp: Date.now(),
            status: 'pending'
        });
        
        // 返回包装的 Promise
        return new Promise(async (resolve, reject) => {
            try {
                const result = await requestFn(controller.signal);
                
                // 请求完成,清理资源
                this.completeRequest(requestId);
                resolve(result);
                
            } catch (error) {
                if (error.name === 'AbortError') {
                    reject(new Error(`请求已被取消: ${requestId}`));
                } else {
                    reject(error);
                }
                
                this.completeRequest(requestId);
            }
        });
    }
    
    // 取消单个请求
    cancelRequest(requestId, reason = 'user_cancelled') {
        const request = this.cancelableRequests.get(requestId);
        
        if (request && request.status === 'pending') {
            console.log(`取消请求: ${requestId} (原因: ${reason})`);
            request.controller.abort();
            request.status = 'cancelled';
            request.cancellationReason = reason;
            request.cancellationTime = Date.now();
            
            // 延迟清理,以便可以查询取消状态
            setTimeout(() => {
                this.cleanupRequest(requestId);
            }, 5000);
            
            return true;
        }
        
        return false;
    }
    
    // 取消一组请求
    cancelRequestGroup(groupId) {
        let cancelledCount = 0;
        
        for (const [requestId, request] of this.cancelableRequests) {
            if (requestId.startsWith(groupId) && request.status === 'pending') {
                if (this.cancelRequest(requestId, 'group_cancellation')) {
                    cancelledCount++;
                }
            }
        }
        
        console.log(`取消请求组 ${groupId}: ${cancelledCount} 个请求被取消`);
        return cancelledCount;
    }
    
    // 取消所有待处理请求
    cancelAllPendingRequests(reason = 'bulk_cancellation') {
        let cancelledCount = 0;
        
        for (const [requestId, request] of this.cancelableRequests) {
            if (request.status === 'pending') {
                if (this.cancelRequest(requestId, reason)) {
                    cancelledCount++;
                }
            }
        }
        
        console.log(`取消所有待处理请求: ${cancelledCount} 个请求被取消`);
        return cancelledCount;
    }
    
    // 完成请求处理
    completeRequest(requestId) {
        const request = this.cancelableRequests.get(requestId);
        if (request) {
            request.status = 'completed';
            request.completionTime = Date.now();
            
            // 短期保留记录后清理
            setTimeout(() => {
                this.cleanupRequest(requestId);
            }, 30000); // 30秒后清理
        }
    }
    
    // 清理请求资源
    cleanupRequest(requestId) {
        const request = this.cancelableRequests.get(requestId);
        if (request) {
            // 释放 AbortController
            request.controller = null;
            this.cancelableRequests.delete(requestId);
            console.log(`清理请求资源: ${requestId}`);
        }
    }
    
    // 创建取消令牌(用于跨组件通信)
    createCancelToken(tokenId) {
        const controller = new AbortController();
        this.cancelTokens.set(tokenId, controller);
        return controller.signal;
    }
    
    // 通过令牌取消请求
    cancelByToken(tokenId, reason = 'token_cancellation') {
        const controller = this.cancelTokens.get(tokenId);
        if (controller) {
            console.log(`通过令牌取消请求: ${tokenId}`);
            controller.abort();
            this.cancelTokens.delete(tokenId);
            return true;
        }
        return false;
    }
    
    // 获取请求状态
    getRequestStatus(requestId) {
        const request = this.cancelableRequests.get(requestId);
        return request ? {
            status: request.status,
            timestamp: request.timestamp,
            cancellationReason: request.cancellationReason,
            cancellationTime: request.cancellationTime,
            completionTime: request.completionTime
        } : null;
    }
    
    // 获取所有请求状态
    getAllRequestsStatus() {
        const status = {};
        
        for (const [requestId, request] of this.cancelableRequests) {
            status[requestId] = this.getRequestStatus(requestId);
        }
        
        return status;
    }
    
    // 定期清理过期请求记录
    cleanupExpiredRequests() {
        const now = Date.now();
        const expirationTime = 5 * 60 * 1000; // 5分钟
        
        for (const [requestId, request] of this.cancelableRequests) {
            if (now - request.timestamp > expirationTime) {
                this.cleanupRequest(requestId);
            }
        }
    }
    
    // 销毁管理器
    destroy() {
        // 取消所有待处理请求
        this.cancelAllPendingRequests('manager_destroyed');
        
        // 清理所有令牌
        for (const [tokenId, controller] of this.cancelTokens) {
            controller.abort();
        }
        this.cancelTokens.clear();
        
        console.log('请求取消管理器已销毁');
    }
}

// 使用示例
const cancellationManager = new RequestCancellationManager();

// 可取消的请求示例
async function fetchWithCancellation(url, options = {}) {
    const requestId = `fetch_${Date.now()}`;
    
    return cancellationManager.createCancelableRequest(requestId, async (signal) => {
        const response = await fetch(url, {
            ...options,
            signal
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        return response.json();
    });
}

// 在组件中使用
class DataFetcher {
    constructor() {
        this.currentRequestId = null;
    }
    
    async fetchData() {
        this.currentRequestId = `data_fetch_${Date.now()}`;
        
        try {
            const data = await fetchWithCancellation('/api/data', {
                method: 'GET'
            });
            console.log('数据获取成功:', data);
            return data;
        } catch (error) {
            if (error.message.includes('取消')) {
                console.log('请求被用户取消');
            } else {
                console.error('数据获取失败:', error);
            }
            throw error;
        }
    }
    
    cancelCurrentRequest() {
        if (this.currentRequestId) {
            cancellationManager.cancelRequest(this.currentRequestId, 'user_action');
            this.currentRequestId = null;
        }
    }
}

5. 性能监控与自动优化

5.1 请求性能监控系统

class RequestPerformanceMonitor {
    constructor() {
        this.metrics = new Map();
        this.thresholds = {
            slowRequest: 1000, // 1秒
            verySlowRequest: 5000, // 5秒
            memoryWarning: 50 * 1024 * 1024, // 50MB
            highConcurrency: 10
        };
        
        this.performanceObserver = null;
        this.setupPerformanceObserver();
    }
    
    setupPerformanceObserver() {
        if ('PerformanceObserver' in window) {
            this.performanceObserver = new PerformanceObserver((list) => {
                list.getEntries().forEach(entry => {
                    if (entry.entryType === 'resource') {
                        this.recordResourceTiming(entry);
                    }
                });
            });
            
            this.performanceObserver.observe({
                entryTypes: ['resource']
            });
        }
    }
    
    // 记录资源加载时间
    recordResourceTiming(entry) {
        const url = entry.name;
        const duration = entry.duration;
        
        if (!this.metrics.has(url)) {
            this.metrics.set(url, {
                count: 0,
                totalDuration: 0,
                durations: [],
                lastDuration: 0
            });
        }
        
        const metric = this.metrics.get(url);
        metric.count++;
        metric.totalDuration += duration;
        metric.durations.push(duration);
        metric.lastDuration = duration;
        metric.lastAccess = Date.now();
        
        // 保持最近100次记录
        if (metric.durations.length > 100) {
            metric.durations = metric.durations.slice(-50);
        }
        
        // 检查性能问题
        this.checkPerformanceIssues(url, metric, duration);
    }
    
    // 检查性能问题
    checkPerformanceIssues(url, metric, duration) {
        // 慢请求检测
        if (duration > this.thresholds.slowRequest) {
            console.warn(`慢请求检测: ${url} (${duration.toFixed(2)}ms)`);
            
            if (duration > this.thresholds.verySlowRequest) {
                this.reportPerformanceIssue('very_slow_request', {
                    url,
                    duration,
                    average: metric.totalDuration / metric.count
                });
            }
        }
        
        // 高频率请求检测
        if (metric.count > 100) {
            const recentCount = metric.durations.length;
            const averageInterval = this.thresholds.slowRequest / recentCount;
            
            if (averageInterval < 100) { // 平均间隔小于100ms
                console.warn(`高频率请求: ${url} (${recentCount} 次)`);
                this.reportPerformanceIssue('high_frequency_request', {
                    url,
                    requestCount: metric.count,
                    recentCount
                });
            }
        }
    }
    
    // 报告性能问题
    reportPerformanceIssue(type, data) {
        const issue = {
            type,
            timestamp: Date.now(),
            data,
            userAgent: navigator.userAgent,
            memory: performance.memory ? {
                used: performance.memory.usedJSHeapSize,
                total: performance.memory.totalJSHeapSize
            } : null
        };
        
        // 发送到监控服务
        this.sendToMonitoringService(issue);
        
        // 本地存储用于分析
        this.storeIssueLocally(issue);
    }
    
    sendToMonitoringService(issue) {
        // 实际项目中这里会发送到监控系统
        console.log('性能问题报告:', issue);
        
        // 示例:发送到分析端点
        fetch('/api/performance-issues', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(issue)
        }).catch(console.error);
    }
    
    storeIssueLocally(issue) {
        const issues = JSON.parse(localStorage.getItem('performance_issues') || '[]');
        issues.push(issue);
        
        // 只保留最近100个问题
        if (issues.length > 100) {
            issues.splice(0, issues.length - 100);
        }
        
        localStorage.setItem('performance_issues', JSON.stringify(issues));
    }
    
    // 获取性能统计
    getPerformanceStats() {
        const stats = {};
        const now = Date.now();
        const oneHourAgo = now - 60 * 60 * 1000;
        
        for (const [url, metric] of this.metrics) {
            // 只考虑最近活跃的URL
            if (metric.lastAccess > oneHourAgo) {
                const average = metric.totalDuration / metric.count;
                const max = Math.max(...metric.durations);
                const min = Math.min(...metric.durations);
                
                stats[url] = {
                    requestCount: metric.count,
                    averageDuration: Math.round(average),
                    minDuration: Math.round(min),
                    maxDuration: Math.round(max),
                    lastDuration: Math.round(metric.lastDuration)
                };
            }
        }
        
        return stats;
    }
    
    // 获取性能建议
    getPerformanceSuggestions() {
        const suggestions = [];
        const stats = this.getPerformanceStats();
        
        for (const [url, data] of Object.entries(stats)) {
            // 慢请求建议
            if (data.averageDuration > this.thresholds.slowRequest) {
                suggestions.push({
                    type: 'slow_request',
                    url,
                    severity: data.averageDuration > 3000 ? 'high' : 'medium',
                    message: `请求平均耗时 ${data.averageDuration}ms,考虑优化API或添加缓存`,
                    averageDuration: data.averageDuration
                });
            }
            
            // 高频请求建议
            if (data.requestCount > 50) {
                suggestions.push({
                    type: 'high_frequency',
                    url,
                    severity: 'medium',
                    message: `该端点被请求 ${data.requestCount} 次,考虑使用防抖或缓存`,
                    requestCount: data.requestCount
                });
            }
        }
        
        return suggestions;
    }
    
    // 清理旧数据
    cleanupOldData() {
        const now = Date.now();
        const oneDayAgo = now - 24 * 60 * 60 * 1000;
        
        for (const [url, metric] of this.metrics) {
            if (metric.lastAccess < oneDayAgo) {
                this.metrics.delete(url);
            }
        }
    }
    
    // 销毁监控器
    destroy() {
        if (this.performanceObserver) {
            this.performanceObserver.disconnect();
        }
    }
}

// 使用示例
const performanceMonitor = new RequestPerformanceMonitor();

// 定期获取性能报告
setInterval(() => {
    const stats = performanceMonitor.getPerformanceStats();
    const suggestions = performanceMonitor.getPerformanceSuggestions();
    
    if (suggestions.length > 0) {
        console.log('性能优化建议:', suggestions);
    }
}, 30000); // 每30秒检查一次

// 定期清理旧数据
setInterval(() => {
    performanceMonitor.cleanupOldData();
}, 60 * 60 * 1000); // 每小时清理一次

6. 综合解决方案

6.1 完整的 Ajax 内存管理解决方案

class AjaxMemoryManager {
    constructor(config = {}) {
        this.config = {
            maxConcurrent: 6,
            requestTimeout: 30000,
            cacheSize: 100,
            cleanupInterval: 30000,
            memoryThreshold: 100 * 1024 * 1024, // 100MB
            ...config
        };
        
        // 初始化各个组件
        this.requestPool = new RequestPool(
            this.config.maxConcurrent, 
            this.config.requestTimeout
        );
        
        this.lifecycleManager = new RequestLifecycleManager();
        this.memoryOptimizer = new ResponseMemoryOptimizer();
        this.cancellationManager = new RequestCancellationManager();
        this.performanceMonitor = new RequestPerformanceMonitor();
        this.memoryMonitor = new MemoryMonitor();
        
        this.setupAutomaticCleanup();
    }
    
    // 设置自动清理
    setupAutomaticCleanup() {
        // 定期清理
        this.cleanupInterval = setInterval(() => {
            this.performCleanup();
        }, this.config.cleanupInterval);
        
        // 内存监控
        this.memoryCheckInterval = setInterval(() => {
            this.checkMemoryUsage();
        }, 10000);
        
        // 页面可见性变化时的清理
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                this.cleanupOnBackground();
            }
        });
    }
    
    // 执行综合清理
    performCleanup() {
        console.log('执行综合内存清理...');
        
        // 清理过期的请求记录
        this.lifecycleManager.cleanupExpiredResources();
        
        // 清理取消管理器的过期记录
        this.cancellationManager.cleanupExpiredRequests();
        
        // 清理性能监控的旧数据
        this.performanceMonitor.cleanupOldData();
        
        // 强制垃圾回收(开发环境)
        if (window.gc) {
            window.gc();
        }
    }
    
    // 检查内存使用
    checkMemoryUsage() {
        if (!performance.memory) return;
        
        const usedMemory = performance.memory.usedJSHeapSize;
        
        if (usedMemory > this.config.memoryThreshold) {
            console.warn('内存使用超过阈值,执行紧急清理');
            this.emergencyCleanup();
        }
    }
    
    // 紧急内存清理
    emergencyCleanup() {
        // 取消所有待处理请求
        const cancelledCount = this.cancellationManager.cancelAllPendingRequests('memory_emergency');
        console.log(`紧急清理: 取消了 ${cancelledCount} 个请求`);
        
        // 清空缓存
        this.lifecycleManager.responseCache.clear();
        
        // 强制垃圾回收
        if (window.gc) {
            window.gc();
        }
    }
    
    // 后台时的清理
    cleanupOnBackground() {
        console.log('页面进入后台,优化资源使用');
        
        // 取消低优先级请求
        this.cancellationManager.cancelRequestGroup('low_priority');
        
        // 减少并发数
        this.requestPool.maxConcurrent = Math.max(1, this.config.maxConcurrent / 2);
    }
    
    // 主要的请求方法
    async request(url, options = {}) {
        const requestId = this.generateRequestId();
        
        // 注册请求生命周期
        const requestInfo = this.lifecycleManager.registerRequest(requestId, {
            url,
            ...options
        });
        
        try {
            // 通过请求池执行
            const data = await this.requestPool.addRequest(url, options);
            
            // 优化内存使用
            const optimizedData = this.memoryOptimizer.optimizeData(data);
            
            // 记录完成
            this.lifecycleManager.completeRequest(requestId, optimizedData);
            
            return optimizedData;
            
        } catch (error) {
            this.lifecycleManager.completeRequest(requestId, null, error);
            throw error;
        }
    }
    
    // 带优先级的请求
    async priorityRequest(url, options = {}, priority = 'normal') {
        if (!this.priorityPool) {
            this.priorityPool = new PriorityRequestPool(
                this.config.maxConcurrent,
                this.config.requestTimeout
            );
        }
        
        const requestId = this.generateRequestId();
        this.lifecycleManager.registerRequest(requestId, { url, ...options });
        
        try {
            const data = await this.priorityPool.addPriorityRequest(url, options, priority);
            const optimizedData = this.memoryOptimizer.optimizeData(data);
            
            this.lifecycleManager.completeRequest(requestId, optimizedData);
            return optimizedData;
            
        } catch (error) {
            this.lifecycleManager.completeRequest(requestId, null, error);
            throw error;
        }
    }
    
    // 取消请求
    cancelRequest(requestId) {
        this.cancellationManager.cancelRequest(requestId);
    }
    
    // 获取系统状态
    getSystemStatus() {
        return {
            requestPool: this.requestPool.getStatus(),
            lifecycle: this.lifecycleManager.getMemoryStatistics(),
            performance: this.performanceMonitor.getPerformanceStats(),
            memory: performance.memory ? {
                used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + 'MB',
                total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024) + 'MB',
                limit: Math.round(performance.memory.jsHeapSizeLimit / 1024 / 1024) + 'MB'
            } : null
        };
    }
    
    // 生成请求ID
    generateRequestId() {
        return `ajax_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
    
    // 销毁整个系统
    destroy() {
        clearInterval(this.cleanupInterval);
        clearInterval(this.memoryCheckInterval);
        
        this.requestPool.destroy();
        this.lifecycleManager.destroy();
        this.cancellationManager.destroy();
        this.performanceMonitor.destroy();
        
        if (this.priorityPool) {
            this.priorityPool.destroy();
        }
        
        console.log('Ajax 内存管理系统已销毁');
    }
}

// 使用示例
const ajaxManager = new AjaxMemoryManager({
    maxConcurrent: 4,
    requestTimeout: 15000,
    memoryThreshold: 80 * 1024 * 1024 // 80MB
});

// 在应用中使用
class Application {
    constructor() {
        this.ajaxManager = ajaxManager;
    }
    
    async loadUserData(userId) {
        try {
            const userData = await this.ajaxManager.request(`/api/users/${userId}`);
            console.log('用户数据加载成功');
            return userData;
        } catch (error) {
            console.error('加载用户数据失败:', error);
            throw error;
        }
    }
    
    async searchProducts(query) {
        // 使用优先级请求
        return this.ajaxManager.priorityRequest(
            `/api/search?q=${query}`,
            { method: 'GET' },
            'high'
        );
    }
    
    // 获取系统状态
    getSystemStatus() {
        return this.ajaxManager.getSystemStatus();
    }
    
    // 清理资源
    cleanup() {
        this.ajaxManager.destroy();
    }
}

// 在页面卸载时清理资源
window.addEventListener('beforeunload', () => {
    if (window.ajaxManager) {
        window.ajaxManager.destroy();
    }
});

7. 总结与最佳实践

7.1 核心原则总结

Ajax 内存管理黄金法则:

  1. 请求池化 - 控制并发数量,避免资源竞争
  2. 及时取消 - 不需要的请求立即取消,释放资源
  3. 内存优化 - 对大响应数据使用懒加载和分块处理
  4. 生命周期管理 - 明确请求的创建、执行、完成和清理阶段
  5. 监控预警 - 实时监控内存使用和性能指标
  6. 自动清理 - 设置定时任务自动回收资源

7.2 性能优化检查清单

const OptimizationChecklist = {
    immediateActions: [
        '✓ 使用请求池控制并发数量',
        '✓ 为所有请求设置合理的超时时间',
        '✓ 实现请求取消机制',
        '✓ 添加内存使用监控',
        '✓ 设置自动清理任务'
    ],
    
    advancedOptimizations: [
        '✓ 实现响应数据的内存优化',
        '✓ 添加请求优先级管理',
        '✓ 实现智能缓存策略',
        '✓ 添加性能监控和报警',
        '✓ 实现紧急内存清理机制'
    ],
    
    monitoringMetrics: [
        '并发请求数量',
        '请求成功率/失败率',
        '平均响应时间',
        '内存使用趋势',
        '缓存命中率'
    ]
};

7.3 各场景推荐配置

const RecommendedConfigs = {
    '高并发应用': {
        maxConcurrent: 10,
        requestTimeout: 10000,
        cacheSize: 200,
        memoryThreshold: 150 * 1024 * 1024
    },
    
    '移动端应用': {
        maxConcurrent: 3,
        requestTimeout: 20000,
        cacheSize: 50,
        memoryThreshold: 50 * 1024 * 1024
    },
    
    '后台管理系統': {
        maxConcurrent: 6,
        requestTimeout: 30000,
        cacheSize: 100,
        memoryThreshold: 100 * 1024 * 1024
    },
    
    '实时数据应用': {
        maxConcurrent: 8,
        requestTimeout: 15000,
        cacheSize: 50, // 少缓存,保持数据新鲜
        memoryThreshold: 80 * 1024 * 1024
    }
};

通过实施这些系统性的内存管理策略,你可以显著降低 Ajax 请求导致的内存泄漏风险,提高应用稳定性,并为用户提供更流畅的使用体验。记住,预防胜于治疗,在代码设计阶段就考虑内存管理,远比后期调试和修复要高效得多。

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐