Ultimate Web Optimizer

全面的网页性能优化方案（可视化配置版）- 懒加载/预加载/预连接/布局优化
当前为 2025-06-10 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Ultimate Web Optimizer
// @namespace    https://greasyfork.org/zh-CN/users/1474228-moyu001
// @version      2.0
// @description  全面的网页性能优化方案（可视化配置版）- 懒加载/预加载/预连接/布局优化
// @author       moyu001
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_log
// @license      MIT
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // ========================
    // 工具函数 - 提前定义
    // ========================

    /**
     * 防抖函数
     * @param {Function} fn 要防抖的函数
     * @param {number} delay 延迟时间
     * @returns {Function} 防抖后的函数
     */
    function debounce(fn, delay) {
        let timer = null;
        return function(...args) {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
        };
    }

    /**
     * 节流函数
     * @param {Function} func 要节流的函数
     * @param {number} limit 限制时间
     * @returns {Function} 节流后的函数
     */
    function throttle(func, limit) {
        let inThrottle;
        return function(...args) {
            if (!inThrottle) {
                func.apply(this, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        };
    }

    /**
     * 安全的 URL 解析
     * @param {string} url URL 字符串
     * @param {string} base 基准 URL
     * @returns {URL|null} URL 对象或 null
     */
    function safeParseURL(url, base) {
        try {
            return new URL(url, base);
        } catch {
            return null;
        }
    }

    /**
     * 检查元素是否可见
     * @param {Element} element 要检查的元素
     * @returns {boolean} 是否可见
     */
    function isElementVisible(element) {
        if (!element) return false;
        const style = window.getComputedStyle(element);
        return style.display !== 'none' &&
               style.visibility !== 'hidden' &&
               style.opacity !== '0';
    }

    /**
     * 深度合并对象
     * @param {Object} target 目标对象
     * @param {Object} source 源对象
     * @returns {Object} 合并后的对象
     */
    function deepMerge(target, source) {
        const result = { ...target };

        for (const key in source) {
            if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
                result[key] = deepMerge(result[key] || {}, source[key]);
            } else {
                result[key] = source[key];
            }
        }

        return result;
    }

    /**
     * 检查是否为 HTML 图片元素 - 增强类型检查
     * @param {Node} node DOM 节点
     * @returns {boolean} 是否为图片元素
     */
    function isImageElement(node) {
        return node instanceof HTMLImageElement;
    }

    /**
     * 延迟函数
     * @param {number} ms 延迟毫秒数
     * @returns {Promise} Promise 对象
     */
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    /**
     * 简单的 LRU 缓存实现
     */
    class LRUCache {
        constructor(maxSize = 100) {
            this.maxSize = maxSize;
            this.cache = new Map();
        }

        get(key) {
            if (this.cache.has(key)) {
                const value = this.cache.get(key);
                this.cache.delete(key);
                this.cache.set(key, value);
                return value;
            }
            return null;
        }

        set(key, value) {
            if (this.cache.has(key)) {
                this.cache.delete(key);
            } else if (this.cache.size >= this.maxSize) {
                const firstKey = this.cache.keys().next().value;
                this.cache.delete(firstKey);
            }
            this.cache.set(key, value);
        }

        has(key) {
            return this.cache.has(key);
        }

        clear() {
            this.cache.clear();
        }

        get size() {
            return this.cache.size;
        }
    }

    /**
     * 重试操作工具类 - 新增错误重试机制
     */
    class RetryableOperation {
        /**
         * 执行带重试的操作
         * @param {Function} operation 要执行的操作
         * @param {number} maxRetries 最大重试次数
         * @param {number} baseDelay 基础延迟时间
         * @returns {Promise} 操作结果
         */
        static async executeWithRetry(operation, maxRetries = 3, baseDelay = 1000) {
            for (let i = 0; i < maxRetries; i++) {
                try {
                    return await operation();
                } catch (e) {
                    if (i === maxRetries - 1) throw e;
                    await delay(baseDelay * (i + 1));
                }
            }
        }
    }

    /**
     * 性能监控器
     */
    class PerformanceMonitor {
        constructor(debug = false) {
            this.debug = debug;
            this.metrics = new Map();
            this.counters = new Map();
        }

        start(name) {
            if (this.debug) {
                this.metrics.set(name, performance.now());
            }
        }

        end(name) {
            if (this.debug && this.metrics.has(name)) {
                const duration = performance.now() - this.metrics.get(name);
                console.log(`[性能] ${name}: ${duration.toFixed(2)}ms`);
                this.metrics.delete(name);
                return duration;
            }
            return 0;
        }

        count(name) {
            if (this.debug) {
                this.counters.set(name, (this.counters.get(name) || 0) + 1);
            }
        }

        getCounter(name) {
            return this.counters.get(name) || 0;
        }

        profile(name, fn) {
            if (!this.debug) return fn();

            const start = performance.now();
            const result = fn();
            const end = performance.now();
            console.log(`[性能] ${name}: ${(end - start).toFixed(2)}ms`);
            return result;
        }

        log(message, ...args) {
            if (this.debug) {
                console.log(`[优化器] ${message}`, ...args);
            }
        }

        warn(message, ...args) {
            if (this.debug) {
                console.warn(`[优化器] ${message}`, ...args);
            }
        }

        error(message, ...args) {
            if (this.debug) {
                console.error(`[优化器] ${message}`, ...args);
            }
        }
    }

    // ========================
    // 可视化配置界面
    // ========================

    /**
     * 可视化配置管理器
     */
    class VisualConfigManager {
        constructor(configManager) {
            this.configManager = configManager;
            this.isVisible = false;
            this.configPanel = null;
            this.dragOffset = { x: 0, y: 0 };
            this.isDragging = false;

            this.createConfigPanel();
            this.setupKeyboardShortcut();
        }

        createConfigPanel() {
            // 创建样式
            this.injectStyles();

            // 创建主面板
            this.configPanel = document.createElement('div');
            this.configPanel.id = 'web-optimizer-config';
            this.configPanel.className = 'wo-config-panel wo-hidden';

            this.configPanel.innerHTML = this.generatePanelHTML();
            document.body.appendChild(this.configPanel);

            // 绑定事件
            this.bindEvents();
        }

        injectStyles() {
            const style = document.createElement('style');
            style.id = 'web-optimizer-styles';
            style.textContent = `
                .wo-config-panel {
                    position: fixed;
                    top: 50px;
                    right: 20px;
                    width: 400px;
                    max-height: 80vh;
                    background: #ffffff;
                    border: 1px solid #e1e5e9;
                    border-radius: 12px;
                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
                    z-index: 2147483647;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    font-size: 14px;
                    line-height: 1.5;
                    overflow: hidden;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    backdrop-filter: blur(10px);
                }

                .wo-config-panel.wo-hidden {
                    opacity: 0;
                    visibility: hidden;
                    transform: translateX(100%) scale(0.95);
                }

                .wo-config-header {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 16px 20px;
                    cursor: move;
                    user-select: none;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .wo-config-title {
                    font-weight: 600;
                    font-size: 16px;
                    margin: 0;
                }

                .wo-config-version {
                    background: rgba(255, 255, 255, 0.2);
                    padding: 2px 8px;
                    border-radius: 12px;
                    font-size: 11px;
                    font-weight: 500;
                }

                .wo-config-close {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 20px;
                    cursor: pointer;
                    padding: 4px;
                    border-radius: 4px;
                    transition: background-color 0.2s;
                }

                .wo-config-close:hover {
                    background: rgba(255, 255, 255, 0.2);
                }

                .wo-config-content {
                    max-height: calc(80vh - 80px);
                    overflow-y: auto;
                    padding: 0;
                }

                .wo-config-content::-webkit-scrollbar {
                    width: 6px;
                }

                .wo-config-content::-webkit-scrollbar-thumb {
                    background: #c1c1c1;
                    border-radius: 3px;
                }

                .wo-config-section {
                    border-bottom: 1px solid #f0f0f0;
                }

                .wo-config-section:last-child {
                    border-bottom: none;
                }

                .wo-section-header {
                    background: #f8f9fa;
                    padding: 12px 20px;
                    font-weight: 600;
                    color: #2c3e50;
                    border-left: 4px solid #667eea;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: background-color 0.2s;
                }

                .wo-section-header:hover {
                    background: #e9ecef;
                }

                .wo-section-toggle {
                    font-size: 12px;
                    transition: transform 0.2s;
                }

                .wo-section-toggle.collapsed {
                    transform: rotate(-90deg);
                }

                .wo-section-content {
                    padding: 16px 20px;
                    display: block;
                }

                .wo-section-content.collapsed {
                    display: none;
                }

                .wo-config-item {
                    margin-bottom: 16px;
                }

                .wo-config-item:last-child {
                    margin-bottom: 0;
                }

                .wo-config-label {
                    display: block;
                    font-weight: 500;
                    color: #2c3e50;
                    margin-bottom: 6px;
                }

                .wo-config-description {
                    font-size: 12px;
                    color: #6c757d;
                    margin-bottom: 8px;
                    line-height: 1.4;
                }

                .wo-config-input {
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    font-size: 14px;
                    transition: border-color 0.2s, box-shadow 0.2s;
                    box-sizing: border-box;
                }

                .wo-config-input:focus {
                    outline: none;
                    border-color: #667eea;
                    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
                }

                .wo-config-checkbox {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                }

                .wo-config-checkbox input {
                    margin-right: 8px;
                    transform: scale(1.2);
                }

                .wo-config-textarea {
                    width: 100%;
                    min-height: 80px;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    font-size: 13px;
                    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
                    resize: vertical;
                    box-sizing: border-box;
                }

                .wo-config-actions {
                    padding: 16px 20px;
                    background: #f8f9fa;
                    border-top: 1px solid #e1e5e9;
                    display: flex;
                    gap: 8px;
                }

                .wo-btn {
                    padding: 8px 16px;
                    border: none;
                    border-radius: 6px;
                    font-size: 13px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s;
                    flex: 1;
                }

                .wo-btn-primary {
                    background: #667eea;
                    color: white;
                }

                .wo-btn-primary:hover {
                    background: #5a67d8;
                    transform: translateY(-1px);
                }

                .wo-btn-secondary {
                    background: #e2e8f0;
                    color: #4a5568;
                }

                .wo-btn-secondary:hover {
                    background: #cbd5e0;
                }

                .wo-btn-danger {
                    background: #e53e3e;
                    color: white;
                }

                .wo-btn-danger:hover {
                    background: #c53030;
                }

                .wo-stats-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 12px;
                    margin-top: 12px;
                }

                .wo-stat-item {
                    background: #f8f9fa;
                    padding: 12px;
                    border-radius: 6px;
                    text-align: center;
                }

                .wo-stat-value {
                    font-size: 18px;
                    font-weight: 600;
                    color: #667eea;
                    display: block;
                }

                .wo-stat-label {
                    font-size: 11px;
                    color: #6c757d;
                    margin-top: 2px;
                }

                .wo-toggle-btn {
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    width: 56px;
                    height: 56px;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    border: none;
                    border-radius: 50%;
                    color: white;
                    font-size: 20px;
                    cursor: pointer;
                    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
                    z-index: 2147483646;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .wo-toggle-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
                }

                .wo-toggle-btn.wo-hidden {
                    opacity: 0;
                    visibility: hidden;
                    transform: translateY(100px) scale(0.8);
                }

                @media (max-width: 480px) {
                    .wo-config-panel {
                        width: calc(100vw - 40px);
                        right: 20px;
                        left: 20px;
                        max-height: 90vh;
                    }
                }
            `;
            document.head.appendChild(style);
        }

        generatePanelHTML() {
            const config = this.configManager.config;

            return `
                <div class="wo-config-header">
                    <div>
                        <h3 class="wo-config-title">Web Optimizer 配置</h3>
                    </div>
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <span class="wo-config-version">v2.0</span>
                        <button class="wo-config-close">×</button>
                    </div>
                </div>

                <div class="wo-config-content">
                    ${this.generateGeneralSection(config)}
                    ${this.generateLazyLoadSection(config)}
                    ${this.generatePreconnectSection(config)}
                    ${this.generatePreloadSection(config)}
                    ${this.generateLayoutSection(config)}
                    ${this.generateStatsSection()}
                </div>

                <div class="wo-config-actions">
                    <button class="wo-btn wo-btn-primary" data-action="save">保存配置</button>
                    <button class="wo-btn wo-btn-secondary" data-action="reset">重置默认</button>
                    <button class="wo-btn wo-btn-danger" data-action="export">导出配置</button>
                </div>
            `;
        }

        generateGeneralSection(config) {
            return `
                <div class="wo-config-section">
                    <div class="wo-section-header" data-section="general">
                        <span>🔧 基础设置</span>
                        <span class="wo-section-toggle">▼</span>
                    </div>
                    <div class="wo-section-content" data-content="general">
                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="debug" ${config.debug ? 'checked' : ''}>
                                启用调试模式
                            </label>
                            <div class="wo-config-description">
                                开启后将在控制台显示详细的运行日志和性能信息
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">全局黑名单</label>
                            <div class="wo-config-description">
                                这些域名将完全跳过所有优化功能，每行一个域名
                            </div>
                            <textarea class="wo-config-textarea" data-path="globalBlacklist" placeholder="example.com">${config.globalBlacklist.join('\n')}</textarea>
                        </div>
                    </div>
                </div>
            `;
        }

        generateLazyLoadSection(config) {
            const lazyLoad = config.lazyLoad;
            return `
                <div class="wo-config-section">
                    <div class="wo-section-header" data-section="lazyload">
                        <span>🖼️ 懒加载设置</span>
                        <span class="wo-section-toggle">▼</span>
                    </div>
                    <div class="wo-section-content" data-content="lazyload">
                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="lazyLoad.enabled" ${lazyLoad.enabled ? 'checked' : ''}>
                                启用图片懒加载
                            </label>
                            <div class="wo-config-description">
                                自动延迟加载页面图片，提升页面加载速度
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">最小处理尺寸 (像素)</label>
                            <div class="wo-config-description">
                                小于此尺寸的图片将不进行懒加载处理
                            </div>
                            <input type="number" class="wo-config-input" data-path="lazyLoad.minSize" value="${lazyLoad.minSize}" min="0" max="500">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">预加载边距</label>
                            <div class="wo-config-description">
                                图片距离视窗多远时开始加载（如：200px）
                            </div>
                            <input type="text" class="wo-config-input" data-path="lazyLoad.rootMargin" value="${lazyLoad.rootMargin}" placeholder="200px">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">批处理大小</label>
                            <div class="wo-config-description">
                                每次处理的图片数量，较大值处理更快但可能影响性能
                            </div>
                            <input type="number" class="wo-config-input" data-path="lazyLoad.batchSize" value="${lazyLoad.batchSize}" min="8" max="128">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="lazyLoad.skipHidden" ${lazyLoad.skipHidden ? 'checked' : ''}>
                                跳过隐藏图片
                            </label>
                            <div class="wo-config-description">
                                不处理当前不可见的图片元素
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">黑名单</label>
                            <div class="wo-config-description">
                                这些域名将跳过懒加载功能，每行一个域名
                            </div>
                            <textarea class="wo-config-textarea" data-path="lazyLoad.blacklist" placeholder="images.example.com">${lazyLoad.blacklist.join('\n')}</textarea>
                        </div>
                    </div>
                </div>
            `;
        }

        generatePreconnectSection(config) {
            const preconnect = config.preconnect;
            return `
                <div class="wo-config-section">
                    <div class="wo-section-header" data-section="preconnect">
                        <span>🔗 预连接设置</span>
                        <span class="wo-section-toggle">▼</span>
                    </div>
                    <div class="wo-section-content" data-content="preconnect">
                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="preconnect.enabled" ${preconnect.enabled ? 'checked' : ''}>
                                启用智能预连接
                            </label>
                            <div class="wo-config-description">
                                自动预连接到常用CDN和资源服务器，减少连接延迟
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">最大连接数</label>
                            <div class="wo-config-description">
                                同时预连接的最大域名数量
                            </div>
                            <input type="number" class="wo-config-input" data-path="preconnect.maxConnections" value="${preconnect.maxConnections}" min="1" max="20">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">预连接白名单</label>
                            <div class="wo-config-description">
                                符合这些域名的资源将被预连接，每行一个域名
                            </div>
                            <textarea class="wo-config-textarea" data-path="preconnect.whitelist" style="min-height: 120px;">${preconnect.whitelist.join('\n')}</textarea>
                        </div>
                    </div>
                </div>
            `;
        }

        generatePreloadSection(config) {
            const preload = config.preload;
            return `
                <div class="wo-config-section">
                    <div class="wo-section-header" data-section="preload">
                        <span>📦 预加载设置</span>
                        <span class="wo-section-toggle">▼</span>
                    </div>
                    <div class="wo-section-content" data-content="preload">
                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="preload.enabled" ${preload.enabled ? 'checked' : ''}>
                                启用资源预加载
                            </label>
                            <div class="wo-config-description">
                                预加载关键CSS、JS和字体资源，提升加载速度
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">最大预加载数</label>
                            <div class="wo-config-description">
                                同时预加载的最大资源数量
                            </div>
                            <input type="number" class="wo-config-input" data-path="preload.maxPreloads" value="${preload.maxPreloads}" min="1" max="20">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">支持的文件类型</label>
                            <div class="wo-config-description">
                                将预加载这些类型的文件，用逗号分隔
                            </div>
                            <input type="text" class="wo-config-input" data-path="preload.types" value="${preload.types.join(', ')}" placeholder="css, js, woff2, woff">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">请求超时时间 (毫秒)</label>
                            <div class="wo-config-description">
                                获取CSS文件以提取字体的超时时间
                            </div>
                            <input type="number" class="wo-config-input" data-path="preload.fetchTimeout" value="${preload.fetchTimeout}" min="1000" max="30000" step="1000">
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-label">重试次数</label>
                            <div class="wo-config-description">
                                请求失败时的最大重试次数
                            </div>
                            <input type="number" class="wo-config-input" data-path="preload.retryAttempts" value="${preload.retryAttempts}" min="0" max="10">
                        </div>
                    </div>
                </div>
            `;
        }

        generateLayoutSection(config) {
            const layout = config.layout;
            return `
                <div class="wo-config-section">
                    <div class="wo-section-header" data-section="layout">
                        <span>📐 布局优化设置</span>
                        <span class="wo-section-toggle">▼</span>
                    </div>
                    <div class="wo-section-content" data-content="layout">
                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="layout.enabled" ${layout.enabled ? 'checked' : ''}>
                                启用布局稳定性优化
                            </label>
                            <div class="wo-config-description">
                                为无尺寸元素添加默认样式，减少布局偏移
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="layout.stableImages" ${layout.stableImages ? 'checked' : ''}>
                                图片稳定性优化
                            </label>
                            <div class="wo-config-description">
                                为没有明确尺寸的图片设置默认样式
                            </div>
                        </div>

                        <div class="wo-config-item">
                            <label class="wo-config-checkbox">
                                <input type="checkbox" data-path="layout.stableIframes" ${layout.stableIframes ? 'checked' : ''}>
                                iframe稳定性优化
                            </label>
                            <div class="wo-config-description">
                                为iframe设置默认的16:9比例和最小高度
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        generateStatsSection() {
            return `
                <div class="wo-config-section">
                    <div class="wo-section-header" data-section="stats">
                        <span>📊 实时统计</span>
                        <span class="wo-section-toggle">▼</span>
                    </div>
                    <div class="wo-section-content" data-content="stats">
                        <div class="wo-stats-grid" id="wo-stats-grid">
                            <!-- 统计数据将在这里动态生成 -->
                        </div>
                        <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e1e5e9;">
                            <button class="wo-btn wo-btn-secondary" onclick="window.WebOptimizer.updateConfig('debug', true); console.log(window.WebOptimizer.getPerformanceReport());" style="width: 100%;">
                                📈 查看详细报告
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }

        bindEvents() {
            const panel = this.configPanel;

            // 关闭按钮
            panel.querySelector('.wo-config-close').addEventListener('click', () => {
                this.hide();
            });

            // 拖拽功能
            const header = panel.querySelector('.wo-config-header');
            header.addEventListener('mousedown', (e) => this.startDrag(e));

            // 折叠/展开功能
            panel.querySelectorAll('.wo-section-header').forEach(header => {
                header.addEventListener('click', (e) => {
                    const section = e.currentTarget.dataset.section;
                    this.toggleSection(section);
                });
            });

            // 配置项监听
            panel.addEventListener('change', (e) => this.handleConfigChange(e));
            panel.addEventListener('input', debounce((e) => this.handleConfigChange(e), 500));

            // 操作按钮
            panel.querySelector('[data-action="save"]').addEventListener('click', () => this.saveConfig());
            panel.querySelector('[data-action="reset"]').addEventListener('click', () => this.resetConfig());
            panel.querySelector('[data-action="export"]').addEventListener('click', () => this.exportConfig());

            // 定期更新统计
            setInterval(() => this.updateStats(), 2000);
        }

        startDrag(e) {
            this.isDragging = true;
            const rect = this.configPanel.getBoundingClientRect();
            this.dragOffset.x = e.clientX - rect.left;
            this.dragOffset.y = e.clientY - rect.top;

            const handleMouseMove = (e) => {
                if (!this.isDragging) return;

                const x = e.clientX - this.dragOffset.x;
                const y = e.clientY - this.dragOffset.y;

                // 限制在视窗内
                const maxX = window.innerWidth - this.configPanel.offsetWidth;
                const maxY = window.innerHeight - this.configPanel.offsetHeight;

                this.configPanel.style.left = Math.max(0, Math.min(x, maxX)) + 'px';
                this.configPanel.style.top = Math.max(0, Math.min(y, maxY)) + 'px';
                this.configPanel.style.right = 'auto';
            };

            const handleMouseUp = () => {
                this.isDragging = false;
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            };

            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        }

        toggleSection(sectionName) {
            const content = this.configPanel.querySelector(`[data-content="${sectionName}"]`);
            const toggle = this.configPanel.querySelector(`[data-section="${sectionName}"] .wo-section-toggle`);

            if (content.classList.contains('collapsed')) {
                content.classList.remove('collapsed');
                toggle.classList.remove('collapsed');
                toggle.textContent = '▼';
            } else {
                content.classList.add('collapsed');
                toggle.classList.add('collapsed');
                toggle.textContent = '▶';
            }
        }

        handleConfigChange(e) {
            const path = e.target.dataset.path;
            if (!path) return;

            let value;
            if (e.target.type === 'checkbox') {
                value = e.target.checked;
            } else if (e.target.type === 'number') {
                value = parseInt(e.target.value) || 0;
            } else if (e.target.className.includes('wo-config-textarea') && (path.includes('blacklist') || path.includes('whitelist') || path.includes('globalBlacklist'))) {
                value = e.target.value.split('\n').map(line => line.trim()).filter(line => line);
            } else if (path === 'preload.types') {
                value = e.target.value.split(',').map(type => type.trim()).filter(type => type);
            } else {
                value = e.target.value;
            }

            try {
                this.configManager.set(path, value);
                this.showNotification('配置已更新', 'success');
            } catch (error) {
                this.showNotification('配置更新失败: ' + error.message, 'error');
            }
        }

        saveConfig() {
            try {
                this.configManager.saveConfig();
                this.showNotification('配置已保存到本地存储', 'success');
            } catch (error) {
                this.showNotification('保存失败: ' + error.message, 'error');
            }
        }

        resetConfig() {
            if (confirm('确定要重置为默认配置吗？这将丢失所有自定义设置。')) {
                try {
                    // 重置配置
                    this.configManager.config = deepMerge({}, this.configManager.defaultConfig);
                    this.configManager.saveConfig();

                    // 重新生成面板
                    this.configPanel.querySelector('.wo-config-content').innerHTML =
                        this.generateGeneralSection(this.configManager.config) +
                        this.generateLazyLoadSection(this.configManager.config) +
                        this.generatePreconnectSection(this.configManager.config) +
                        this.generatePreloadSection(this.configManager.config) +
                        this.generateLayoutSection(this.configManager.config) +
                        this.generateStatsSection();

                    // 重新绑定事件
                    this.bindEvents();

                    this.showNotification('配置已重置为默认值', 'success');
                } catch (error) {
                    this.showNotification('重置失败: ' + error.message, 'error');
                }
            }
        }

        exportConfig() {
            try {
                const config = JSON.stringify(this.configManager.config, null, 2);
                const blob = new Blob([config], { type: 'application/json' });
                const url = URL.createObjectURL(blob);

                const link = document.createElement('a');
                link.href = url;
                link.download = `web-optimizer-config-${new Date().toISOString().slice(0, 10)}.json`;
                link.click();

                URL.revokeObjectURL(url);
                this.showNotification('配置已导出到文件', 'success');
            } catch (error) {
                this.showNotification('导出失败: ' + error.message, 'error');
            }
        }

        updateStats() {
            if (!this.isVisible) return;

            const statsGrid = document.getElementById('wo-stats-grid');
            if (!statsGrid) return;

            try {
                const optimizer = window.WebOptimizer;
                if (!optimizer) return;

                const stats = optimizer.getPerformanceReport();
                const counters = stats.counters;

                statsGrid.innerHTML = `
                    <div class="wo-stat-item">
                        <span class="wo-stat-value">${document.querySelectorAll('img').length}</span>
                        <div class="wo-stat-label">页面图片总数</div>
                    </div>
                    <div class="wo-stat-item">
                        <span class="wo-stat-value">${counters['processed-images']}</span>
                        <div class="wo-stat-label">已处理图片</div>
                    </div>
                    <div class="wo-stat-item">
                        <span class="wo-stat-value">${counters['lazy-loaded-images']}</span>
                        <div class="wo-stat-label">懒加载图片</div>
                    </div>
                    <div class="wo-stat-item">
                        <span class="wo-stat-value">${counters['preconnected-domains']}</span>
                        <div class="wo-stat-label">预连接域名</div>
                    </div>
                    <div class="wo-stat-item">
                        <span class="wo-stat-value">${counters['preloaded-resources']}</span>
                        <div class="wo-stat-label">预加载资源</div>
                    </div>
                    <div class="wo-stat-item">
                        <span class="wo-stat-value">${stats.performance.efficiency}</span>
                        <div class="wo-stat-label">优化效率</div>
                    </div>
                `;
            } catch (error) {
                console.warn('更新统计数据失败:', error);
            }
        }

        showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 12px 20px;
                background: ${type === 'success' ? '#48bb78' : type === 'error' ? '#f56565' : '#4299e1'};
                color: white;
                border-radius: 6px;
                font-size: 14px;
                z-index: 2147483648;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                transform: translateX(100%);
                transition: transform 0.3s ease;
            `;
            notification.textContent = message;
            document.body.appendChild(notification);

            // 显示动画
            setTimeout(() => {
                notification.style.transform = 'translateX(0)';
            }, 100);

            // 自动移除
            setTimeout(() => {
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        setupKeyboardShortcut() {
            // 创建浮动按钮
            const toggleBtn = document.createElement('button');
            toggleBtn.className = 'wo-toggle-btn';
            toggleBtn.innerHTML = '⚙️';
            toggleBtn.title = '打开 Web Optimizer 配置 (Ctrl+Shift+O)';
            toggleBtn.addEventListener('click', () => this.toggle());
            document.body.appendChild(toggleBtn);

            // 键盘快捷键
            document.addEventListener('keydown', (e) => {
                if (e.ctrlKey && e.shiftKey && e.key === 'O') {
                    e.preventDefault();
                    this.toggle();
                }
            });

            // 延迟显示浮动按钮
            setTimeout(() => {
                toggleBtn.classList.remove('wo-hidden');
            }, 2000);
        }

        show() {
            this.isVisible = true;
            this.configPanel.classList.remove('wo-hidden');
            this.updateStats();
        }

        hide() {
            this.isVisible = false;
            this.configPanel.classList.add('wo-hidden');
        }

        toggle() {
            if (this.isVisible) {
                this.hide();
            } else {
                this.show();
            }
        }
    }

    // ========================
    // 配置管理系统
    // ========================

    /**
     * 配置管理器 - 使用深度合并
     */
    class ConfigManager {
        constructor() {
            this.defaultConfig = {
                debug: false,

                // 全局黑名单
                globalBlacklist: [
                    // 可以添加需要完全跳过优化的域名
                ],

                // 懒加载配置
                lazyLoad: {
                    enabled: true,
                    minSize: 100,
                    rootMargin: '200px',
                    threshold: 0.01,
                    skipHidden: true,
                    batchSize: 32,
                    blacklist: []
                },

                // 预连接配置
                preconnect: {
                    enabled: true,
                    maxConnections: 5,
                    whitelist: [
                        // CDN 和字体服务
                        'fonts.gstatic.com',
                        'fonts.googleapis.com',
                        'fonts.googleapis.cn',
                        'fonts.loli.net',

                        // 常用 CDN
                        'cdnjs.cloudflare.com',
                        'cdn.jsdelivr.net',
                        'unpkg.com',
                        'cdn.bootcdn.net',
                        'cdn.bootcss.com',
                        'libs.baidu.com',
                        'cdn.staticfile.org',

                        // 其他常用服务
                        'ajax.googleapis.com',
                        'code.jquery.com',
                        'maxcdn.bootstrapcdn.com',
                        'kit.fontawesome.com',
                        'lf3-cdn-tos.bytecdntp.com',
                        'unpkg.zhimg.com',
                        'npm.elemecdn.com',
                        'g.alicdn.com'
                    ],
                    blacklist: []
                },

                // 预加载配置
                preload: {
                    enabled: true,
                    maxPreloads: 5,
                    types: ['css', 'js', 'woff2', 'woff'],
                    fetchTimeout: 5000,
                    retryAttempts: 3,
                    blacklist: []
                },

                // 布局稳定性配置
                layout: {
                    enabled: true,
                    stableImages: true,
                    stableIframes: true,
                    blacklist: []
                }
            };

            this.config = this.loadConfig();
            this.validateConfig();
        }

        loadConfig() {
            try {
                const saved = GM_getValue('optimizer_config_v2', null);
                if (saved) {
                    // 使用深度合并替代浅合并
                    return deepMerge(this.defaultConfig, JSON.parse(saved));
                }
            } catch (e) {
                console.warn('[配置] 加载用户配置失败，使用默认配置', e);
            }
            return deepMerge({}, this.defaultConfig);
        }

        saveConfig() {
            try {
                GM_setValue('optimizer_config_v2', JSON.stringify(this.config));
            } catch (e) {
                console.warn('[配置] 保存配置失败', e);
            }
        }

        validateConfig() {
            // 基本类型验证
            if (typeof this.config.debug !== 'boolean') {
                this.config.debug = this.defaultConfig.debug;
            }

            // 确保数组类型配置正确
            ['globalBlacklist'].forEach(key => {
                if (!Array.isArray(this.config[key])) {
                    this.config[key] = [...this.defaultConfig[key]];
                }
            });

            // 验证子配置
            ['lazyLoad', 'preconnect', 'preload', 'layout'].forEach(module => {
                if (!this.config[module] || typeof this.config[module] !== 'object') {
                    this.config[module] = deepMerge({}, this.defaultConfig[module]);
                }
            });
        }

        get(path) {
            const keys = path.split('.');
            let value = this.config;
            for (const key of keys) {
                value = value?.[key];
                if (value === undefined) break;
            }
            return value;
        }

        set(path, value) {
            const keys = path.split('.');
            const lastKey = keys.pop();
            let target = this.config;

            for (const key of keys) {
                if (!target[key] || typeof target[key] !== 'object') {
                    target[key] = {};
                }
                target = target[key];
            }

            target[lastKey] = value;
            this.saveConfig();
        }

        isBlacklisted(hostname, module = null) {
            // 检查全局黑名单
            if (this.config.globalBlacklist.some(domain => hostname.includes(domain))) {
                return true;
            }

            // 检查模块特定黑名单
            if (module && this.config[module]?.blacklist) {
                return this.config[module].blacklist.some(domain => hostname.includes(domain));
            }

            return false;
        }
    }

    // ========================
    // 核心优化模块
    // ========================

    /**
     * 懒加载管理器 - 增强类型检查
     */
    class LazyLoadManager {
        constructor(config, monitor) {
            this.config = config;
            this.monitor = monitor;
            this.observer = null;
            this.mutationObserver = null;
            this.processedImages = new Set();
            this.pendingImages = [];
            this.batchScheduled = false;
            this.processedElements = new WeakSet(); // 避免重复处理
        }

        init() {
            if (!this.config.get('lazyLoad.enabled')) {
                this.monitor.log('懒加载功能已禁用');
                return;
            }

            if (this.config.isBlacklisted(location.hostname, 'lazyLoad')) {
                this.monitor.log('当前站点在懒加载黑名单中');
                return;
            }

            this.monitor.start('lazyLoad-init');
            this.setupIntersectionObserver();
            this.processExistingImages();
            this.setupMutationObserver();
            this.monitor.end('lazyLoad-init');
        }

        setupIntersectionObserver() {
            if (!('IntersectionObserver' in window)) {
                this.monitor.warn('浏览器不支持 IntersectionObserver，使用兼容模式');
                this.setupFallbackMode();
                return;
            }

            this.observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        this.restoreImage(entry.target);
                        this.observer.unobserve(entry.target);
                        this.monitor.count('lazy-loaded-images');
                    }
                });
            }, {
                rootMargin: this.config.get('lazyLoad.rootMargin'),
                threshold: this.config.get('lazyLoad.threshold')
            });
        }

        setupFallbackMode() {
            const checkVisible = throttle(() => {
                const images = document.querySelectorAll('img[data-lazy-src]');
                const margin = parseInt(this.config.get('lazyLoad.rootMargin')) || 200;

                images.forEach(img => {
                    const rect = img.getBoundingClientRect();
                    if (rect.top < window.innerHeight + margin) {
                        this.restoreImage(img);
                    }
                });
            }, 200);

            window.addEventListener('scroll', checkVisible, { passive: true });
            window.addEventListener('resize', checkVisible, { passive: true });
            checkVisible();
        }

        isLazyCandidate(img) {
            // 基本检查 - 使用更严格的类型检查
            if (!isImageElement(img)) return false;
            if (this.processedElements.has(img)) return false;
            if (img.hasAttribute('data-lazy-processed')) return false;
            if (img.loading === 'eager') return false;
            if (img.complete && img.src) return false;
            if (img.src && img.src.startsWith('data:')) return false;

            // 跳过已有懒加载的图片
            if (img.hasAttribute('data-src') || img.hasAttribute('data-srcset')) return false;

            // 尺寸检查
            const minSize = this.config.get('lazyLoad.minSize');
            const rect = img.getBoundingClientRect();
            if (rect.width < minSize || rect.height < minSize) return false;

            // 可见性检查
            if (this.config.get('lazyLoad.skipHidden') && !isElementVisible(img)) {
                return false;
            }

            return true;
        }

        processImage(img) {
            if (!this.isLazyCandidate(img)) return false;

            // 标记为已处理
            this.processedElements.add(img);
            img.setAttribute('data-lazy-processed', 'true');

            // 设置原生懒加载（如果支持）
            if ('loading' in HTMLImageElement.prototype) {
                img.loading = 'lazy';
            }

            // 保存原始 src
            if (img.src) {
                img.setAttribute('data-lazy-src', img.src);
                img.removeAttribute('src');
            }
            if (img.srcset) {
                img.setAttribute('data-lazy-srcset', img.srcset);
                img.removeAttribute('srcset');
            }

            // 添加到观察者
            if (this.observer) {
                this.observer.observe(img);
            }

            this.processedImages.add(img);
            this.monitor.count('processed-images');
            return true;
        }

        restoreImage(img) {
            const src = img.getAttribute('data-lazy-src');
            const srcset = img.getAttribute('data-lazy-srcset');

            if (src) {
                img.src = src;
                img.removeAttribute('data-lazy-src');
            }
            if (srcset) {
                img.srcset = srcset;
                img.removeAttribute('data-lazy-srcset');
            }

            this.processedImages.delete(img);
        }

        batchProcess(images) {
            const batchSize = this.config.get('lazyLoad.batchSize');
            let processed = 0;

            const processBatch = () => {
                const end = Math.min(processed + batchSize, images.length);

                for (let i = processed; i < end; i++) {
                    this.processImage(images[i]);
                }

                processed = end;

                if (processed < images.length) {
                    (window.requestIdleCallback || window.requestAnimationFrame)(processBatch);
                } else {
                    this.monitor.log(`懒加载处理完成，共处理 ${processed} 张图片`);
                }
            };

            processBatch();
        }

        processExistingImages() {
            const images = Array.from(document.querySelectorAll('img'));
            this.monitor.log(`发现 ${images.length} 张图片，开始批量处理`);
            this.batchProcess(images);
        }

        // 改进的批处理调度 - 更好的并发控制
        scheduleBatchProcess() {
            if (this.batchScheduled || this.pendingImages.length === 0) return;

            this.batchScheduled = true;
            (window.requestIdleCallback || window.requestAnimationFrame)(() => {
                const images = [...this.pendingImages];
                this.pendingImages = [];
                this.batchScheduled = false;

                let processedCount = 0;
                images.forEach(img => {
                    if (this.processImage(img)) {
                        processedCount++;
                    }
                });

                if (processedCount > 0) {
                    this.monitor.log(`动态处理 ${processedCount} 张新图片`);
                }
            });
        }

        setupMutationObserver() {
            let pendingMutations = [];
            let processingScheduled = false;

            const processMutations = () => {
                const mutations = [...pendingMutations];
                pendingMutations = [];
                processingScheduled = false;

                mutations.forEach(mutation => {
                    // 处理新增节点
                    mutation.addedNodes.forEach(node => {
                        if (isImageElement(node)) {
                            this.pendingImages.push(node);
                        } else if (node.querySelectorAll) {
                            const images = node.querySelectorAll('img');
                            this.pendingImages.push(...Array.from(images));
                        }
                    });

                    // 清理移除的节点
                    mutation.removedNodes.forEach(node => {
                        if (isImageElement(node) && this.observer) {
                            this.observer.unobserve(node);
                            this.processedImages.delete(node);
                            this.processedElements.delete && this.processedElements.delete(node);
                        }
                    });
                });

                this.scheduleBatchProcess();
            };

            this.mutationObserver = new MutationObserver((mutations) => {
                pendingMutations.push(...mutations);

                if (!processingScheduled) {
                    processingScheduled = true;
                    (window.requestIdleCallback || window.requestAnimationFrame)(processMutations);
                }
            });

            this.mutationObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
        }

        destroy() {
            if (this.observer) {
                this.observer.disconnect();
                this.observer = null;
            }
            if (this.mutationObserver) {
                this.mutationObserver.disconnect();
                this.mutationObserver = null;
            }

            // 恢复所有处理过的图片
            this.processedImages.forEach(img => this.restoreImage(img));
            this.processedImages.clear();
        }
    }

    /**
     * 预加载管理器 - 改进异步处理
     */
    class PreloadManager {
        constructor(config, monitor) {
            this.config = config;
            this.monitor = monitor;
            this.preloaded = new LRUCache(this.config.get('preload.maxPreloads'));
            this.cssCache = new LRUCache(50);
            this.mutationObserver = null;
        }

        async init() {
            if (!this.config.get('preload.enabled')) {
                this.monitor.log('预加载功能已禁用');
                return;
            }

            if (this.config.isBlacklisted(location.hostname, 'preload')) {
                this.monitor.log('当前站点在预加载黑名单中');
                return;
            }

            this.monitor.start('preload-init');
            await this.scanExistingResources(); // 改为异步
            this.setupMutationObserver();
            this.monitor.end('preload-init');
        }

        getResourceType(url) {
            const ext = url.split('.').pop()?.toLowerCase();
            const types = this.config.get('preload.types');

            if (!types.includes(ext)) return null;

            switch (ext) {
                case 'css': return 'style';
                case 'js': return 'script';
                case 'woff':
                case 'woff2':
                case 'ttf':
                case 'otf': return 'font';
                default: return null;
            }
        }

        doPreload(url, asType) {
            if (this.preloaded.has(url) || this.preloaded.size >= this.config.get('preload.maxPreloads')) {
                return false;
            }

            try {
                const link = document.createElement('link');
                link.rel = 'preload';
                link.as = asType;
                link.href = url;

                if (asType === 'font') {
                    link.crossOrigin = 'anonymous';
                    // 设置正确的 MIME 类型
                    if (url.includes('.woff2')) link.type = 'font/woff2';
                    else if (url.includes('.woff')) link.type = 'font/woff';
                    else if (url.includes('.ttf')) link.type = 'font/ttf';
                    else if (url.includes('.otf')) link.type = 'font/otf';
                }

                document.head.appendChild(link);
                this.preloaded.set(url, true);
                this.monitor.log(`预加载 ${asType}: ${url}`);
                this.monitor.count('preloaded-resources');
                return true;
            } catch (e) {
                this.monitor.warn(`预加载失败: ${url}`, e);
                return false;
            }
        }

        async extractFontsFromCSS(cssUrl) {
            if (this.cssCache.has(cssUrl)) {
                return this.cssCache.get(cssUrl);
            }

            const operation = async () => {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), this.config.get('preload.fetchTimeout'));

                try {
                    const response = await fetch(cssUrl, {
                        signal: controller.signal,
                        mode: 'cors',
                        credentials: 'omit'
                    });

                    clearTimeout(timeoutId);

                    if (!response.ok) throw new Error(`HTTP ${response.status}`);

                    const text = await response.text();
                    const fontUrls = [];
                    const fontRegex = /url\(["']?([^")']+\.(woff2?|ttf|otf))["']?\)/gi;
                    let match;

                    while ((match = fontRegex.exec(text)) !== null) {
                        const fontUrl = safeParseURL(match[1], cssUrl);
                        if (fontUrl) {
                            fontUrls.push(fontUrl.href);
                        }
                    }

                    this.cssCache.set(cssUrl, fontUrls);
                    return fontUrls;
                } finally {
                    clearTimeout(timeoutId);
                }
            };

            try {
                // 使用重试机制
                return await RetryableOperation.executeWithRetry(
                    operation,
                    this.config.get('preload.retryAttempts')
                );
            } catch (e) {
                this.monitor.warn(`提取字体失败: ${cssUrl}`, e.message);
                this.cssCache.set(cssUrl, []);
                return [];
            }
        }

        // 改进的异步资源扫描 - 更好的并发控制
        async scanExistingResources() {
            // 处理 CSS 文件
            const cssLinks = Array.from(document.querySelectorAll('link[rel="stylesheet"][href]'));
            const jsScripts = Array.from(document.querySelectorAll('script[src]'));

            // 处理 CSS 文件的 Promise 数组
            const cssPromises = cssLinks.map(async link => {
                const cssUrl = link.href;
                const asType = this.getResourceType(cssUrl);

                if (asType === 'style') {
                    this.doPreload(cssUrl, asType);

                    // 异步提取和预加载字体
                    try {
                        const fontUrls = await this.extractFontsFromCSS(cssUrl);
                        fontUrls.forEach(fontUrl => {
                            const fontType = this.getResourceType(fontUrl);
                            if (fontType === 'font') {
                                this.doPreload(fontUrl, fontType);
                            }
                        });
                    } catch (e) {
                        // 忽略字体提取错误，不影响主流程
                        this.monitor.warn(`CSS处理失败: ${cssUrl}`, e);
                    }
                }
            });

            // 处理 JS 文件
            jsScripts.forEach(script => {
                const asType = this.getResourceType(script.src);
                if (asType === 'script') {
                    this.doPreload(script.src, asType);
                }
            });

            // 等待所有 CSS 处理完成，但不阻塞初始化
            try {
                await Promise.allSettled(cssPromises);
                this.monitor.log(`资源扫描完成，处理了 ${cssLinks.length} 个CSS文件和 ${jsScripts.length} 个JS文件`);
            } catch (e) {
                this.monitor.warn('资源扫描过程中出现错误', e);
            }
        }

        setupMutationObserver() {
            this.mutationObserver = new MutationObserver(debounce(async (mutations) => {
                const newCSSLinks = [];
                const newJSScripts = [];

                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        if (node.tagName === 'LINK' && node.rel === 'stylesheet' && node.href) {
                            newCSSLinks.push(node);
                        } else if (node.tagName === 'SCRIPT' && node.src) {
                            newJSScripts.push(node);
                        }
                    });
                });

                // 异步处理新添加的资源
                if (newCSSLinks.length > 0 || newJSScripts.length > 0) {
                    const promises = newCSSLinks.map(async node => {
                        const asType = this.getResourceType(node.href);
                        if (asType === 'style') {
                            this.doPreload(node.href, asType);

                            // 异步处理字体
                            try {
                                const fontUrls = await this.extractFontsFromCSS(node.href);
                                fontUrls.forEach(fontUrl => {
                                    const fontType = this.getResourceType(fontUrl);
                                    if (fontType === 'font') {
                                        this.doPreload(fontUrl, fontType);
                                    }
                                });
                            } catch (e) {
                                // 忽略错误
                            }
                        }
                    });

                    newJSScripts.forEach(node => {
                        const asType = this.getResourceType(node.src);
                        if (asType === 'script') {
                            this.doPreload(node.src, asType);
                        }
                    });

                    // 不等待 Promise 完成，避免阻塞
                    Promise.allSettled(promises).then(() => {
                        this.monitor.log(`动态处理了 ${newCSSLinks.length} 个CSS和 ${newJSScripts.length} 个JS`);
                    });
                }
            }, 200));

            this.mutationObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
        }

        destroy() {
            if (this.mutationObserver) {
                this.mutationObserver.disconnect();
                this.mutationObserver = null;
            }
            this.preloaded.clear();
            this.cssCache.clear();
        }
    }

    // 其他管理器类保持不变，仅引用已改进的配置和监控器
    class PreconnectManager {
        constructor(config, monitor) {
            this.config = config;
            this.monitor = monitor;
            this.connected = new LRUCache(this.config.get('preconnect.maxConnections'));
            this.mutationObserver = null;
        }

        init() {
            if (!this.config.get('preconnect.enabled')) {
                this.monitor.log('预连接功能已禁用');
                return;
            }

            if (this.config.isBlacklisted(location.hostname, 'preconnect')) {
                this.monitor.log('当前站点在预连接黑名单中');
                return;
            }

            this.monitor.start('preconnect-init');
            this.scanExistingResources();
            this.setupMutationObserver();
            this.monitor.end('preconnect-init');
        }

        shouldPreconnect(hostname) {
            if (!hostname || hostname === location.hostname) return false;
            if (this.connected.has(hostname)) return false;

            const whitelist = this.config.get('preconnect.whitelist');
            return whitelist.some(domain => hostname.endsWith(domain));
        }

        doPreconnect(hostname) {
            if (!this.shouldPreconnect(hostname)) return false;

            try {
                const link = document.createElement('link');
                link.rel = 'preconnect';
                link.href = `https://${hostname}`;
                link.crossOrigin = 'anonymous';
                document.head.appendChild(link);

                this.connected.set(hostname, true);
                this.monitor.log(`预连接: ${hostname}`);
                this.monitor.count('preconnected-domains');
                return true;
            } catch (e) {
                this.monitor.warn(`预连接失败: ${hostname}`, e);
                return false;
            }
        }

        extractHostnames(elements) {
            const hostnames = new Set();

            elements.forEach(el => {
                const url = safeParseURL(el.src || el.href);
                if (url && url.hostname !== location.hostname) {
                    hostnames.add(url.hostname);
                }
            });

            return Array.from(hostnames);
        }

        scanExistingResources() {
            const selectors = [
                'script[src]',
                'link[href]',
                'img[src]',
                'audio[src]',
                'video[src]',
                'source[src]'
            ];

            const elements = document.querySelectorAll(selectors.join(','));
            const hostnames = this.extractHostnames(elements);

            let connected = 0;
            hostnames.forEach(hostname => {
                if (this.doPreconnect(hostname)) {
                    connected++;
                }
            });

            this.monitor.log(`扫描完成，预连接 ${connected} 个域名`);
        }

        setupMutationObserver() {
            this.mutationObserver = new MutationObserver(debounce((mutations) => {
                const newElements = [];

                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        if (node.src || node.href) {
                            newElements.push(node);
                        } else if (node.querySelectorAll) {
                            const elements = node.querySelectorAll('script[src], link[href], img[src]');
                            newElements.push(...elements);
                        }
                    });
                });

                if (newElements.length > 0) {
                    const hostnames = this.extractHostnames(newElements);
                    hostnames.forEach(hostname => this.doPreconnect(hostname));
                }
            }, 200));

            this.mutationObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
        }

        destroy() {
            if (this.mutationObserver) {
                this.mutationObserver.disconnect();
                this.mutationObserver = null;
            }
            this.connected.clear();
        }
    }

    class LayoutStabilizer {
        constructor(config, monitor) {
            this.config = config;
            this.monitor = monitor;
            this.injectedStyle = null;
        }

        init() {
            if (!this.config.get('layout.enabled')) {
                this.monitor.log('布局优化功能已禁用');
                return;
            }

            if (this.config.isBlacklisted(location.hostname, 'layout')) {
                this.monitor.log('当前站点在布局优化黑名单中');
                return;
            }

            this.monitor.start('layout-init');
            this.injectStabilizationStyles();
            this.monitor.end('layout-init');
        }

        generateCSS() {
            const styles = [];

            if (this.config.get('layout.stableImages')) {
                styles.push(`
                    /* 图片布局稳定性优化 */
                    img:not([width]):not([height]):not([style*="width"]):not([style*="height"]) {
                        min-height: 1px;
                        // max-width: 100%;
                        // height: auto;
                    }

                    /* 现代浏览器的 aspect-ratio 支持 */
                    @supports (aspect-ratio: 1/1) {
                        img[width][height]:not([style*="aspect-ratio"]) {
                            aspect-ratio: attr(width) / attr(height);
                        }
                    }
                `);
            }

            if (this.config.get('layout.stableIframes')) {
                styles.push(`
                    /* iframe 布局稳定性优化 */
                    iframe:not([width]):not([height]):not([style*="width"]):not([style*="height"]) {
                        // width: 100%;
                        // height: auto;
                        min-height: 1px;
                    }

                    @supports (aspect-ratio: 16/9) {
                        iframe:not([style*="aspect-ratio"]) {
                            aspect-ratio: 16/9;
                        }
                    }
                `);
            }

            return styles.join('\n');
        }

        injectStabilizationStyles() {
            const css = this.generateCSS().trim();
            if (!css) return;

            try {
                this.injectedStyle = document.createElement('style');
                this.injectedStyle.setAttribute('data-optimizer', 'layout-stabilizer');
                this.injectedStyle.textContent = css;

                // 优先插入到 head，如果不存在则插入到 document
                const target = document.head || document.documentElement;
                target.appendChild(this.injectedStyle);

                this.monitor.log('布局稳定性样式已注入');
            } catch (e) {
                this.monitor.warn('注入布局样式失败', e);
            }
        }

        destroy() {
            if (this.injectedStyle && this.injectedStyle.parentNode) {
                this.injectedStyle.parentNode.removeChild(this.injectedStyle);
                this.injectedStyle = null;
                this.monitor.log('布局样式已移除');
            }
        }
    }

    // ========================
    // 主优化器
    // ========================

    /**
     * 主优化器类 - v2.0
     */
    class WebOptimizer {
        constructor() {
            this.config = new ConfigManager();
            this.monitor = new PerformanceMonitor(this.config.get('debug'));

            // 优化模块
            this.modules = {
                lazyLoad: new LazyLoadManager(this.config, this.monitor),
                preconnect: new PreconnectManager(this.config, this.monitor),
                preload: new PreloadManager(this.config, this.monitor),
                layout: new LayoutStabilizer(this.config, this.monitor)
            };

            this.initialized = false;
            this.cleanupTasks = [];

            // v2.0 新增：可视化配置界面
            this.visualConfig = null;
        }

        async init() {
            if (this.initialized) return;

            this.monitor.start('total-init');
            this.monitor.log('Web Optimizer Enhanced v2.0 开始初始化');

            // 检查全局黑名单
            if (this.config.isBlacklisted(location.hostname)) {
                this.monitor.log('当前站点在全局黑名单中，跳过所有优化');
                return;
            }

            try {
                // 等待 DOM 基本可用
                if (document.readyState === 'loading') {
                    await new Promise(resolve => {
                        document.addEventListener('DOMContentLoaded', resolve, { once: true });
                    });
                }

                // 初始化各个模块 - 改进的错误隔离
                const initPromises = Object.entries(this.modules).map(async ([name, module]) => {
                    try {
                        this.monitor.start(`init-${name}`);
                        await module.init();
                        this.monitor.end(`init-${name}`);
                        return { name, success: true };
                    } catch (e) {
                        this.monitor.error(`模块 ${name} 初始化失败`, e);
                        return { name, success: false, error: e };
                    }
                });

                const results = await Promise.allSettled(initPromises);
                const successCount = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
                this.monitor.log(`模块初始化完成，成功: ${successCount}/${Object.keys(this.modules).length}`);

                // 设置清理任务
                this.setupCleanupTasks();

                // v2.0 新增：初始化可视化配置界面
                this.initVisualConfig();

                this.initialized = true;
                this.monitor.end('total-init');
                this.monitor.log('Web Optimizer Enhanced v2.0 初始化完成');

                // 显示初始化报告
                this.showInitReport();

            } catch (e) {
                this.monitor.error('初始化失败', e);
            }
        }

        // v2.0 新增：初始化可视化配置界面
        initVisualConfig() {
            try {
                // 延迟初始化，确保页面稳定
                setTimeout(() => {
                    this.visualConfig = new VisualConfigManager(this.config);
                }, 1000);
            } catch (e) {
                this.monitor.warn('可视化配置界面初始化失败', e);
            }
        }

        setupCleanupTasks() {
            // 定期清理缓存
            const cleanupInterval = setInterval(() => {
                Object.values(this.modules).forEach(module => {
                    if (module.cssCache) module.cssCache.clear();
                    if (module.connected) module.connected.clear();
                    if (module.preloaded) module.preloaded.clear();
                });
                this.monitor.log('定期清理完成');
            }, 10 * 60 * 1000); // 10分钟

            this.cleanupTasks.push(() => clearInterval(cleanupInterval));

            // 页面卸载时清理
            const cleanup = () => {
                this.destroy();
            };

            window.addEventListener('beforeunload', cleanup);
            this.cleanupTasks.push(() => {
                window.removeEventListener('beforeunload', cleanup);
            });
        }

        showInitReport() {
            if (!this.config.get('debug')) return;

            console.groupCollapsed('[Web Optimizer Enhanced v2.0] 初始化报告');
            console.log('版本: 2.0');
            console.log('当前域名:', location.hostname);
            console.log('启用的功能:', Object.entries(this.config.config)
                .filter(([key, value]) => typeof value === 'object' && value.enabled)
                .map(([key]) => key)
            );

            // 显示性能计数器
            console.log('性能计数:', {
                'processed-images': this.monitor.getCounter('processed-images'),
                'lazy-loaded-images': this.monitor.getCounter('lazy-loaded-images'),
                'preconnected-domains': this.monitor.getCounter('preconnected-domains'),
                'preloaded-resources': this.monitor.getCounter('preloaded-resources')
            });

            console.log('配置详情:', this.config.config);
            console.log('💡 提示: 按 Ctrl+Shift+O 打开可视化配置界面');
            console.groupEnd();
        }

        destroy() {
            if (!this.initialized) return;

            this.monitor.log('开始清理资源');

            // 清理各个模块
            Object.values(this.modules).forEach(module => {
                if (module.destroy) {
                    try {
                        module.destroy();
                    } catch (e) {
                        this.monitor.warn('模块清理失败', e);
                    }
                }
            });

            // 执行清理任务
            this.cleanupTasks.forEach(task => {
                try {
                    task();
                } catch (e) {
                    this.monitor.warn('清理任务执行失败', e);
                }
            });
            this.cleanupTasks = [];

            this.initialized = false;
            this.monitor.log('资源清理完成');
        }

        // 公共 API - 增强版
        updateConfig(path, value) {
            this.config.set(path, value);
            this.monitor.log(`配置已更新: ${path} = ${value}`);

            // 如果是调试模式变更，更新监控器
            if (path === 'debug') {
                this.monitor.debug = value;
            }
        }

        getStats() {
            return {
                initialized: this.initialized,
                version: '2.0',
                hostname: location.hostname,
                config: this.config.config,
                modules: Object.keys(this.modules),
                counters: {
                    'processed-images': this.monitor.getCounter('processed-images'),
                    'lazy-loaded-images': this.monitor.getCounter('lazy-loaded-images'),
                    'preconnected-domains': this.monitor.getCounter('preconnected-domains'),
                    'preloaded-resources': this.monitor.getCounter('preloaded-resources')
                }
            };
        }

        // 新增：性能报告
        getPerformanceReport() {
            const stats = this.getStats();
            const imageStats = {
                total: document.querySelectorAll('img').length,
                processed: stats.counters['processed-images'],
                lazyLoaded: stats.counters['lazy-loaded-images']
            };

            return {
                ...stats,
                performance: {
                    images: imageStats,
                    domains: stats.counters['preconnected-domains'],
                    resources: stats.counters['preloaded-resources'],
                    efficiency: imageStats.total > 0 ? (imageStats.processed / imageStats.total * 100).toFixed(1) + '%' : '0%'
                }
            };
        }

        // v2.0 新增：打开/关闭配置界面
        openConfig() {
            if (this.visualConfig) {
                this.visualConfig.show();
            }
        }

        closeConfig() {
            if (this.visualConfig) {
                this.visualConfig.hide();
            }
        }

        toggleConfig() {
            if (this.visualConfig) {
                this.visualConfig.toggle();
            }
        }
    }

    // ========================
    // 全局初始化
    // ========================

    // 创建全局实例
    const optimizer = new WebOptimizer();

    // 暴露到全局作用域（调试用）
    if (typeof window !== 'undefined') {
        window.WebOptimizer = optimizer;

        // v2.0 新增：暴露工具函数供调试使用
        window.WebOptimizerUtils = {
            debounce,
            throttle,
            safeParseURL,
            isElementVisible,
            deepMerge,
            delay,
            RetryableOperation
        };
    }

    // 启动优化器
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => optimizer.init());
    } else {
        // 延迟一点时间，确保页面基本稳定
        setTimeout(() => optimizer.init(), 100);
    }

})();