customer-chat-sdk 1.0.28 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/ScreenshotManager.d.ts +72 -3
- package/dist/core/ScreenshotManager.d.ts.map +1 -1
- package/dist/customer-sdk.cjs.js +501 -62
- package/dist/customer-sdk.esm.js +501 -62
- package/dist/customer-sdk.min.js +1 -1
- package/dist/types/index.d.ts +11 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/customer-sdk.cjs.js
CHANGED
|
@@ -926,28 +926,6 @@ class IframeManager {
|
|
|
926
926
|
}
|
|
927
927
|
|
|
928
928
|
// @ts-ignore - modern-screenshot may not have type definitions
|
|
929
|
-
// Worker URL 将在创建上下文时动态获取
|
|
930
|
-
// 在 Vite 环境中可以使用: import workerUrl from 'modern-screenshot/worker?url'
|
|
931
|
-
// 在 Rollup 中,modern-screenshot 会自动处理 worker URL
|
|
932
|
-
let workerUrl = undefined;
|
|
933
|
-
// 尝试动态获取 worker URL(仅在支持的环境中)
|
|
934
|
-
async function getWorkerUrl() {
|
|
935
|
-
if (workerUrl) {
|
|
936
|
-
return workerUrl;
|
|
937
|
-
}
|
|
938
|
-
try {
|
|
939
|
-
// 尝试使用 Vite 的 ?url 语法(仅在 Vite 环境中有效)
|
|
940
|
-
// @ts-ignore - Vite 特有的 ?url 语法
|
|
941
|
-
const workerModule = await import('modern-screenshot/worker?url');
|
|
942
|
-
workerUrl = workerModule.default || workerModule;
|
|
943
|
-
return workerUrl;
|
|
944
|
-
}
|
|
945
|
-
catch {
|
|
946
|
-
// Rollup 或其他构建工具不支持 ?url 语法
|
|
947
|
-
// modern-screenshot 会自动处理 worker URL,返回 undefined 即可
|
|
948
|
-
return undefined;
|
|
949
|
-
}
|
|
950
|
-
}
|
|
951
929
|
/**
|
|
952
930
|
* 截图管理器
|
|
953
931
|
* 负责页面截图、压缩和上传功能
|
|
@@ -977,8 +955,16 @@ class ScreenshotManager {
|
|
|
977
955
|
this.dynamicInterval = null;
|
|
978
956
|
// 过期定时器
|
|
979
957
|
this.expirationTimer = null;
|
|
980
|
-
//
|
|
958
|
+
// 图片代理缓存(带过期时间)
|
|
981
959
|
this.imageProxyCache = new Map();
|
|
960
|
+
// IndexedDB 缓存(持久化)
|
|
961
|
+
this.indexedDBCache = null;
|
|
962
|
+
this.indexedDBReady = false;
|
|
963
|
+
// Intersection Observer(用于高效检测可见性)
|
|
964
|
+
this.intersectionObserver = null;
|
|
965
|
+
this.visibleElementsCache = new Set();
|
|
966
|
+
// 预连接状态
|
|
967
|
+
this.preconnected = false;
|
|
982
968
|
// 全局错误处理器
|
|
983
969
|
this.globalErrorHandler = null;
|
|
984
970
|
this.globalRejectionHandler = null;
|
|
@@ -1000,10 +986,37 @@ class ScreenshotManager {
|
|
|
1000
986
|
maxRetries: options.maxRetries ?? 2,
|
|
1001
987
|
preloadImages: options.preloadImages ?? false, // 默认不预加载,按需加载
|
|
1002
988
|
maxConcurrentDownloads: options.maxConcurrentDownloads ?? 10, // 增加并发数
|
|
1003
|
-
onlyVisibleImages: options.onlyVisibleImages ?? true // 默认只处理可视区域
|
|
989
|
+
onlyVisibleImages: options.onlyVisibleImages ?? true, // 默认只处理可视区域
|
|
990
|
+
imageCacheTTL: options.imageCacheTTL ?? 600000, // 默认10分钟(600000ms)
|
|
991
|
+
useIndexedDB: options.useIndexedDB ?? true, // 默认启用 IndexedDB 持久化缓存
|
|
992
|
+
usePreconnect: options.usePreconnect ?? true, // 默认预连接代理服务器
|
|
993
|
+
imageLoadTimeout: options.imageLoadTimeout ?? 5000, // 默认5秒超时
|
|
994
|
+
useIntersectionObserver: options.useIntersectionObserver ?? true, // 默认使用 Intersection Observer
|
|
995
|
+
fetchPriority: options.fetchPriority ?? 'high', // 默认高优先级
|
|
996
|
+
maxCacheSize: options.maxCacheSize ?? 50, // 默认最大50MB
|
|
997
|
+
maxCacheAge: options.maxCacheAge ?? 86400000 // 默认24小时(86400000ms)
|
|
1004
998
|
};
|
|
1005
999
|
this.setupMessageListener();
|
|
1006
1000
|
this.setupVisibilityChangeListener();
|
|
1001
|
+
// 启动缓存清理定时器
|
|
1002
|
+
this.startCacheCleanup();
|
|
1003
|
+
// 预连接代理服务器(如果启用)
|
|
1004
|
+
if (this.options.usePreconnect && this.options.proxyUrl) {
|
|
1005
|
+
this.preconnectProxy();
|
|
1006
|
+
}
|
|
1007
|
+
// 初始化 Intersection Observer(如果启用)
|
|
1008
|
+
if (this.options.useIntersectionObserver && this.options.onlyVisibleImages) {
|
|
1009
|
+
this.initIntersectionObserver();
|
|
1010
|
+
}
|
|
1011
|
+
// 初始化 IndexedDB(如果启用)
|
|
1012
|
+
if (this.options.useIndexedDB) {
|
|
1013
|
+
this.initIndexedDB().catch(() => {
|
|
1014
|
+
// IndexedDB 初始化失败,回退到内存缓存
|
|
1015
|
+
if (!this.options.silentMode) {
|
|
1016
|
+
console.warn('📸 IndexedDB 初始化失败,使用内存缓存');
|
|
1017
|
+
}
|
|
1018
|
+
});
|
|
1019
|
+
}
|
|
1007
1020
|
}
|
|
1008
1021
|
/**
|
|
1009
1022
|
* 设置目标元素
|
|
@@ -1314,9 +1327,23 @@ class ScreenshotManager {
|
|
|
1314
1327
|
}
|
|
1315
1328
|
// 优化:如果启用预加载,才预处理图片;否则让 modern-screenshot 按需加载
|
|
1316
1329
|
if (this.options.preloadImages && this.options.enableCORS) {
|
|
1330
|
+
// 清理过期缓存
|
|
1331
|
+
this.cleanExpiredCache();
|
|
1332
|
+
// 如果启用 IndexedDB,也清理 IndexedDB 缓存
|
|
1333
|
+
if (this.options.useIndexedDB) {
|
|
1334
|
+
await this.cleanIndexedDBCache();
|
|
1335
|
+
}
|
|
1317
1336
|
await this.preprocessNetworkImages(this.targetElement);
|
|
1318
1337
|
await this.waitForImagesToLoad(this.targetElement);
|
|
1319
1338
|
}
|
|
1339
|
+
else {
|
|
1340
|
+
// 即使不预加载,也清理一下过期缓存
|
|
1341
|
+
this.cleanExpiredCache();
|
|
1342
|
+
// 如果启用 IndexedDB,也清理 IndexedDB 缓存
|
|
1343
|
+
if (this.options.useIndexedDB) {
|
|
1344
|
+
await this.cleanIndexedDBCache();
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1320
1347
|
let dataUrl;
|
|
1321
1348
|
// 等待一小段时间,确保 DOM 更新完成(减少等待时间)
|
|
1322
1349
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
@@ -1416,9 +1443,25 @@ class ScreenshotManager {
|
|
|
1416
1443
|
}
|
|
1417
1444
|
// 如果配置了代理服务器,使用代理处理跨域图片
|
|
1418
1445
|
if (this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
|
|
1419
|
-
//
|
|
1420
|
-
|
|
1421
|
-
|
|
1446
|
+
// 检查内存缓存(优先使用缓存,带过期时间检查)
|
|
1447
|
+
const cachedDataUrl = this.getCachedImage(url);
|
|
1448
|
+
if (cachedDataUrl) {
|
|
1449
|
+
if (!this.options.silentMode) {
|
|
1450
|
+
console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
|
|
1451
|
+
}
|
|
1452
|
+
return cachedDataUrl;
|
|
1453
|
+
}
|
|
1454
|
+
// 检查 IndexedDB 缓存(如果启用)
|
|
1455
|
+
if (this.options.useIndexedDB) {
|
|
1456
|
+
const indexedDBCache = await this.getIndexedDBCache(url);
|
|
1457
|
+
if (indexedDBCache) {
|
|
1458
|
+
// 同步到内存缓存
|
|
1459
|
+
this.setCachedImage(url, indexedDBCache);
|
|
1460
|
+
if (!this.options.silentMode) {
|
|
1461
|
+
console.log(`📸 ✅ 使用 IndexedDB 缓存图片: ${url.substring(0, 50)}...`);
|
|
1462
|
+
}
|
|
1463
|
+
return indexedDBCache;
|
|
1464
|
+
}
|
|
1422
1465
|
}
|
|
1423
1466
|
try {
|
|
1424
1467
|
// 构建代理请求参数
|
|
@@ -1432,11 +1475,11 @@ class ScreenshotManager {
|
|
|
1432
1475
|
let baseUrl = this.options.proxyUrl;
|
|
1433
1476
|
baseUrl = baseUrl.replace(/[?&]$/, '');
|
|
1434
1477
|
const proxyUrl = `${baseUrl}?${params.toString()}`;
|
|
1435
|
-
//
|
|
1478
|
+
// 请求代理服务器(优化:添加超时控制和优先级)
|
|
1436
1479
|
const controller = new AbortController();
|
|
1437
|
-
const timeoutId = setTimeout(() => controller.abort(),
|
|
1480
|
+
const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
|
|
1438
1481
|
try {
|
|
1439
|
-
const
|
|
1482
|
+
const fetchOptions = {
|
|
1440
1483
|
method: 'GET',
|
|
1441
1484
|
mode: 'cors',
|
|
1442
1485
|
credentials: 'omit',
|
|
@@ -1445,15 +1488,24 @@ class ScreenshotManager {
|
|
|
1445
1488
|
},
|
|
1446
1489
|
cache: 'no-cache',
|
|
1447
1490
|
signal: controller.signal
|
|
1448
|
-
}
|
|
1491
|
+
};
|
|
1492
|
+
// 添加 fetch priority(如果支持)
|
|
1493
|
+
if ('priority' in fetchOptions) {
|
|
1494
|
+
fetchOptions.priority = this.options.fetchPriority;
|
|
1495
|
+
}
|
|
1496
|
+
const response = await fetch(proxyUrl, fetchOptions);
|
|
1449
1497
|
clearTimeout(timeoutId);
|
|
1450
1498
|
if (!response.ok) {
|
|
1451
1499
|
throw new Error(`代理请求失败: ${response.status}`);
|
|
1452
1500
|
}
|
|
1453
1501
|
const blob = await response.blob();
|
|
1454
1502
|
const dataUrl = await this.blobToDataUrl(blob);
|
|
1455
|
-
//
|
|
1456
|
-
this.
|
|
1503
|
+
// 缓存结果(带时间戳,10分钟有效)
|
|
1504
|
+
this.setCachedImage(url, dataUrl);
|
|
1505
|
+
// 如果启用 IndexedDB,也保存到 IndexedDB
|
|
1506
|
+
if (this.options.useIndexedDB) {
|
|
1507
|
+
await this.setIndexedDBCache(url, dataUrl);
|
|
1508
|
+
}
|
|
1457
1509
|
return dataUrl;
|
|
1458
1510
|
}
|
|
1459
1511
|
catch (fetchError) {
|
|
@@ -1500,11 +1552,7 @@ class ScreenshotManager {
|
|
|
1500
1552
|
if (this.options.scale !== 1) {
|
|
1501
1553
|
contextOptions.scale = isMobile ? 0.8 : this.options.scale;
|
|
1502
1554
|
}
|
|
1503
|
-
//
|
|
1504
|
-
const resolvedWorkerUrl = await getWorkerUrl();
|
|
1505
|
-
if (resolvedWorkerUrl) {
|
|
1506
|
-
contextOptions.workerUrl = resolvedWorkerUrl;
|
|
1507
|
-
}
|
|
1555
|
+
// modern-screenshot 会自动处理 worker URL,不需要手动设置
|
|
1508
1556
|
// 创建 Worker 上下文
|
|
1509
1557
|
this.screenshotContext = await modernScreenshot.createContext(element, contextOptions);
|
|
1510
1558
|
}
|
|
@@ -1568,23 +1616,336 @@ class ScreenshotManager {
|
|
|
1568
1616
|
}
|
|
1569
1617
|
}
|
|
1570
1618
|
/**
|
|
1571
|
-
*
|
|
1619
|
+
* 预连接代理服务器(优化网络性能)
|
|
1620
|
+
*/
|
|
1621
|
+
preconnectProxy() {
|
|
1622
|
+
if (this.preconnected || !this.options.proxyUrl) {
|
|
1623
|
+
return;
|
|
1624
|
+
}
|
|
1625
|
+
try {
|
|
1626
|
+
const proxyOrigin = new URL(this.options.proxyUrl).origin;
|
|
1627
|
+
const link = document.createElement('link');
|
|
1628
|
+
link.rel = 'preconnect';
|
|
1629
|
+
link.href = proxyOrigin;
|
|
1630
|
+
link.crossOrigin = 'anonymous';
|
|
1631
|
+
document.head.appendChild(link);
|
|
1632
|
+
this.preconnected = true;
|
|
1633
|
+
if (!this.options.silentMode) {
|
|
1634
|
+
console.log(`📸 ✅ 已预连接代理服务器: ${proxyOrigin}`);
|
|
1635
|
+
}
|
|
1636
|
+
}
|
|
1637
|
+
catch (e) {
|
|
1638
|
+
// 预连接失败,不影响功能
|
|
1639
|
+
}
|
|
1640
|
+
}
|
|
1641
|
+
/**
|
|
1642
|
+
* 初始化 Intersection Observer(优化可见性检测)
|
|
1643
|
+
*/
|
|
1644
|
+
initIntersectionObserver() {
|
|
1645
|
+
if (!('IntersectionObserver' in window)) {
|
|
1646
|
+
return;
|
|
1647
|
+
}
|
|
1648
|
+
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
1649
|
+
entries.forEach((entry) => {
|
|
1650
|
+
if (entry.isIntersecting) {
|
|
1651
|
+
this.visibleElementsCache.add(entry.target);
|
|
1652
|
+
}
|
|
1653
|
+
else {
|
|
1654
|
+
this.visibleElementsCache.delete(entry.target);
|
|
1655
|
+
}
|
|
1656
|
+
});
|
|
1657
|
+
}, {
|
|
1658
|
+
root: null,
|
|
1659
|
+
rootMargin: '50px', // 提前50px开始加载
|
|
1660
|
+
threshold: 0.01
|
|
1661
|
+
});
|
|
1662
|
+
}
|
|
1663
|
+
/**
|
|
1664
|
+
* 初始化 IndexedDB(持久化缓存)
|
|
1665
|
+
*/
|
|
1666
|
+
async initIndexedDB() {
|
|
1667
|
+
return new Promise((resolve, reject) => {
|
|
1668
|
+
const request = indexedDB.open('screenshot-cache', 1);
|
|
1669
|
+
request.onerror = () => reject(request.error);
|
|
1670
|
+
request.onsuccess = () => {
|
|
1671
|
+
this.indexedDBCache = request.result;
|
|
1672
|
+
this.indexedDBReady = true;
|
|
1673
|
+
// 初始化后立即清理过期和超大小的缓存
|
|
1674
|
+
this.cleanIndexedDBCache().catch(() => {
|
|
1675
|
+
// 清理失败不影响功能
|
|
1676
|
+
});
|
|
1677
|
+
resolve();
|
|
1678
|
+
};
|
|
1679
|
+
request.onupgradeneeded = (event) => {
|
|
1680
|
+
const db = event.target.result;
|
|
1681
|
+
if (!db.objectStoreNames.contains('images')) {
|
|
1682
|
+
const store = db.createObjectStore('images', { keyPath: 'url' });
|
|
1683
|
+
// 创建索引用于按时间排序
|
|
1684
|
+
store.createIndex('timestamp', 'timestamp', { unique: false });
|
|
1685
|
+
}
|
|
1686
|
+
};
|
|
1687
|
+
});
|
|
1688
|
+
}
|
|
1689
|
+
/**
|
|
1690
|
+
* 从 IndexedDB 获取缓存
|
|
1691
|
+
*/
|
|
1692
|
+
async getIndexedDBCache(url) {
|
|
1693
|
+
if (!this.indexedDBReady || !this.indexedDBCache) {
|
|
1694
|
+
return null;
|
|
1695
|
+
}
|
|
1696
|
+
try {
|
|
1697
|
+
const transaction = this.indexedDBCache.transaction(['images'], 'readonly');
|
|
1698
|
+
const store = transaction.objectStore('images');
|
|
1699
|
+
const request = store.get(url);
|
|
1700
|
+
return new Promise((resolve) => {
|
|
1701
|
+
request.onsuccess = () => {
|
|
1702
|
+
const result = request.result;
|
|
1703
|
+
if (result) {
|
|
1704
|
+
const now = Date.now();
|
|
1705
|
+
const age = now - result.timestamp;
|
|
1706
|
+
// 检查是否超过最大缓存时间
|
|
1707
|
+
if (age > this.options.maxCacheAge) {
|
|
1708
|
+
// 缓存过期,删除
|
|
1709
|
+
this.deleteIndexedDBCache(url);
|
|
1710
|
+
resolve(null);
|
|
1711
|
+
return;
|
|
1712
|
+
}
|
|
1713
|
+
// 返回缓存数据(即使超过 imageCacheTTL,只要未超过 maxCacheAge 仍可使用)
|
|
1714
|
+
resolve(result.dataUrl);
|
|
1715
|
+
}
|
|
1716
|
+
else {
|
|
1717
|
+
resolve(null);
|
|
1718
|
+
}
|
|
1719
|
+
};
|
|
1720
|
+
request.onerror = () => resolve(null);
|
|
1721
|
+
});
|
|
1722
|
+
}
|
|
1723
|
+
catch {
|
|
1724
|
+
return null;
|
|
1725
|
+
}
|
|
1726
|
+
}
|
|
1727
|
+
/**
|
|
1728
|
+
* 设置 IndexedDB 缓存(带大小和时间控制)
|
|
1729
|
+
*/
|
|
1730
|
+
async setIndexedDBCache(url, dataUrl) {
|
|
1731
|
+
if (!this.indexedDBReady || !this.indexedDBCache) {
|
|
1732
|
+
return;
|
|
1733
|
+
}
|
|
1734
|
+
try {
|
|
1735
|
+
// 计算当前缓存大小
|
|
1736
|
+
const currentSize = await this.getIndexedDBCacheSize();
|
|
1737
|
+
const newItemSize = this.estimateDataUrlSize(dataUrl);
|
|
1738
|
+
const maxSizeBytes = (this.options.maxCacheSize || 50) * 1024 * 1024; // 转换为字节
|
|
1739
|
+
// 如果添加新项后超过限制,清理最旧的数据
|
|
1740
|
+
if (currentSize + newItemSize > maxSizeBytes) {
|
|
1741
|
+
await this.cleanIndexedDBCacheBySize(maxSizeBytes - newItemSize);
|
|
1742
|
+
}
|
|
1743
|
+
const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
|
|
1744
|
+
const store = transaction.objectStore('images');
|
|
1745
|
+
store.put({ url, dataUrl, timestamp: Date.now() });
|
|
1746
|
+
}
|
|
1747
|
+
catch {
|
|
1748
|
+
// IndexedDB 写入失败,忽略
|
|
1749
|
+
}
|
|
1750
|
+
}
|
|
1751
|
+
/**
|
|
1752
|
+
* 估算 data URL 的大小(字节)
|
|
1753
|
+
*/
|
|
1754
|
+
estimateDataUrlSize(dataUrl) {
|
|
1755
|
+
// Base64 编码后的大小约为原始大小的 4/3
|
|
1756
|
+
// data:image/xxx;base64, 前缀约 22-30 字节
|
|
1757
|
+
const base64Data = dataUrl.split(',')[1] || '';
|
|
1758
|
+
return Math.ceil(base64Data.length * 0.75) + 30;
|
|
1759
|
+
}
|
|
1760
|
+
/**
|
|
1761
|
+
* 获取 IndexedDB 当前缓存大小(字节)
|
|
1762
|
+
*/
|
|
1763
|
+
async getIndexedDBCacheSize() {
|
|
1764
|
+
if (!this.indexedDBReady || !this.indexedDBCache) {
|
|
1765
|
+
return 0;
|
|
1766
|
+
}
|
|
1767
|
+
try {
|
|
1768
|
+
const transaction = this.indexedDBCache.transaction(['images'], 'readonly');
|
|
1769
|
+
const store = transaction.objectStore('images');
|
|
1770
|
+
const request = store.getAll();
|
|
1771
|
+
return new Promise((resolve) => {
|
|
1772
|
+
request.onsuccess = () => {
|
|
1773
|
+
const items = request.result || [];
|
|
1774
|
+
let totalSize = 0;
|
|
1775
|
+
items.forEach((item) => {
|
|
1776
|
+
totalSize += this.estimateDataUrlSize(item.dataUrl);
|
|
1777
|
+
});
|
|
1778
|
+
resolve(totalSize);
|
|
1779
|
+
};
|
|
1780
|
+
request.onerror = () => resolve(0);
|
|
1781
|
+
});
|
|
1782
|
+
}
|
|
1783
|
+
catch {
|
|
1784
|
+
return 0;
|
|
1785
|
+
}
|
|
1786
|
+
}
|
|
1787
|
+
/**
|
|
1788
|
+
* 清理 IndexedDB 缓存(按时间和大小)
|
|
1789
|
+
*/
|
|
1790
|
+
async cleanIndexedDBCache() {
|
|
1791
|
+
if (!this.indexedDBReady || !this.indexedDBCache) {
|
|
1792
|
+
return;
|
|
1793
|
+
}
|
|
1794
|
+
try {
|
|
1795
|
+
const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
|
|
1796
|
+
const store = transaction.objectStore('images');
|
|
1797
|
+
const index = store.index('timestamp');
|
|
1798
|
+
const request = index.getAll();
|
|
1799
|
+
return new Promise((resolve) => {
|
|
1800
|
+
request.onsuccess = () => {
|
|
1801
|
+
const items = request.result || [];
|
|
1802
|
+
const now = Date.now();
|
|
1803
|
+
const expiredUrls = [];
|
|
1804
|
+
let currentSize = 0;
|
|
1805
|
+
const maxSizeBytes = (this.options.maxCacheSize || 50) * 1024 * 1024;
|
|
1806
|
+
// 按时间排序(最旧的在前)
|
|
1807
|
+
items.sort((a, b) => a.timestamp - b.timestamp);
|
|
1808
|
+
// 清理过期数据
|
|
1809
|
+
items.forEach((item) => {
|
|
1810
|
+
const age = now - item.timestamp;
|
|
1811
|
+
if (age > this.options.maxCacheAge) {
|
|
1812
|
+
expiredUrls.push(item.url);
|
|
1813
|
+
}
|
|
1814
|
+
else {
|
|
1815
|
+
currentSize += this.estimateDataUrlSize(item.dataUrl);
|
|
1816
|
+
}
|
|
1817
|
+
});
|
|
1818
|
+
// 如果仍然超过大小限制,删除最旧的数据
|
|
1819
|
+
const urlsToDelete = [...expiredUrls];
|
|
1820
|
+
if (currentSize > maxSizeBytes) {
|
|
1821
|
+
for (const item of items) {
|
|
1822
|
+
if (expiredUrls.includes(item.url))
|
|
1823
|
+
continue;
|
|
1824
|
+
currentSize -= this.estimateDataUrlSize(item.dataUrl);
|
|
1825
|
+
urlsToDelete.push(item.url);
|
|
1826
|
+
if (currentSize <= maxSizeBytes) {
|
|
1827
|
+
break;
|
|
1828
|
+
}
|
|
1829
|
+
}
|
|
1830
|
+
}
|
|
1831
|
+
// 删除过期和超大小的数据
|
|
1832
|
+
urlsToDelete.forEach((url) => {
|
|
1833
|
+
store.delete(url);
|
|
1834
|
+
});
|
|
1835
|
+
if (urlsToDelete.length > 0 && !this.options.silentMode) {
|
|
1836
|
+
console.log(`📸 IndexedDB 清理了 ${urlsToDelete.length} 个缓存项(过期或超大小)`);
|
|
1837
|
+
}
|
|
1838
|
+
resolve();
|
|
1839
|
+
};
|
|
1840
|
+
request.onerror = () => resolve();
|
|
1841
|
+
});
|
|
1842
|
+
}
|
|
1843
|
+
catch {
|
|
1844
|
+
// 清理失败,忽略
|
|
1845
|
+
}
|
|
1846
|
+
}
|
|
1847
|
+
/**
|
|
1848
|
+
* 按大小清理 IndexedDB 缓存
|
|
1849
|
+
*/
|
|
1850
|
+
async cleanIndexedDBCacheBySize(targetSize) {
|
|
1851
|
+
if (!this.indexedDBReady || !this.indexedDBCache) {
|
|
1852
|
+
return;
|
|
1853
|
+
}
|
|
1854
|
+
try {
|
|
1855
|
+
const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
|
|
1856
|
+
const store = transaction.objectStore('images');
|
|
1857
|
+
const index = store.index('timestamp');
|
|
1858
|
+
const request = index.getAll();
|
|
1859
|
+
return new Promise((resolve) => {
|
|
1860
|
+
request.onsuccess = () => {
|
|
1861
|
+
const items = request.result || [];
|
|
1862
|
+
// 按时间排序(最旧的在前)
|
|
1863
|
+
items.sort((a, b) => a.timestamp - b.timestamp);
|
|
1864
|
+
let currentSize = 0;
|
|
1865
|
+
const urlsToDelete = [];
|
|
1866
|
+
// 计算当前大小
|
|
1867
|
+
items.forEach((item) => {
|
|
1868
|
+
currentSize += this.estimateDataUrlSize(item.dataUrl);
|
|
1869
|
+
});
|
|
1870
|
+
// 如果超过目标大小,删除最旧的数据
|
|
1871
|
+
if (currentSize > targetSize) {
|
|
1872
|
+
for (const item of items) {
|
|
1873
|
+
if (currentSize <= targetSize) {
|
|
1874
|
+
break;
|
|
1875
|
+
}
|
|
1876
|
+
currentSize -= this.estimateDataUrlSize(item.dataUrl);
|
|
1877
|
+
urlsToDelete.push(item.url);
|
|
1878
|
+
}
|
|
1879
|
+
}
|
|
1880
|
+
// 删除数据
|
|
1881
|
+
urlsToDelete.forEach((url) => {
|
|
1882
|
+
store.delete(url);
|
|
1883
|
+
});
|
|
1884
|
+
if (urlsToDelete.length > 0 && !this.options.silentMode) {
|
|
1885
|
+
console.log(`📸 IndexedDB 清理了 ${urlsToDelete.length} 个缓存项(超过大小限制)`);
|
|
1886
|
+
}
|
|
1887
|
+
resolve();
|
|
1888
|
+
};
|
|
1889
|
+
request.onerror = () => resolve();
|
|
1890
|
+
});
|
|
1891
|
+
}
|
|
1892
|
+
catch {
|
|
1893
|
+
// 清理失败,忽略
|
|
1894
|
+
}
|
|
1895
|
+
}
|
|
1896
|
+
/**
|
|
1897
|
+
* 删除 IndexedDB 缓存
|
|
1898
|
+
*/
|
|
1899
|
+
async deleteIndexedDBCache(url) {
|
|
1900
|
+
if (!this.indexedDBReady || !this.indexedDBCache) {
|
|
1901
|
+
return;
|
|
1902
|
+
}
|
|
1903
|
+
try {
|
|
1904
|
+
const transaction = this.indexedDBCache.transaction(['images'], 'readwrite');
|
|
1905
|
+
const store = transaction.objectStore('images');
|
|
1906
|
+
store.delete(url);
|
|
1907
|
+
}
|
|
1908
|
+
catch {
|
|
1909
|
+
// 忽略错误
|
|
1910
|
+
}
|
|
1911
|
+
}
|
|
1912
|
+
/**
|
|
1913
|
+
* 检查元素是否在可视区域内(优化:使用 Intersection Observer 或 getBoundingClientRect)
|
|
1572
1914
|
*/
|
|
1573
1915
|
isElementVisible(element, container) {
|
|
1574
1916
|
if (!this.options.onlyVisibleImages) {
|
|
1575
1917
|
return true; // 如果禁用可视区域检测,返回 true
|
|
1576
1918
|
}
|
|
1919
|
+
// 如果使用 Intersection Observer 且元素已在缓存中,直接返回
|
|
1920
|
+
if (this.options.useIntersectionObserver && this.intersectionObserver) {
|
|
1921
|
+
if (this.visibleElementsCache.has(element)) {
|
|
1922
|
+
return true;
|
|
1923
|
+
}
|
|
1924
|
+
// 观察元素(如果还没有观察)
|
|
1925
|
+
this.intersectionObserver.observe(element);
|
|
1926
|
+
}
|
|
1927
|
+
// 回退到 getBoundingClientRect
|
|
1577
1928
|
try {
|
|
1578
1929
|
const rect = element.getBoundingClientRect();
|
|
1579
1930
|
const containerRect = container.getBoundingClientRect();
|
|
1580
1931
|
// 检查元素是否与容器有交集(考虑滚动位置)
|
|
1581
|
-
|
|
1932
|
+
const isIntersecting = !(rect.bottom < containerRect.top ||
|
|
1582
1933
|
rect.top > containerRect.bottom ||
|
|
1583
1934
|
rect.right < containerRect.left ||
|
|
1584
1935
|
rect.left > containerRect.right) && (rect.width > 0 && rect.height > 0 && // 元素有尺寸
|
|
1585
1936
|
window.getComputedStyle(element).display !== 'none' && // 元素可见
|
|
1586
1937
|
window.getComputedStyle(element).visibility !== 'hidden' &&
|
|
1587
1938
|
window.getComputedStyle(element).opacity !== '0');
|
|
1939
|
+
// 更新 Intersection Observer 缓存
|
|
1940
|
+
if (this.options.useIntersectionObserver && this.intersectionObserver) {
|
|
1941
|
+
if (isIntersecting) {
|
|
1942
|
+
this.visibleElementsCache.add(element);
|
|
1943
|
+
}
|
|
1944
|
+
else {
|
|
1945
|
+
this.visibleElementsCache.delete(element);
|
|
1946
|
+
}
|
|
1947
|
+
}
|
|
1948
|
+
return isIntersecting;
|
|
1588
1949
|
}
|
|
1589
1950
|
catch {
|
|
1590
1951
|
return true; // 出错时返回 true,保守处理
|
|
@@ -1626,16 +1987,16 @@ class ScreenshotManager {
|
|
|
1626
1987
|
// 并发处理当前批次
|
|
1627
1988
|
await Promise.all(batch.map(async (img) => {
|
|
1628
1989
|
const originalSrc = img.src;
|
|
1629
|
-
//
|
|
1630
|
-
if (this.
|
|
1990
|
+
// 检查缓存(带过期时间)
|
|
1991
|
+
if (this.getCachedImage(originalSrc)) {
|
|
1631
1992
|
return;
|
|
1632
1993
|
}
|
|
1633
1994
|
try {
|
|
1634
1995
|
// 使用代理服务器获取图片
|
|
1635
1996
|
const dataUrl = await this.proxyImage(originalSrc);
|
|
1636
1997
|
if (dataUrl) {
|
|
1637
|
-
// 缓存 data URL
|
|
1638
|
-
this.
|
|
1998
|
+
// 缓存 data URL(带时间戳)
|
|
1999
|
+
this.setCachedImage(originalSrc, dataUrl);
|
|
1639
2000
|
}
|
|
1640
2001
|
}
|
|
1641
2002
|
catch (error) {
|
|
@@ -1716,7 +2077,7 @@ class ScreenshotManager {
|
|
|
1716
2077
|
});
|
|
1717
2078
|
}
|
|
1718
2079
|
/**
|
|
1719
|
-
*
|
|
2080
|
+
* 等待图片加载完成(优化:使用更短的超时和 Promise.race)
|
|
1720
2081
|
*/
|
|
1721
2082
|
async waitForImagesToLoad(element) {
|
|
1722
2083
|
const images = element.querySelectorAll('img');
|
|
@@ -1725,32 +2086,33 @@ class ScreenshotManager {
|
|
|
1725
2086
|
if (img.complete) {
|
|
1726
2087
|
return;
|
|
1727
2088
|
}
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
};
|
|
1740
|
-
}));
|
|
2089
|
+
// 使用更短的超时时间(可配置)
|
|
2090
|
+
const timeout = this.options.imageLoadTimeout || 5000;
|
|
2091
|
+
imagePromises.push(Promise.race([
|
|
2092
|
+
new Promise((resolve) => {
|
|
2093
|
+
img.onload = () => resolve();
|
|
2094
|
+
img.onerror = () => resolve(); // 失败也继续
|
|
2095
|
+
}),
|
|
2096
|
+
new Promise((resolve) => {
|
|
2097
|
+
setTimeout(() => resolve(), timeout);
|
|
2098
|
+
})
|
|
2099
|
+
]));
|
|
1741
2100
|
});
|
|
1742
2101
|
if (imagePromises.length > 0) {
|
|
1743
2102
|
await Promise.all(imagePromises);
|
|
1744
2103
|
}
|
|
1745
2104
|
}
|
|
1746
2105
|
/**
|
|
1747
|
-
* 等待 CSS
|
|
2106
|
+
* 等待 CSS 和字体加载完成(优化:减少等待时间,使用 requestAnimationFrame)
|
|
1748
2107
|
*/
|
|
1749
2108
|
async waitForStylesAndFonts() {
|
|
2109
|
+
// 使用 requestAnimationFrame 优化渲染时机
|
|
1750
2110
|
return new Promise((resolve) => {
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
2111
|
+
requestAnimationFrame(() => {
|
|
2112
|
+
setTimeout(() => {
|
|
2113
|
+
resolve();
|
|
2114
|
+
}, 30); // 减少到30ms
|
|
2115
|
+
});
|
|
1754
2116
|
});
|
|
1755
2117
|
}
|
|
1756
2118
|
/**
|
|
@@ -1970,9 +2332,86 @@ class ScreenshotManager {
|
|
|
1970
2332
|
this.messageHandler = null;
|
|
1971
2333
|
}
|
|
1972
2334
|
this.removeGlobalErrorHandlers();
|
|
2335
|
+
// 清理 Intersection Observer
|
|
2336
|
+
if (this.intersectionObserver) {
|
|
2337
|
+
this.intersectionObserver.disconnect();
|
|
2338
|
+
this.intersectionObserver = null;
|
|
2339
|
+
this.visibleElementsCache.clear();
|
|
2340
|
+
}
|
|
2341
|
+
// 关闭 IndexedDB
|
|
2342
|
+
if (this.indexedDBCache) {
|
|
2343
|
+
this.indexedDBCache.close();
|
|
2344
|
+
this.indexedDBCache = null;
|
|
2345
|
+
this.indexedDBReady = false;
|
|
2346
|
+
}
|
|
1973
2347
|
// 清理图片代理缓存
|
|
1974
2348
|
this.imageProxyCache.clear();
|
|
1975
2349
|
}
|
|
2350
|
+
/**
|
|
2351
|
+
* 获取缓存的图片(检查是否过期)
|
|
2352
|
+
*/
|
|
2353
|
+
getCachedImage(url) {
|
|
2354
|
+
const cached = this.imageProxyCache.get(url);
|
|
2355
|
+
if (!cached) {
|
|
2356
|
+
return null;
|
|
2357
|
+
}
|
|
2358
|
+
// 检查是否过期(10分钟)
|
|
2359
|
+
const now = Date.now();
|
|
2360
|
+
const age = now - cached.timestamp;
|
|
2361
|
+
if (age > this.options.imageCacheTTL) {
|
|
2362
|
+
// 缓存已过期,删除
|
|
2363
|
+
this.imageProxyCache.delete(url);
|
|
2364
|
+
return null;
|
|
2365
|
+
}
|
|
2366
|
+
return cached.dataUrl;
|
|
2367
|
+
}
|
|
2368
|
+
/**
|
|
2369
|
+
* 设置缓存的图片(带时间戳)
|
|
2370
|
+
*/
|
|
2371
|
+
setCachedImage(url, dataUrl) {
|
|
2372
|
+
this.imageProxyCache.set(url, {
|
|
2373
|
+
dataUrl,
|
|
2374
|
+
timestamp: Date.now()
|
|
2375
|
+
});
|
|
2376
|
+
}
|
|
2377
|
+
/**
|
|
2378
|
+
* 清理过期缓存
|
|
2379
|
+
*/
|
|
2380
|
+
cleanExpiredCache() {
|
|
2381
|
+
const now = Date.now();
|
|
2382
|
+
const expiredUrls = [];
|
|
2383
|
+
this.imageProxyCache.forEach((cached, url) => {
|
|
2384
|
+
const age = now - cached.timestamp;
|
|
2385
|
+
if (age > this.options.imageCacheTTL) {
|
|
2386
|
+
expiredUrls.push(url);
|
|
2387
|
+
}
|
|
2388
|
+
});
|
|
2389
|
+
expiredUrls.forEach(url => {
|
|
2390
|
+
this.imageProxyCache.delete(url);
|
|
2391
|
+
});
|
|
2392
|
+
if (expiredUrls.length > 0 && !this.options.silentMode) {
|
|
2393
|
+
console.log(`📸 清理了 ${expiredUrls.length} 个过期缓存`);
|
|
2394
|
+
}
|
|
2395
|
+
}
|
|
2396
|
+
/**
|
|
2397
|
+
* 定期清理过期缓存(可选,在截图时也会自动清理)
|
|
2398
|
+
*/
|
|
2399
|
+
startCacheCleanup() {
|
|
2400
|
+
// 每5分钟清理一次过期缓存
|
|
2401
|
+
setInterval(() => {
|
|
2402
|
+
this.cleanExpiredCache();
|
|
2403
|
+
// 如果启用 IndexedDB,也清理 IndexedDB 缓存
|
|
2404
|
+
if (this.options.useIndexedDB) {
|
|
2405
|
+
this.cleanIndexedDBCache().catch(() => {
|
|
2406
|
+
// 清理失败,忽略
|
|
2407
|
+
});
|
|
2408
|
+
}
|
|
2409
|
+
if (!this.options.silentMode) {
|
|
2410
|
+
const memoryCacheSize = this.imageProxyCache.size;
|
|
2411
|
+
console.log(`📸 清理过期缓存,内存缓存数量: ${memoryCacheSize}`);
|
|
2412
|
+
}
|
|
2413
|
+
}, 300000); // 5分钟
|
|
2414
|
+
}
|
|
1976
2415
|
/**
|
|
1977
2416
|
* 获取状态
|
|
1978
2417
|
*/
|