customer-chat-sdk 1.0.28 → 1.0.30

package/dist/customer-sdk.esm.js

@@ -1,4 +1,5 @@
 import { destroyContext, createContext, domToPng } from 'modern-screenshot';
+import snapdom from '@zumer/snapdom';
 
 // 直接使用base64字符串，避免打包后路径问题
 const iconImage = 'data:image/png;base64,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';
@@ -922,28 +923,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;
-    }
-}
 /**
  * 截图管理器
  * 负责页面截图、压缩和上传功能
@@ -973,8 +952,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;
@@ -996,10 +983,37 @@ class ScreenshotManager {
             maxRetries: options.maxRetries ?? 2,
             preloadImages: options.preloadImages ?? false, // 默认不预加载，按需加载
             maxConcurrentDownloads: options.maxConcurrentDownloads ?? 10, // 增加并发数
-            onlyVisibleImages: options.onlyVisibleImages ?? true // 默认只处理可视区域
+            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 初始化失败，使用内存缓存');
+                }
+            });
+        }
     }
     /**
      * 设置目标元素
@@ -1303,21 +1317,41 @@ class ScreenshotManager {
                 this.waitForStylesAndFonts(),
                 this.waitForFonts()
             ]);
-            // 选择截图引擎（仅支持 modern-screenshot）
-            const selectedEngine = 'modern-screenshot';
+            // 选择截图引擎
+            const selectedEngine = this.options.engine || 'modern-screenshot';
             if (!this.options.silentMode) {
-                console.log(`📸 使用截图引擎: ${selectedEngine} (Worker 模式)`);
+                console.log(`📸 使用截图引擎: ${selectedEngine}`);
             }
-            // 优化：如果启用预加载，才预处理图片；否则让 modern-screenshot 按需加载
-            if (this.options.preloadImages && this.options.enableCORS) {
+            // 优化：如果启用预加载，才预处理图片；否则让引擎按需加载
+            if (this.options.preloadImages && this.options.enableCORS && selectedEngine === 'modern-screenshot') {
+                // 清理过期缓存
+                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, 50));
-            // 使用 modern-screenshot 截图（启用 Worker）
-            dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
+            // 根据选择的引擎进行截图
+            if (selectedEngine === 'snapdom') {
+                dataUrl = await this.takeScreenshotWithSnapdom(this.targetElement);
+            }
+            else {
+                // 默认使用 modern-screenshot
+                dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
+            }
             const timestamp = Date.now();
             // 更新状态
             this.screenshotCount++;
@@ -1381,6 +1415,94 @@ class ScreenshotManager {
             this.removeGlobalErrorHandlers();
         }
     }
+    /**
+     * 使用 snapdom 截图
+     * 参考: https://snapdom.dev/#cors
+     * 参考: https://github.com/zumerlab/snapdom/blob/main/README_CN.md
+     *
+     * 注意：snapdom 内部使用 worker 进行截图处理，会在后台线程执行，不会阻塞主线程
+     */
+    async takeScreenshotWithSnapdom(element) {
+        if (!this.options.silentMode) {
+            console.log('📸 使用 snapdom 引擎截图...');
+        }
+        try {
+            // 检查元素是否存在和可见
+            const rect = element.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                throw new Error('元素尺寸为 0，无法截图');
+            }
+            // 构建 snapdom 选项
+            const options = {};
+            // 如果配置了代理服务器，使用 useProxy 选项处理跨域图片和字体
+            // 参考: https://github.com/zumerlab/snapdom/blob/main/README_CN.md#跨域图片和字体-useproxy
+            if (this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
+                // snapdom 的 useProxy 是字符串格式的代理 URL 模板
+                // 它会自动将跨域图片 URL 附加到代理 URL 后面
+                let proxyUrl = this.options.proxyUrl.trim();
+                // 确保代理 URL 以 ?url= 结尾（snapdom 会自动附加图片 URL）
+                if (!proxyUrl.includes('?url=')) {
+                    proxyUrl = proxyUrl.endsWith('?') ? proxyUrl + 'url=' : proxyUrl + '?url=';
+                }
+                options.useProxy = proxyUrl;
+                if (!this.options.silentMode) {
+                    console.log(`📸 使用代理服务器处理跨域图片: ${proxyUrl}`);
+                }
+            }
+            else {
+                if (!this.options.silentMode) {
+                    console.log('📸 不使用代理，直接截图（可能遇到 CORS 问题）');
+                }
+            }
+            // 根据输出格式选择对应的快捷方法
+            // 参考: https://github.com/zumerlab/snapdom/blob/main/README_CN.md#快捷方法
+            const outputFormat = this.options.outputFormat || 'png';
+            let img;
+            switch (outputFormat) {
+                case 'jpeg':
+                    // 使用 toJpg 快捷方法（snapdom 使用 jpg 作为方法名）
+                    img = await snapdom.toJpg(element, options);
+                    break;
+                case 'webp':
+                    // 使用 toWebp 快捷方法
+                    img = await snapdom.toWebp(element, options);
+                    break;
+                case 'png':
+                default:
+                    // 使用 toPng 快捷方法（默认）
+                    img = await snapdom.toPng(element, options);
+                    break;
+            }
+            // 获取 base64 数据（HTMLImageElement 的 src 属性包含 data URL）
+            const dataUrl = img.src;
+            // 验证 base64 是否有效
+            if (!dataUrl || dataUrl.length < 100) {
+                throw new Error('生成的 base64 数据无效或过短');
+            }
+            if (!this.options.silentMode) {
+                console.log(`📸 snapdom 截图成功！格式: ${outputFormat}, 尺寸: ${img.width}x${img.height}`);
+            }
+            return dataUrl;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            const errorName = error instanceof Error ? error.name : 'Unknown';
+            // 针对不同类型的错误给出具体提示
+            if (errorName === 'EncodingError' || errorMessage.includes('cannot be decoded')) {
+                if (!this.options.silentMode) {
+                    console.warn('📸 ⚠️ 图片解码失败 - 这通常是因为跨域图片无法访问');
+                    console.warn('📸 💡 解决方案：配置 proxyUrl 选项');
+                    console.warn('📸 📖 参考: https://snapdom.dev/#cors');
+                }
+            }
+            else if (errorMessage.includes('CORS') || errorMessage.includes('cross-origin')) {
+                if (!this.options.silentMode) {
+                    console.warn('📸 ⚠️ 检测到 CORS 错误，建议配置 proxyUrl 选项');
+                }
+            }
+            throw error;
+        }
+    }
     /**
      * 使用 modern-screenshot 截图（启用 Worker）
      */
