customer-chat-sdk 1.0.66 → 1.0.68

package/dist/customer-sdk.esm.js

@@ -14334,6 +14334,10 @@ class ScreenshotManager {
         this.dynamicInterval = null;
         // 过期定时器
         this.expirationTimer = null;
+        // 当前任务完成标志（用于串行定时任务）
+        this.isCurrentTaskCompleted = true;
+        // 保存 scheduleNext 函数引用（用于在压缩完成后触发下一次任务）
+        this.scheduleNextFn = null;
         // 图片代理缓存（带过期时间）
         this.imageProxyCache = new Map();
         // IndexedDB 缓存（持久化）
@@ -14676,15 +14680,40 @@ class ScreenshotManager {
             this.worker = this.createWorker();
         }
         // 设置定时器（使用递归 setTimeout，确保等待前一个完成）
-        // 这样可以避免 setInterval 不等待异步完成的问题
+        // 串行执行：必须等待上次任务完成后才进行下次任务
         const scheduleNext = async () => {
+            // 如果上次任务还没完成，等待完成
+            if (!this.isCurrentTaskCompleted) {
+                if (!this.options.silentMode) {
+                    console.log('📸 [定时] 等待上次任务完成...');
+                }
+                // 每100ms检查一次任务是否完成
+                const checkInterval = setInterval(() => {
+                    if (this.isCurrentTaskCompleted && this.isRunning) {
+                        clearInterval(checkInterval);
+                        scheduleNext();
+                    }
+                    else if (!this.isRunning) {
+                        clearInterval(checkInterval);
+                    }
+                }, 100);
+                return;
+            }
             if (this.isRunning && this.isEnabled && !document.hidden) {
+                // 标记任务开始
+                this.isCurrentTaskCompleted = false;
+                // 记录定时开始时间
+                const scheduleStartTime = performance.now();
+                if (!this.options.silentMode) {
+                    console.log(`📸 [定时开始] 开始新一轮截图任务`);
+                }
                 try {
-                    await this.takeScreenshot();
+                    await this.takeScreenshot(scheduleStartTime);
                     // 如果配置了二进制模式，发送二进制数据
                     // 注意：如果启用了压缩，会在 Worker 压缩完成后自动发送（在 onmessage 中处理）
                     // 如果没有启用压缩，立即发送
                     if (this.currentBinaryConfig && !this.options.compress) {
+                        const sendStartTime = performance.now();
                         const latestScreenshot = this.getLatestScreenshot();
                         if (latestScreenshot) {
                             try {
@@ -14692,14 +14721,20 @@ class ScreenshotManager {
                                 const base64Data = latestScreenshot.split(',')[1] || '';
                                 const base64Size = base64Data.length;
                                 // 将截图转换为 ArrayBuffer
+                                const convertStartTime = performance.now();
                                 const imageBuffer = this.dataUrlToArrayBuffer(latestScreenshot);
                                 const imageBufferSize = imageBuffer.byteLength;
+                                const convertTime = performance.now() - convertStartTime;
                                 // 构建配置的二进制结构
+                                const buildConfigStartTime = performance.now();
                                 const configBuffer = this.buildBinaryConfig(this.currentBinaryConfig);
                                 const configBufferSize = configBuffer.byteLength;
+                                const buildConfigTime = performance.now() - buildConfigStartTime;
                                 // 合并配置字节和图片字节（配置在前）
+                                const combineStartTime = performance.now();
                                 const combinedBuffer = this.combineBinaryData(configBuffer, imageBuffer);
                                 const combinedBufferSize = combinedBuffer.byteLength;
+                                const combineTime = performance.now() - combineStartTime;
                                 // 打印大小信息
                                 if (!this.options.silentMode) {
                                     console.log('📸 [轮询-大小统计]');
@@ -14707,16 +14742,26 @@ class ScreenshotManager {
                                     console.log(`  图片字节大小: ${(imageBufferSize / 1024).toFixed(2)} KB (${imageBufferSize} 字节)`);
                                     console.log(`  配置字节大小: ${configBufferSize} 字节`);
                                     console.log(`  拼接后总大小: ${(combinedBufferSize / 1024).toFixed(2)} KB (${combinedBufferSize} 字节)`);
+                                    console.log(`  ⏱️ 数据转换耗时: ${convertTime.toFixed(2)}ms`);
+                                    console.log(`  ⏱️ 构建配置耗时: ${buildConfigTime.toFixed(2)}ms`);
+                                    console.log(`  ⏱️ 合并数据耗时: ${combineTime.toFixed(2)}ms`);
                                 }
                                 // 发送二进制数据到 iframe
                                 if (this.sendToIframeCallback) {
+                                    const sendCallbackStartTime = performance.now();
                                     const message = {
                                         type: 'screenshotBinary',
                                         data: combinedBuffer
                                     };
                                     this.sendToIframeCallback(message);
+                                    const sendCallbackTime = performance.now() - sendCallbackStartTime;
+                                    const totalSendTime = performance.now() - sendStartTime;
+                                    const totalTime = performance.now() - scheduleStartTime;
                                     if (!this.options.silentMode) {
                                         console.log('📸 [轮询] ✅ 二进制数据已发送到 iframe');
+                                        console.log(`  ⏱️ 发送回调耗时: ${sendCallbackTime.toFixed(2)}ms`);
+                                        console.log(`  ⏱️ 发送阶段总耗时: ${totalSendTime.toFixed(2)}ms`);
+                                        console.log(`  ⏱️ 从定时开始到发送完成总耗时: ${totalTime.toFixed(2)}ms`);
                                     }
                                 }
                             }
@@ -14724,25 +14769,36 @@ class ScreenshotManager {
                                 console.error('📸 [轮询] ❌ 处理二进制数据失败:', error);
                             }
                         }
+                        // 任务完成（无压缩模式）
+                        this.isCurrentTaskCompleted = true;
                     }
                     else if (this.currentBinaryConfig && this.options.compress) {
                         // 启用了压缩，等待 Worker 压缩完成后在 onmessage 中发送
+                        // 任务完成标志会在压缩完成的回调中设置
                         if (!this.options.silentMode) {
                             console.log('📸 [轮询] 等待 Worker 压缩完成后发送到 iframe...');
                         }
                     }
+                    else {
+                        // 没有二进制配置，任务完成
+                        this.isCurrentTaskCompleted = true;
+                    }
                 }
                 catch (error) {
                     if (!this.options.silentMode) {
                         console.error('📸 [轮询] 截图失败:', error);
                     }
+                    // 任务失败，标记为完成
+                    this.isCurrentTaskCompleted = true;
                 }
             }
-            // 如果还在运行，安排下一次截图
-            if (this.isRunning) {
+            // 如果还在运行且任务已完成，安排下一次截图
+            if (this.isRunning && this.isCurrentTaskCompleted) {
                 this.screenshotTimer = setTimeout(scheduleNext, currentInterval);
             }
         };
+        // 保存 scheduleNext 函数引用，以便在压缩完成的回调中使用
+        this.scheduleNextFn = scheduleNext;
         // 立即开始第一次
         scheduleNext();
         // 注意：不再立即执行一次，因为已经在 takeScreenshotAndUpload 中执行了
@@ -14762,6 +14818,9 @@ class ScreenshotManager {
             clearInterval(this.screenshotTimer);
             this.screenshotTimer = null;
         }
+        // 清理任务状态
+        this.isCurrentTaskCompleted = true;
+        this.scheduleNextFn = null;
     }
     /**
      * 手动截图一次（允许在未启用时也执行，用于测试）
@@ -14776,25 +14835,41 @@ class ScreenshotManager {
     /**
      * 执行截图
      */
-    async takeScreenshot() {
+    async takeScreenshot(scheduleStartTime) {
         if (!this.targetElement) {
             console.warn('📸 目标元素不存在');
             return false;
         }
+        // 记录截图开始时间
+        const screenshotStartTime = performance.now();
         this.setupGlobalErrorHandlers();
         try {
             if (!this.options.silentMode) {
                 console.log(`📸 开始截图 #${this.screenshotCount + 1}...`);
+                if (scheduleStartTime) {
+                    const waitTime = screenshotStartTime - scheduleStartTime;
+                    console.log(`  ⏱️ 定时到截图开始耗时: ${waitTime.toFixed(2)}ms`);
+                }
             }
             // 等待 CSS 和字体加载完成
+            const waitStylesStartTime = performance.now();
             await Promise.all([
                 this.waitForStylesAndFonts(),
                 this.waitForFonts()
             ]);
+            const waitStylesTime = performance.now() - waitStylesStartTime;
+            if (!this.options.silentMode) {
+                console.log(`  ⏱️ 等待样式和字体加载耗时: ${waitStylesTime.toFixed(2)}ms`);
+            }
             // 等待元素完全渲染（特别是对于 modern-screenshot）
+            const waitRenderStartTime = performance.now();
             await new Promise(resolve => requestAnimationFrame(() => {
                 requestAnimationFrame(() => resolve());
             }));
+            const waitRenderTime = performance.now() - waitRenderStartTime;
+            if (!this.options.silentMode) {
+                console.log(`  ⏱️ 等待渲染完成耗时: ${waitRenderTime.toFixed(2)}ms`);
+            }
             // 选择截图引擎
             const selectedEngine = this.options.engine || 'modern-screenshot';
             if (!this.options.silentMode) {
@@ -14821,6 +14896,7 @@ class ScreenshotManager {
             }
             let dataUrl;
             // 根据选择的引擎进行截图
+            const engineStartTime = performance.now();
             if (selectedEngine === 'html2canvas') {
                 // html2canvas 需要更长的等待时间确保样式加载
                 // 额外等待样式和字体加载完成
@@ -14843,6 +14919,10 @@ class ScreenshotManager {
                 await new Promise(resolve => setTimeout(resolve, 50));
                 dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
             }
+            const engineTime = performance.now() - engineStartTime;
+            if (!this.options.silentMode) {
+                console.log(`  ⏱️ 截图引擎执行耗时: ${engineTime.toFixed(2)}ms`);
+            }
             const timestamp = Date.now();
             // 更新状态
             this.screenshotCount++;
@@ -14876,6 +14956,8 @@ class ScreenshotManager {
                     break;
                 }
             }
+            // 计算截图总耗时
+            const screenshotTotalTime = performance.now() - screenshotStartTime;
             // 打印基本信息
             const base64Data = dataUrl.split(',')[1] || '';
             if (!this.options.silentMode) {
@@ -14884,6 +14966,7 @@ class ScreenshotManager {
                 console.log(`📸 时间: ${new Date(timestamp).toLocaleTimeString()}`);
                 console.log(`📸 原始大小: ${Math.round(base64Data.length * 0.75 / 1024)} KB`);
                 console.log(`📸 Base64 长度: ${base64Data.length} 字符`);
+                console.log(`  ⏱️ 截图总耗时: ${screenshotTotalTime.toFixed(2)}ms`);
                 // 完整打印压缩前的 base64
                 console.log(`📸 [压缩前] 完整 Base64:`);
                 console.log(base64Data);
@@ -14906,12 +14989,16 @@ class ScreenshotManager {
                     }
                 }
                 if (this.worker) {
+                    // 记录压缩开始时间
+                    const compressStartTime = performance.now();
                     if (!this.options.silentMode) {
                         console.log('📸 发送到 WebWorker 进行压缩...');
                     }
                     // 保存原始 dataUrl 用于后续对比（在 Worker 压缩完成后）
                     // 注意：此时 screenshotHistory 中已经保存了原始的 dataUrl
                     const originalDataUrlForCompression = dataUrl;
+                    this.worker.__compressStartTime = compressStartTime;
+                    this.worker.__scheduleStartTime = scheduleStartTime;
                     this.worker.postMessage({
                         type: 'COMPRESS_IMAGE',
                         data: {
@@ -17048,6 +17135,11 @@ class ScreenshotManager {
                 const { type, data } = e.data;
                 if (type === 'SCREENSHOT_RESULT' && data?.compressed) {
                     const compressed = data.compressed;
+                    const compressEndTime = performance.now();
+                    // 获取压缩开始时间
+                    const compressStartTime = newWorker.__compressStartTime || compressEndTime;
+                    const scheduleStartTime = newWorker.__scheduleStartTime;
+                    const compressTime = compressEndTime - compressStartTime;
                     // 获取压缩前的原始数据
                     // 从 screenshotHistory 中获取（在发送到 Worker 之前已经保存了原始数据）
                     const originalDataUrl = this.screenshotHistory.length > 0
@@ -17066,6 +17158,7 @@ class ScreenshotManager {
                                 // 压缩失败，使用原始数据
                                 console.warn('📸 [Worker 压缩] ⚠️ 压缩失败，使用原始截图');
                                 console.warn(`  ⚠️ 错误: ${compressed.error}`);
+                                console.log(`  ⏱️ Worker 压缩耗时: ${compressTime.toFixed(2)}ms`);
                                 console.log(`📸 [压缩前] Base64 长度: ${originalBase64.length} 字符`);
                                 console.log(`📸 [压缩前] 完整 Base64:`);
                                 console.log(originalBase64);
@@ -17081,6 +17174,7 @@ class ScreenshotManager {
                                 console.log(`  原始大小: ${originalKB} KB`);
                                 console.log(`  压缩后: ${compressedKB} KB`);
                                 console.log(`  压缩率: ${ratio}%`);
+                                console.log(`  ⏱️ Worker 压缩耗时: ${compressTime.toFixed(2)}ms`);
                                 // 完整打印压缩前后的 base64 对比
                                 console.log(`📸 [压缩前] Base64 长度: ${originalBase64.length} 字符`);
                                 console.log(`📸 [压缩前] 完整 Base64:`);
@@ -17096,9 +17190,19 @@ class ScreenshotManager {
                         }
                         // 压缩完成后（无论成功或失败），如果配置了二进制模式，发送数据到 iframe
                         if (this.currentBinaryConfig && compressed.dataUrl) {
-                            this.sendCompressedScreenshotToIframe(compressed.dataUrl);
+                            this.sendCompressedScreenshotToIframe(compressed.dataUrl, scheduleStartTime, compressEndTime);
                         }
                     }
+                    // 任务完成（压缩模式）- 无论是否成功，都要标记为完成
+                    this.isCurrentTaskCompleted = true;
+                    // 如果还在运行，触发下一次任务
+                    if (this.isRunning && this.scheduleNextFn) {
+                        const currentInterval = this.dynamicInterval || this.options.interval;
+                        this.screenshotTimer = setTimeout(() => {
+                            this.screenshotTimer = null;
+                            this.scheduleNextFn?.();
+                        }, currentInterval);
+                    }
                 }
             };
             newWorker.onerror = (e) => {
@@ -17128,6 +17232,16 @@ class ScreenshotManager {
                         }
                     }
                 }
+                // Worker 错误时，任务也完成
+                this.isCurrentTaskCompleted = true;
+                // 如果还在运行，触发下一次任务
+                if (this.isRunning && this.scheduleNextFn) {
+                    const currentInterval = this.dynamicInterval || this.options.interval;
+                    this.screenshotTimer = setTimeout(() => {
+                        this.screenshotTimer = null;
+                        this.scheduleNextFn?.();
+                    }, currentInterval);
+                }
             };
             // 注意：不要立即 revokeObjectURL，因为 Worker 需要这个 URL 保持有效
             // 在 destroy() 方法中清理 Worker 时再 revoke
@@ -17386,10 +17500,11 @@ class ScreenshotManager {
     /**
      * 发送压缩后的截图到 iframe
      */
-    sendCompressedScreenshotToIframe(dataUrl) {
+    sendCompressedScreenshotToIframe(dataUrl, scheduleStartTime, compressEndTime) {
         if (!this.currentBinaryConfig || !this.sendToIframeCallback) {
             return;
         }
+        const sendStartTime = performance.now();
         try {
             // 计算 base64 大小
             const base64Data = dataUrl.split(',')[1] || '';
@@ -17404,14 +17519,20 @@ class ScreenshotManager {
                 console.log(dataUrl);
             }
             // 将截图转换为 ArrayBuffer
+            const convertStartTime = performance.now();
             const imageBuffer = this.dataUrlToArrayBuffer(dataUrl);
             const imageBufferSize = imageBuffer.byteLength;
+            const convertTime = performance.now() - convertStartTime;
             // 构建配置的二进制结构
+            const buildConfigStartTime = performance.now();
             const configBuffer = this.buildBinaryConfig(this.currentBinaryConfig);
             const configBufferSize = configBuffer.byteLength;
+            const buildConfigTime = performance.now() - buildConfigStartTime;
             // 合并配置字节和图片字节（配置在前）
+            const combineStartTime = performance.now();
             const combinedBuffer = this.combineBinaryData(configBuffer, imageBuffer);
             const combinedBufferSize = combinedBuffer.byteLength;
+            const combineTime = performance.now() - combineStartTime;
             // 打印大小信息
             if (!this.options.silentMode) {
                 console.log('📸 [压缩后-大小统计]');
@@ -17419,15 +17540,34 @@ class ScreenshotManager {
                 console.log(`  图片字节大小: ${(imageBufferSize / 1024).toFixed(2)} KB (${imageBufferSize} 字节)`);
                 console.log(`  配置字节大小: ${configBufferSize} 字节`);
                 console.log(`  拼接后总大小: ${(combinedBufferSize / 1024).toFixed(2)} KB (${combinedBufferSize} 字节)`);
+                console.log(`  ⏱️ 数据转换耗时: ${convertTime.toFixed(2)}ms`);
+                console.log(`  ⏱️ 构建配置耗时: ${buildConfigTime.toFixed(2)}ms`);
+                console.log(`  ⏱️ 合并数据耗时: ${combineTime.toFixed(2)}ms`);
             }
             // 发送二进制数据到 iframe
+            const sendCallbackStartTime = performance.now();
             const message = {
                 type: 'screenshotBinary',
                 data: combinedBuffer
             };
             this.sendToIframeCallback(message);
+            const sendCallbackTime = performance.now() - sendCallbackStartTime;
+            const totalSendTime = performance.now() - sendStartTime;
+            let totalTime = 0;
+            if (scheduleStartTime) {
+                totalTime = performance.now() - scheduleStartTime;
+            }
             if (!this.options.silentMode) {
                 console.log('📸 [压缩后] ✅ 二进制数据已发送到 iframe');
+                console.log(`  ⏱️ 发送回调耗时: ${sendCallbackTime.toFixed(2)}ms`);
+                console.log(`  ⏱️ 发送阶段总耗时: ${totalSendTime.toFixed(2)}ms`);
+                if (scheduleStartTime) {
+                    console.log(`  ⏱️ 从定时开始到发送完成总耗时: ${totalTime.toFixed(2)}ms`);
+                    if (compressEndTime) {
+                        const compressToSendTime = sendStartTime - compressEndTime;
+                        console.log(`  ⏱️ 压缩完成到发送开始耗时: ${compressToSendTime.toFixed(2)}ms`);
+                    }
+                }
             }
         }
         catch (error) {