customer-chat-sdk 1.0.27 → 1.0.29

package/dist/customer-sdk.cjs.js

@@ -926,28 +926,6 @@ class IframeManager {
 }
 
 // @ts-ignore - modern-screenshot may not have type definitions
-// Worker URL 将在创建上下文时动态获取
-// 在 Vite 环境中可以使用: import workerUrl from 'modern-screenshot/worker?url'
-// 在 Rollup 中，modern-screenshot 会自动处理 worker URL
-let workerUrl = undefined;
-// 尝试动态获取 worker URL（仅在支持的环境中）
-async function getWorkerUrl() {
-    if (workerUrl) {
-        return workerUrl;
-    }
-    try {
-        // 尝试使用 Vite 的 ?url 语法（仅在 Vite 环境中有效）
-        // @ts-ignore - Vite 特有的 ?url 语法
-        const workerModule = await import('modern-screenshot/worker?url');
-        workerUrl = workerModule.default || workerModule;
-        return workerUrl;
-    }
-    catch {
-        // Rollup 或其他构建工具不支持 ?url 语法
-        // modern-screenshot 会自动处理 worker URL，返回 undefined 即可
-        return undefined;
-    }
-}
 /**
  * 截图管理器
  * 负责页面截图、压缩和上传功能
@@ -977,8 +955,16 @@ class ScreenshotManager {
         this.dynamicInterval = null;
         // 过期定时器
         this.expirationTimer = null;
-        // 图片代理缓存
+        // 图片代理缓存（带过期时间）
         this.imageProxyCache = new Map();
+        // IndexedDB 缓存（持久化）
+        this.indexedDBCache = null;
+        this.indexedDBReady = false;
+        // Intersection Observer（用于高效检测可见性）
+        this.intersectionObserver = null;
+        this.visibleElementsCache = new Set();
+        // 预连接状态
+        this.preconnected = false;
         // 全局错误处理器
         this.globalErrorHandler = null;
         this.globalRejectionHandler = null;
@@ -997,10 +983,40 @@ class ScreenshotManager {
             engine: options.engine ?? 'modern-screenshot',
             corsMode: options.corsMode ?? 'canvas-proxy',
             silentMode: options.silentMode ?? false,
-            maxRetries: options.maxRetries ?? 2
+            maxRetries: options.maxRetries ?? 2,
+            preloadImages: options.preloadImages ?? false, // 默认不预加载，按需加载
+            maxConcurrentDownloads: options.maxConcurrentDownloads ?? 10, // 增加并发数
+            onlyVisibleImages: options.onlyVisibleImages ?? true, // 默认只处理可视区域
+            imageCacheTTL: options.imageCacheTTL ?? 600000, // 默认10分钟（600000ms）
+            useIndexedDB: options.useIndexedDB ?? true, // 默认启用 IndexedDB 持久化缓存
+            usePreconnect: options.usePreconnect ?? true, // 默认预连接代理服务器
+            imageLoadTimeout: options.imageLoadTimeout ?? 5000, // 默认5秒超时
+            useIntersectionObserver: options.useIntersectionObserver ?? true, // 默认使用 Intersection Observer
+            fetchPriority: options.fetchPriority ?? 'high', // 默认高优先级
+            maxCacheSize: options.maxCacheSize ?? 50, // 默认最大50MB
+            maxCacheAge: options.maxCacheAge ?? 86400000 // 默认24小时（86400000ms）
         };
         this.setupMessageListener();
         this.setupVisibilityChangeListener();
+        // 启动缓存清理定时器
+        this.startCacheCleanup();
+        // 预连接代理服务器（如果启用）
+        if (this.options.usePreconnect && this.options.proxyUrl) {
+            this.preconnectProxy();
+        }
+        // 初始化 Intersection Observer（如果启用）
+        if (this.options.useIntersectionObserver && this.options.onlyVisibleImages) {
+            this.initIntersectionObserver();
+        }
+        // 初始化 IndexedDB（如果启用）
+        if (this.options.useIndexedDB) {
+            this.initIndexedDB().catch(() => {
+                // IndexedDB 初始化失败，回退到内存缓存
+                if (!this.options.silentMode) {
+                    console.warn('📸 IndexedDB 初始化失败，使用内存缓存');
+                }
+            });
+        }
     }
     /**
      * 设置目标元素
@@ -1309,14 +1325,28 @@ class ScreenshotManager {
             if (!this.options.silentMode) {
                 console.log(`📸 使用截图引擎: ${selectedEngine} (Worker 模式)`);
             }
-            // 预处理网络图片
-            if (this.options.enableCORS) {
+            // 优化：如果启用预加载，才预处理图片；否则让 modern-screenshot 按需加载
+            if (this.options.preloadImages && this.options.enableCORS) {
+                // 清理过期缓存
+                this.cleanExpiredCache();
+                // 如果启用 IndexedDB，也清理 IndexedDB 缓存
+                if (this.options.useIndexedDB) {
+                    await this.cleanIndexedDBCache();
+                }
                 await this.preprocessNetworkImages(this.targetElement);
                 await this.waitForImagesToLoad(this.targetElement);
             }
+            else {
+                // 即使不预加载，也清理一下过期缓存
+                this.cleanExpiredCache();
+                // 如果启用 IndexedDB，也清理 IndexedDB 缓存
+                if (this.options.useIndexedDB) {
+                    await this.cleanIndexedDBCache();
+                }
+            }
             let dataUrl;
-            // 等待一小段时间，确保 DOM 更新完成
-            await new Promise(resolve => setTimeout(resolve, 100));
+            // 等待一小段时间，确保 DOM 更新完成（减少等待时间）
+            await new Promise(resolve => setTimeout(resolve, 50));
             // 使用 modern-screenshot 截图（启用 Worker）
             dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
             const timestamp = Date.now();
@@ -1413,9 +1443,25 @@ class ScreenshotManager {
             }
             // 如果配置了代理服务器，使用代理处理跨域图片
             if (this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
-                // 检查缓存
-                if (this.imageProxyCache.has(url)) {
-                    return this.imageProxyCache.get(url);
+                // 检查内存缓存（优先使用缓存，带过期时间检查）
+                const cachedDataUrl = this.getCachedImage(url);
+                if (cachedDataUrl) {
+                    if (!this.options.silentMode) {
+                        console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
+                    }
+                    return cachedDataUrl;
+                }
+                // 检查 IndexedDB 缓存（如果启用）
+                if (this.options.useIndexedDB) {
+                    const indexedDBCache = await this.getIndexedDBCache(url);
+                    if (indexedDBCache) {
+                        // 同步到内存缓存
+                        this.setCachedImage(url, indexedDBCache);
+                        if (!this.options.silentMode) {
+                            console.log(`📸 ✅ 使用 IndexedDB 缓存图片: ${url.substring(0, 50)}...`);
+                        }
+                        return indexedDBCache;
+                    }
                 }
                 try {
                     // 构建代理请求参数
@@ -1429,24 +1475,43 @@ class ScreenshotManager {
                     let baseUrl = this.options.proxyUrl;
                     baseUrl = baseUrl.replace(/[?&]$/, '');
                     const proxyUrl = `${baseUrl}?${params.toString()}`;
-                    // 请求代理服务器
-                    const response = await fetch(proxyUrl, {
-                        method: 'GET',
-                        mode: 'cors',
-                        credentials: 'omit',
-                        headers: {
-                            'Accept': 'image/*'
-                        },
-                        cache: 'no-cache'
-                    });
-                    if (!response.ok) {
-                        throw new Error(`代理请求失败: ${response.status}`);
+                    // 请求代理服务器（优化：添加超时控制和优先级）
+                    const controller = new AbortController();
+                    const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
+                    try {
+                        const fetchOptions = {
+                            method: 'GET',
+                            mode: 'cors',
+                            credentials: 'omit',
+                            headers: {
+                                'Accept': 'image/*'
+                            },
+                            cache: 'no-cache',
+                            signal: controller.signal
+                        };
+                        // 添加 fetch priority（如果支持）
+                        if ('priority' in fetchOptions) {
+                            fetchOptions.priority = this.options.fetchPriority;
+                        }
+                        const response = await fetch(proxyUrl, fetchOptions);
+                        clearTimeout(timeoutId);
+                        if (!response.ok) {
+                            throw new Error(`代理请求失败: ${response.status}`);
+                        }
+                        const blob = await response.blob();
+                        const dataUrl = await this.blobToDataUrl(blob);
+                        // 缓存结果（带时间戳，10分钟有效）
+                        this.setCachedImage(url, dataUrl);
+                        // 如果启用 IndexedDB，也保存到 IndexedDB
+                        if (this.options.useIndexedDB) {
+                            await this.setIndexedDBCache(url, dataUrl);
+                        }
+                        return dataUrl;
+                    }
+                    catch (fetchError) {
+                        clearTimeout(timeoutId);
+                        throw fetchError;
                     }
-                    const blob = await response.blob();
-                    const dataUrl = await this.blobToDataUrl(blob);
-                    // 缓存结果
-                    this.imageProxyCache.set(url, dataUrl);
-                    return dataUrl;
                 }
                 catch (error) {
                     if (!this.options.silentMode) {
@@ -1487,11 +1552,7 @@ class ScreenshotManager {
             if (this.options.scale !== 1) {
                 contextOptions.scale = isMobile ? 0.8 : this.options.scale;
             }
-            // 尝试设置 workerUrl（如果可用）
-            const resolvedWorkerUrl = await getWorkerUrl();
-            if (resolvedWorkerUrl) {
-                contextOptions.workerUrl = resolvedWorkerUrl;
-            }
+            // modern-screenshot 会自动处理 worker URL，不需要手动设置
             // 创建 Worker 上下文
             this.screenshotContext = await modernScreenshot.createContext(element, contextOptions);
         }
@@ -1555,76 +1616,399 @@ class ScreenshotManager {
         }
     }
     /**
-     * 预处理网络图片
+     * 预连接代理服务器（优化网络性能）
+     */
+    preconnectProxy() {
+        if (this.preconnected || !this.options.proxyUrl) {
+            return;
+        }
+        try {
+            const proxyOrigin = new URL(this.options.proxyUrl).origin;
+            const link = document.createElement('link');
+            link.rel = 'preconnect';
+            link.href = proxyOrigin;
+            link.crossOrigin = 'anonymous';
+            document.head.appendChild(link);
+            this.preconnected = true;
+            if (!this.options.silentMode) {
+                console.log(`📸 ✅ 已预连接代理服务器: ${proxyOrigin}`);
+            }
+        }
+        catch (e) {
+            // 预连接失败，不影响功能
+        }
+    }
+    /**
+     * 初始化 Intersection Observer（优化可见性检测）
+     */
+    initIntersectionObserver() {
+        if (!('IntersectionObserver' in window)) {
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.visibleElementsCache.add(entry.target);
+                }
+                else {
+                    this.visibleElementsCache.delete(entry.target);
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: '50px', // 提前50px开始加载
+            threshold: 0.01
+        });
+    }
+    /**
+     * 初始化 IndexedDB（持久化缓存）
+     */
+    async initIndexedDB() {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open('screenshot-cache', 1);
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => {
+                this.indexedDBCache = request.result;
+                this.indexedDBReady = true;
+                // 初始化后立即清理过期和超大小的缓存
+                this.cleanIndexedDBCache().catch(() => {
+                    // 清理失败不影响功能
+                });
+                resolve();
+            };
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                if (!db.objectStoreNames.contains('images')) {
+                    const store = db.createObjectStore('images', { keyPath: 'url' });
+                    // 创建索引用于按时间排序
+                    store.createIndex('timestamp', 'timestamp', { unique: false });
+                }
+            };
+        });
+    }
+    /**
+     * 从 IndexedDB 获取缓存
+     */
+    async getIndexedDBCache(url) {
+        if (!this.indexedDBReady || !this.indexedDBCache) {
+            return null;
+        }
+        try {
+            const transaction = this.indexedDBCache.transaction(['images'], 'readonly');
+            const store = transaction.objectStore('images');
+            const request = store.get(url);
+            return new Promise((resolve) => {
+                request.onsuccess = () => {
+                    const result = request.result;
+                    if (result) {
+                        const now = Date.now();
+                        const age = now - result.timestamp;
+                        // 检查是否超过最大缓存时间
+                        if (age > this.options.maxCacheAge) {
+                            // 缓存过期，删除
+                            this.deleteIndexedDBCache(url);
+                            resolve(null);
+                            return;
+                        }
+                        // 返回缓存数据（即使超过 imageCacheTTL，只要未超过 maxCacheAge 仍可使用）
+                        resolve(result.dataUrl);
+                    }
+                    else {
+                        resolve(null);
+                    }
+                };
+                request.onerror = () => resolve(null);
+            });
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * 设置 IndexedDB 缓存（带大小和时间控制）
+     */
+    async setIndexedDBCache(url, dataUrl) {
+        if (!this.indexedDBReady || !this.indexedDBCache) {
+            return;
+        }
+        try {
+            // 计算当前缓存大小
+            const currentSize = await this.getIndexedDBCacheSize();
+            const newItemSize = this.estimateDataUrlSize(dataUrl);
+            const maxSizeBytes = (this.options.maxCacheSize || 50) * 1024 * 1024; // 转换为字节
+            // 如果添加新项后超过限制，清理最旧的数据
+            if (currentSize + newItemSize > maxSizeBytes) {
+                await this.cleanIndexedDBCacheBySize(maxSizeBytes - newItemSize);
+            }
+            const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
+            const store = transaction.objectStore('images');
+            store.put({ url, dataUrl, timestamp: Date.now() });
+        }
+        catch {
+            // IndexedDB 写入失败，忽略
+        }
+    }
+    /**
+     * 估算 data URL 的大小（字节）
+     */
+    estimateDataUrlSize(dataUrl) {
+        // Base64 编码后的大小约为原始大小的 4/3
+        // data:image/xxx;base64, 前缀约 22-30 字节
+        const base64Data = dataUrl.split(',')[1] || '';
+        return Math.ceil(base64Data.length * 0.75) + 30;
+    }
+    /**
+     * 获取 IndexedDB 当前缓存大小（字节）
+     */
+    async getIndexedDBCacheSize() {
+        if (!this.indexedDBReady || !this.indexedDBCache) {
+            return 0;
+        }
+        try {
+            const transaction = this.indexedDBCache.transaction(['images'], 'readonly');
+            const store = transaction.objectStore('images');
+            const request = store.getAll();
+            return new Promise((resolve) => {
+                request.onsuccess = () => {
+                    const items = request.result || [];
+                    let totalSize = 0;
+                    items.forEach((item) => {
+                        totalSize += this.estimateDataUrlSize(item.dataUrl);
+                    });
+                    resolve(totalSize);
+                };
+                request.onerror = () => resolve(0);
+            });
+        }
+        catch {
+            return 0;
+        }
+    }
+    /**
+     * 清理 IndexedDB 缓存（按时间和大小）
+     */
+    async cleanIndexedDBCache() {
+        if (!this.indexedDBReady || !this.indexedDBCache) {
+            return;
+        }
+        try {
+            const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
+            const store = transaction.objectStore('images');
+            const index = store.index('timestamp');
+            const request = index.getAll();
+            return new Promise((resolve) => {
+                request.onsuccess = () => {
+                    const items = request.result || [];
+                    const now = Date.now();
+                    const expiredUrls = [];
+                    let currentSize = 0;
+                    const maxSizeBytes = (this.options.maxCacheSize || 50) * 1024 * 1024;
+                    // 按时间排序（最旧的在前）
+                    items.sort((a, b) => a.timestamp - b.timestamp);
+                    // 清理过期数据
+                    items.forEach((item) => {
+                        const age = now - item.timestamp;
+                        if (age > this.options.maxCacheAge) {
+                            expiredUrls.push(item.url);
+                        }
+                        else {
+                            currentSize += this.estimateDataUrlSize(item.dataUrl);
+                        }
+                    });
+                    // 如果仍然超过大小限制，删除最旧的数据
+                    const urlsToDelete = [...expiredUrls];
+                    if (currentSize > maxSizeBytes) {
+                        for (const item of items) {
+                            if (expiredUrls.includes(item.url))
+                                continue;
+                            currentSize -= this.estimateDataUrlSize(item.dataUrl);
+                            urlsToDelete.push(item.url);
+                            if (currentSize <= maxSizeBytes) {
+                                break;
+                            }
+                        }
+                    }
+                    // 删除过期和超大小的数据
+                    urlsToDelete.forEach((url) => {
+                        store.delete(url);
+                    });
+                    if (urlsToDelete.length > 0 && !this.options.silentMode) {
+                        console.log(`📸 IndexedDB 清理了 ${urlsToDelete.length} 个缓存项（过期或超大小）`);
+                    }
+                    resolve();
+                };
+                request.onerror = () => resolve();
+            });
+        }
+        catch {
+            // 清理失败，忽略
+        }
+    }
+    /**
+     * 按大小清理 IndexedDB 缓存
+     */
+    async cleanIndexedDBCacheBySize(targetSize) {
+        if (!this.indexedDBReady || !this.indexedDBCache) {
+            return;
+        }
+        try {
+            const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
+            const store = transaction.objectStore('images');
+            const index = store.index('timestamp');
+            const request = index.getAll();
+            return new Promise((resolve) => {
+                request.onsuccess = () => {
+                    const items = request.result || [];
+                    // 按时间排序（最旧的在前）
+                    items.sort((a, b) => a.timestamp - b.timestamp);
+                    let currentSize = 0;
+                    const urlsToDelete = [];
+                    // 计算当前大小
+                    items.forEach((item) => {
+                        currentSize += this.estimateDataUrlSize(item.dataUrl);
+                    });
+                    // 如果超过目标大小，删除最旧的数据
+                    if (currentSize > targetSize) {
+                        for (const item of items) {
+                            if (currentSize <= targetSize) {
+                                break;
+                            }
+                            currentSize -= this.estimateDataUrlSize(item.dataUrl);
+                            urlsToDelete.push(item.url);
+                        }
+                    }
+                    // 删除数据
+                    urlsToDelete.forEach((url) => {
+                        store.delete(url);
+                    });
+                    if (urlsToDelete.length > 0 && !this.options.silentMode) {
+                        console.log(`📸 IndexedDB 清理了 ${urlsToDelete.length} 个缓存项（超过大小限制）`);
+                    }
+                    resolve();
+                };
+                request.onerror = () => resolve();
+            });
+        }
+        catch {
+            // 清理失败，忽略
+        }
+    }
+    /**
+     * 删除 IndexedDB 缓存
+     */
+    async deleteIndexedDBCache(url) {
+        if (!this.indexedDBReady || !this.indexedDBCache) {
+            return;
+        }
+        try {
+            const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
+            const store = transaction.objectStore('images');
+            store.delete(url);
+        }
+        catch {
+            // 忽略错误
+        }
+    }
+    /**
+     * 检查元素是否在可视区域内（优化：使用 Intersection Observer 或 getBoundingClientRect）
+     */
+    isElementVisible(element, container) {
+        if (!this.options.onlyVisibleImages) {
+            return true; // 如果禁用可视区域检测，返回 true
+        }
+        // 如果使用 Intersection Observer 且元素已在缓存中，直接返回
+        if (this.options.useIntersectionObserver && this.intersectionObserver) {
+            if (this.visibleElementsCache.has(element)) {
+                return true;
+            }
+            // 观察元素（如果还没有观察）
+            this.intersectionObserver.observe(element);
+        }
+        // 回退到 getBoundingClientRect
+        try {
+            const rect = element.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            // 检查元素是否与容器有交集（考虑滚动位置）
+            const isIntersecting = !(rect.bottom < containerRect.top ||
+                rect.top > containerRect.bottom ||
+                rect.right < containerRect.left ||
+                rect.left > containerRect.right) && (rect.width > 0 && rect.height > 0 && // 元素有尺寸
+                window.getComputedStyle(element).display !== 'none' && // 元素可见
+                window.getComputedStyle(element).visibility !== 'hidden' &&
+                window.getComputedStyle(element).opacity !== '0');
+            // 更新 Intersection Observer 缓存
+            if (this.options.useIntersectionObserver && this.intersectionObserver) {
+                if (isIntersecting) {
+                    this.visibleElementsCache.add(element);
+                }
+                else {
+                    this.visibleElementsCache.delete(element);
+                }
+            }
+            return isIntersecting;
+        }
+        catch {
+            return true; // 出错时返回 true，保守处理
+        }
+    }
+    /**
+     * 预处理网络图片（优化：只处理可视区域内的图片，增加并发数）
      */
     async preprocessNetworkImages(element) {
         const images = element.querySelectorAll('img');
+        // 过滤：只处理跨域图片，并且如果在可视区域内
         const networkImages = Array.from(images).filter(img => {
             const isBlob = img.src.startsWith('blob:');
             const isData = img.src.startsWith('data:');
             const isSameOrigin = img.src.startsWith(window.location.origin);
-            return !isBlob && !isData && !isSameOrigin;
+            const isVisible = this.isElementVisible(img, element);
+            return !isBlob && !isData && !isSameOrigin && isVisible;
         });
         if (networkImages.length === 0) {
             return;
         }
         if (!this.options.silentMode) {
-            console.log(`📸 发现 ${networkImages.length} 个跨域图片，开始预加载并缓存...`);
+            const totalImages = images.length;
+            console.log(`📸 发现 ${networkImages.length}/${totalImages} 个可视区域内的跨域图片，开始并行预加载...`);
         }
         // 如果配置了 proxyUrl，使用代理处理跨域图片
         if (this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
             if (!this.options.silentMode) {
                 console.log(`📸 使用代理服务器处理跨域图片: ${this.options.proxyUrl}`);
             }
-            // 分批处理图片，避免同时处理太多导致主线程阻塞
-            const batchSize = 5;
+            // 优化：增加并发数，使用更大的批次
+            const batchSize = this.options.maxConcurrentDownloads || 10;
             const batches = [];
             for (let i = 0; i < networkImages.length; i += batchSize) {
                 batches.push(networkImages.slice(i, i + batchSize));
             }
-            for (let batchIndex = 0; batchIndex < batches.length; batchIndex++) {
-                const batch = batches[batchIndex];
-                // 如果不是第一批，等待浏览器空闲时间
-                if (batchIndex > 0) {
-                    await new Promise((resolve) => {
-                        if ('requestIdleCallback' in window) {
-                            requestIdleCallback(() => resolve(), { timeout: 100 });
-                        }
-                        else {
-                            setTimeout(() => resolve(), 50);
-                        }
-                    });
-                }
+            // 并行处理所有批次（不再等待空闲时间）
+            await Promise.all(batches.map(async (batch) => {
                 // 并发处理当前批次
                 await Promise.all(batch.map(async (img) => {
                     const originalSrc = img.src;
-                    // 检查缓存
-                    if (this.imageProxyCache.has(originalSrc)) {
-                        if (!this.options.silentMode) {
-                            console.log(`📸 使用缓存的代理图片: ${originalSrc.substring(0, 100)}...`);
-                        }
+                    // 检查缓存（带过期时间）
+                    if (this.getCachedImage(originalSrc)) {
                         return;
                     }
                     try {
                         // 使用代理服务器获取图片
                         const dataUrl = await this.proxyImage(originalSrc);
                         if (dataUrl) {
-                            // 缓存 data URL
-                            this.imageProxyCache.set(originalSrc, dataUrl);
-                            if (!this.options.silentMode) {
-                                console.log(`📸 ✅ 代理预加载成功（已缓存）: ${originalSrc.substring(0, 100)}...`);
-                            }
+                            // 缓存 data URL（带时间戳）
+                            this.setCachedImage(originalSrc, dataUrl);
                         }
                     }
                     catch (error) {
+                        // 静默失败，不影响其他图片
                         if (!this.options.silentMode) {
-                            console.warn(`📸 ❌ 代理预加载失败: ${originalSrc.substring(0, 100)}...`, error);
+                            console.warn(`📸 ❌ 代理预加载失败: ${originalSrc.substring(0, 50)}...`);
                         }
                     }
                 }));
-            }
+            }));
             if (!this.options.silentMode) {
-                console.log(`📸 预处理完成，缓存了 ${this.imageProxyCache.size} 个代理图片`);
+                console.log(`📸 ✅ 预处理完成，缓存了 ${this.imageProxyCache.size} 个代理图片`);
             }
         }
     }
@@ -1693,7 +2077,7 @@ class ScreenshotManager {
         });
     }
     /**
-     * 等待图片加载完成
+     * 等待图片加载完成（优化：使用更短的超时和 Promise.race）
      */
     async waitForImagesToLoad(element) {
         const images = element.querySelectorAll('img');
@@ -1702,32 +2086,33 @@ class ScreenshotManager {
             if (img.complete) {
                 return;
             }
-            imagePromises.push(new Promise((resolve) => {
-                const timeout = setTimeout(() => {
-                    resolve();
-                }, 5000);
-                img.onload = () => {
-                    clearTimeout(timeout);
-                    resolve();
-                };
-                img.onerror = () => {
-                    clearTimeout(timeout);
-                    resolve();
-                };
-            }));
+            // 使用更短的超时时间（可配置）
+            const timeout = this.options.imageLoadTimeout || 5000;
+            imagePromises.push(Promise.race([
+                new Promise((resolve) => {
+                    img.onload = () => resolve();
+                    img.onerror = () => resolve(); // 失败也继续
+                }),
+                new Promise((resolve) => {
+                    setTimeout(() => resolve(), timeout);
+                })
+            ]));
         });
         if (imagePromises.length > 0) {
             await Promise.all(imagePromises);
         }
     }
     /**
-     * 等待 CSS 和字体加载完成
+     * 等待 CSS 和字体加载完成（优化：减少等待时间，使用 requestAnimationFrame）
      */
     async waitForStylesAndFonts() {
+        // 使用 requestAnimationFrame 优化渲染时机
         return new Promise((resolve) => {
-            setTimeout(() => {
-                resolve();
-            }, 100);
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    resolve();
+                }, 30); // 减少到30ms
+            });
         });
     }
     /**
@@ -1947,9 +2332,86 @@ class ScreenshotManager {
             this.messageHandler = null;
         }
         this.removeGlobalErrorHandlers();
+        // 清理 Intersection Observer
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+            this.visibleElementsCache.clear();
+        }
+        // 关闭 IndexedDB
+        if (this.indexedDBCache) {
+            this.indexedDBCache.close();
+            this.indexedDBCache = null;
+            this.indexedDBReady = false;
+        }
         // 清理图片代理缓存
         this.imageProxyCache.clear();
     }
+    /**
+     * 获取缓存的图片（检查是否过期）
+     */
+    getCachedImage(url) {
+        const cached = this.imageProxyCache.get(url);
+        if (!cached) {
+            return null;
+        }
+        // 检查是否过期（10分钟）
+        const now = Date.now();
+        const age = now - cached.timestamp;
+        if (age > this.options.imageCacheTTL) {
+            // 缓存已过期，删除
+            this.imageProxyCache.delete(url);
+            return null;
+        }
+        return cached.dataUrl;
+    }
+    /**
+     * 设置缓存的图片（带时间戳）
+     */
+    setCachedImage(url, dataUrl) {
+        this.imageProxyCache.set(url, {
+            dataUrl,
+            timestamp: Date.now()
+        });
+    }
+    /**
+     * 清理过期缓存
+     */
+    cleanExpiredCache() {
+        const now = Date.now();
+        const expiredUrls = [];
+        this.imageProxyCache.forEach((cached, url) => {
+            const age = now - cached.timestamp;
+            if (age > this.options.imageCacheTTL) {
+                expiredUrls.push(url);
+            }
+        });
+        expiredUrls.forEach(url => {
+            this.imageProxyCache.delete(url);
+        });
+        if (expiredUrls.length > 0 && !this.options.silentMode) {
+            console.log(`📸 清理了 ${expiredUrls.length} 个过期缓存`);
+        }
+    }
+    /**
+     * 定期清理过期缓存（可选，在截图时也会自动清理）
+     */
+    startCacheCleanup() {
+        // 每5分钟清理一次过期缓存
+        setInterval(() => {
+            this.cleanExpiredCache();
+            // 如果启用 IndexedDB，也清理 IndexedDB 缓存
+            if (this.options.useIndexedDB) {
+                this.cleanIndexedDBCache().catch(() => {
+                    // 清理失败，忽略
+                });
+            }
+            if (!this.options.silentMode) {
+                const memoryCacheSize = this.imageProxyCache.size;
+                console.log(`📸 清理过期缓存，内存缓存数量: ${memoryCacheSize}`);
+            }
+        }, 300000); // 5分钟
+    }
     /**
      * 获取状态
      */