@@ -1412,9 +1534,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 {
                     // 构建代理请求参数
@@ -1428,11 +1566,11 @@ class ScreenshotManager {
                     let baseUrl = this.options.proxyUrl;
                     baseUrl = baseUrl.replace(/[?&]$/, '');
                     const proxyUrl = `${baseUrl}?${params.toString()}`;
-                    // 请求代理服务器（优化：添加超时控制）
+                    // 请求代理服务器（优化：添加超时控制和优先级）
                     const controller = new AbortController();
-                    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
+                    const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
                     try {
-                        const response = await fetch(proxyUrl, {
+                        const fetchOptions = {
                             method: 'GET',
                             mode: 'cors',
                             credentials: 'omit',
@@ -1441,15 +1579,24 @@ class ScreenshotManager {
                             },
                             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);
-                        // 缓存结果
-                        this.imageProxyCache.set(url, dataUrl);
+                        // 缓存结果（带时间戳，10分钟有效）
+                        this.setCachedImage(url, dataUrl);
+                        // 如果启用 IndexedDB，也保存到 IndexedDB
+                        if (this.options.useIndexedDB) {
+                            await this.setIndexedDBCache(url, dataUrl);
+                        }
                         return dataUrl;
                     }
                     catch (fetchError) {
@@ -1496,11 +1643,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 createContext(element, contextOptions);
         }
@@ -1564,23 +1707,336 @@ 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();
             // 检查元素是否与容器有交集（考虑滚动位置）
-            return !(rect.bottom < containerRect.top ||
+            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，保守处理
@@ -1622,16 +2078,16 @@ class ScreenshotManager {
                 // 并发处理当前批次
                 await Promise.all(batch.map(async (img) => {
                     const originalSrc = img.src;
-                    // 检查缓存
-                    if (this.imageProxyCache.has(originalSrc)) {
+                    // 检查缓存（带过期时间）
+                    if (this.getCachedImage(originalSrc)) {
                         return;
                     }
                     try {
                         // 使用代理服务器获取图片
                         const dataUrl = await this.proxyImage(originalSrc);
                         if (dataUrl) {
-                            // 缓存 data URL
-                            this.imageProxyCache.set(originalSrc, dataUrl);
+                            // 缓存 data URL（带时间戳）
+                            this.setCachedImage(originalSrc, dataUrl);
                         }
                     }
                     catch (error) {
@@ -1712,7 +2168,7 @@ class ScreenshotManager {
         });
     }
     /**
-     * 等待图片加载完成
+     * 等待图片加载完成（优化：使用更短的超时和 Promise.race）
      */
     async waitForImagesToLoad(element) {
         const images = element.querySelectorAll('img');
@@ -1721,32 +2177,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
+            });
         });
     }
     /**
@@ -1966,9 +2423,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分钟
+    }
     /**
      * 获取状态
      */