Default User
4 weeks ago
4 changed files with 805 additions and 24 deletions
@ -0,0 +1,500 @@ |
|||
# 企业级缓存架构实施方案 |
|||
|
|||
## 1. 问题分析 |
|||
|
|||
当前 `supply.html` 页面存在以下性能问题： |
|||
|
|||
1. **无缓存机制**：每次加载页面或刷新列表时都重新从API获取所有数据 |
|||
2. **一次性获取大量数据**：使用 `pageSize: 1000` 一次性获取所有数据 |
|||
3. **重复计算和过滤**：每次都需要重新处理和过滤数据 |
|||
4. **无数据变更检测**：无法检测数据是否发生变化，只能通过完全重新加载来更新 |
|||
5. **无虚拟滚动**：即使使用分页，也没有实现虚拟滚动来优化DOM渲染 |
|||
|
|||
## 2. 解决方案 |
|||
|
|||
### 2.1 前端缓存架构 |
|||
|
|||
#### 2.1.1 数据缓存层 |
|||
|
|||
```javascript |
|||
// 缓存管理器 |
|||
class CacheManager { |
|||
constructor() { |
|||
this.cache = new Map(); |
|||
this.defaultTTL = 5 * 60 * 1000; // 默认缓存5分钟 |
|||
} |
|||
|
|||
// 设置缓存 |
|||
set(key, value, ttl = this.defaultTTL) { |
|||
const item = { |
|||
value, |
|||
expiry: Date.now() + ttl |
|||
}; |
|||
this.cache.set(key, item); |
|||
localStorage.setItem(`cache_${key}`, JSON.stringify(item)); |
|||
} |
|||
|
|||
// 获取缓存 |
|||
get(key) { |
|||
// 先从内存缓存获取 |
|||
let item = this.cache.get(key); |
|||
|
|||
// 如果内存缓存不存在，从localStorage获取 |
|||
if (!item) { |
|||
const stored = localStorage.getItem(`cache_${key}`); |
|||
if (stored) { |
|||
try { |
|||
item = JSON.parse(stored); |
|||
this.cache.set(key, item); |
|||
} catch (e) { |
|||
console.error('解析缓存失败:', e); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 检查缓存是否过期 |
|||
if (item && Date.now() < item.expiry) { |
|||
return item.value; |
|||
} |
|||
|
|||
// 缓存过期，清除缓存 |
|||
this.delete(key); |
|||
return null; |
|||
} |
|||
|
|||
// 删除缓存 |
|||
delete(key) { |
|||
this.cache.delete(key); |
|||
localStorage.removeItem(`cache_${key}`); |
|||
} |
|||
|
|||
// 清除所有缓存 |
|||
clear() { |
|||
this.cache.clear(); |
|||
// 清除所有以cache_开头的localStorage项 |
|||
for (let key in localStorage) { |
|||
if (key.startsWith('cache_')) { |
|||
localStorage.removeItem(key); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 清除指定前缀的缓存 |
|||
clearByPrefix(prefix) { |
|||
for (let key of this.cache.keys()) { |
|||
if (key.startsWith(prefix)) { |
|||
this.cache.delete(key); |
|||
} |
|||
} |
|||
for (let key in localStorage) { |
|||
if (key.startsWith(`cache_${prefix}`)) { |
|||
localStorage.removeItem(key); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 实例化缓存管理器 |
|||
const cacheManager = new CacheManager(); |
|||
``` |
|||
|
|||
#### 2.1.2 数据加载优化 |
|||
|
|||
```javascript |
|||
// 优化后的loadSupplies函数 |
|||
async function loadSupplies(forceRefresh = false) { |
|||
if (isLoadingSupplies) { |
|||
console.log('loadSupplies已在执行中，跳过当前请求'); |
|||
return; |
|||
} |
|||
|
|||
isLoadingSupplies = true; |
|||
|
|||
try { |
|||
const userInfo = checkLogin(); |
|||
if (!userInfo) return; |
|||
|
|||
const cacheKey = `supplies_${userInfo.userId || userInfo.id}_${userInfo.projectName}`; |
|||
|
|||
// 尝试从缓存获取数据 |
|||
if (!forceRefresh) { |
|||
const cachedData = cacheManager.get(cacheKey); |
|||
if (cachedData) { |
|||
console.log('从缓存加载货源数据'); |
|||
supplyData.supplies = cachedData.supplies; |
|||
supplyData.publishedSupplies = cachedData.publishedSupplies; |
|||
supplyData.pendingSupplies = cachedData.pendingSupplies; |
|||
supplyData.rejectedSupplies = cachedData.rejectedSupplies; |
|||
supplyData.draftSupplies = cachedData.draftSupplies; |
|||
renderSupplyLists(); |
|||
isLoadingSupplies = false; |
|||
return; |
|||
} |
|||
} |
|||
|
|||
// 重置分页数据 |
|||
resetPaginationData(); |
|||
|
|||
// 构建查询参数，使用合理的pageSize |
|||
const queryParams = new URLSearchParams({ |
|||
page: 1, |
|||
pageSize: 100 // 合理的分页大小 |
|||
}); |
|||
|
|||
// 非管理员添加sellerId参数 |
|||
if (userInfo.projectName !== '管理员') { |
|||
queryParams.append('sellerId', userInfo.userId || userInfo.id); |
|||
} |
|||
|
|||
const apiUrl = `/api/supplies?${queryParams}`; |
|||
console.log('加载货源列表API请求:', apiUrl); |
|||
|
|||
// 实现增量加载 |
|||
const allSupplies = []; |
|||
let currentPage = 1; |
|||
let hasMore = true; |
|||
|
|||
while (hasMore) { |
|||
const response = await fetch(`/api/supplies?page=${currentPage}&pageSize=100${userInfo.projectName !== '管理员' ? `&sellerId=${userInfo.userId || userInfo.id}` : ''}`); |
|||
const result = await response.json(); |
|||
|
|||
if (result.success) { |
|||
const pageSupplies = result.data.list; |
|||
allSupplies.push(...pageSupplies); |
|||
|
|||
// 检查是否还有更多数据 |
|||
hasMore = pageSupplies.length === 100; |
|||
currentPage++; |
|||
} else { |
|||
console.error('加载货源失败:', result.message); |
|||
hasMore = false; |
|||
} |
|||
} |
|||
|
|||
// 处理获取到的数据 |
|||
processSupplyData(allSupplies); |
|||
|
|||
// 缓存处理后的数据 |
|||
const cacheData = { |
|||
supplies: supplyData.supplies, |
|||
publishedSupplies: supplyData.publishedSupplies, |
|||
pendingSupplies: supplyData.pendingSupplies, |
|||
rejectedSupplies: supplyData.rejectedSupplies, |
|||
draftSupplies: supplyData.draftSupplies, |
|||
timestamp: Date.now() |
|||
}; |
|||
|
|||
// 设置缓存，管理员缓存时间较短，因为数据变化更频繁 |
|||
const cacheTTL = userInfo.projectName === '管理员' ? 2 * 60 * 1000 : 5 * 60 * 1000; |
|||
cacheManager.set(cacheKey, cacheData, cacheTTL); |
|||
|
|||
// 渲染货源列表 |
|||
renderSupplyLists(); |
|||
} catch (error) { |
|||
console.error('加载货源失败:', error); |
|||
} finally { |
|||
isLoadingSupplies = false; |
|||
} |
|||
} |
|||
|
|||
// 重置分页数据函数 |
|||
function resetPaginationData() { |
|||
supplyData.pagination = { |
|||
published: { currentPage: 1, pageSize: 20, total: 0, hasMore: true, isLoading: false }, |
|||
pending: { currentPage: 1, pageSize: 20, total: 0, hasMore: true, isLoading: false }, |
|||
rejected: { currentPage: 1, pageSize: 20, total: 0, hasMore: true, isLoading: false }, |
|||
draft: { currentPage: 1, pageSize: 20, total: 0, hasMore: true, isLoading: false } |
|||
}; |
|||
|
|||
supplyData.paginatedSupplies = { |
|||
published: [], |
|||
pending: [], |
|||
rejected: [], |
|||
draft: [] |
|||
}; |
|||
} |
|||
``` |
|||
|
|||
#### 2.1.3 虚拟滚动实现 |
|||
|
|||
```javascript |
|||
// 虚拟滚动组件 |
|||
class VirtualScroll { |
|||
constructor(container, items, renderItem, itemHeight = 300) { |
|||
this.container = container; |
|||
this.items = items; |
|||
this.renderItem = renderItem; |
|||
this.itemHeight = itemHeight; |
|||
this.visibleItems = []; |
|||
this.startIndex = 0; |
|||
this.endIndex = 0; |
|||
|
|||
this.init(); |
|||
} |
|||
|
|||
init() { |
|||
// 设置容器高度 |
|||
this.container.style.height = '600px'; |
|||
this.container.style.overflow = 'auto'; |
|||
this.container.style.position = 'relative'; |
|||
|
|||
// 创建占位元素 |
|||
this.placeholder = document.createElement('div'); |
|||
this.placeholder.style.height = `${this.items.length * this.itemHeight}px`; |
|||
this.placeholder.style.position = 'absolute'; |
|||
this.placeholder.style.top = '0'; |
|||
this.placeholder.style.left = '0'; |
|||
this.placeholder.style.width = '100%'; |
|||
this.container.appendChild(this.placeholder); |
|||
|
|||
// 创建可见项目容器 |
|||
this.itemsContainer = document.createElement('div'); |
|||
this.itemsContainer.style.position = 'absolute'; |
|||
this.itemsContainer.style.top = '0'; |
|||
this.itemsContainer.style.left = '0'; |
|||
this.itemsContainer.style.width = '100%'; |
|||
this.container.appendChild(this.itemsContainer); |
|||
|
|||
// 绑定滚动事件 |
|||
this.container.addEventListener('scroll', this.handleScroll.bind(this)); |
|||
|
|||
// 初始渲染 |
|||
this.updateVisibleItems(); |
|||
} |
|||
|
|||
handleScroll() { |
|||
this.updateVisibleItems(); |
|||
} |
|||
|
|||
updateVisibleItems() { |
|||
const scrollTop = this.container.scrollTop; |
|||
const containerHeight = this.container.clientHeight; |
|||
|
|||
// 计算可见项的范围 |
|||
const newStartIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - 2); |
|||
const newEndIndex = Math.min( |
|||
this.items.length - 1, |
|||
Math.ceil((scrollTop + containerHeight) / this.itemHeight) + 2 |
|||
); |
|||
|
|||
// 如果范围没有变化，不更新 |
|||
if (newStartIndex === this.startIndex && newEndIndex === this.endIndex) { |
|||
return; |
|||
} |
|||
|
|||
this.startIndex = newStartIndex; |
|||
this.endIndex = newEndIndex; |
|||
|
|||
// 渲染可见项 |
|||
this.renderVisibleItems(); |
|||
} |
|||
|
|||
renderVisibleItems() { |
|||
// 清空容器 |
|||
this.itemsContainer.innerHTML = ''; |
|||
|
|||
// 设置容器位置 |
|||
this.itemsContainer.style.transform = `translateY(${this.startIndex * this.itemHeight}px)`; |
|||
|
|||
// 渲染可见项 |
|||
for (let i = this.startIndex; i <= this.endIndex; i++) { |
|||
const item = this.renderItem(this.items[i]); |
|||
this.itemsContainer.appendChild(item); |
|||
} |
|||
} |
|||
|
|||
// 更新数据源 |
|||
updateItems(items) { |
|||
this.items = items; |
|||
this.placeholder.style.height = `${this.items.length * this.itemHeight}px`; |
|||
this.updateVisibleItems(); |
|||
} |
|||
} |
|||
|
|||
// 使用虚拟滚动 |
|||
function initVirtualScroll() { |
|||
const publishedList = document.getElementById('publishedList'); |
|||
if (publishedList) { |
|||
const virtualScroll = new VirtualScroll( |
|||
publishedList, |
|||
supplyData.publishedSupplies, |
|||
(supply) => { |
|||
const item = document.createElement('div'); |
|||
item.className = 'supply-item'; |
|||
item.innerHTML = generateSupplyItemHTML(supply); |
|||
return item; |
|||
} |
|||
); |
|||
|
|||
// 保存虚拟滚动实例 |
|||
supplyData.virtualScroll = virtualScroll; |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 2.2 后端优化建议 |
|||
|
|||
#### 2.2.1 API 优化 |
|||
|
|||
1. **实现增量更新**： |
|||
- 添加 `lastUpdated` 参数，只返回比该时间更新的数据 |
|||
- 实现 `ETag` 和 `If-None-Match` 头，支持缓存验证 |
|||
|
|||
2. **数据压缩**： |
|||
- 启用 Gzip/Brotli 压缩 |
|||
- 对大型数据集使用分页和字段过滤 |
|||
|
|||
3. **缓存层**： |
|||
- 在后端添加 Redis 缓存 |
|||
- 缓存热门查询结果 |
|||
|
|||
### 2.3 缓存策略设计 |
|||
|
|||
#### 2.3.1 多级缓存策略 |
|||
|
|||
| 缓存级别 | 存储介质 | 缓存时间 | 适用场景 | |
|||
|---------|---------|---------|----------| |
|||
| L1 | 内存 (Map) | 5分钟 | 频繁访问的数据 | |
|||
| L2 | localStorage | 5分钟 | 页面刷新后的数据 | |
|||
| L3 | 后端 Redis | 10分钟 | 多用户共享的数据 | |
|||
|
|||
#### 2.3.2 缓存键设计 |
|||
|
|||
```javascript |
|||
// 缓存键格式 |
|||
const cacheKey = `supplies_${userId}_${role}_${timestamp}`; |
|||
|
|||
// 示例： |
|||
supplies_user123_管理员_1678900000000 |
|||
``` |
|||
|
|||
#### 2.3.3 缓存失效策略 |
|||
|
|||
1. **时间过期**： |
|||
- 管理员：2分钟 |
|||
- 普通用户：5分钟 |
|||
|
|||
2. **主动失效**： |
|||
- 数据变更时主动清除相关缓存 |
|||
- 页面操作（如上架/下架）后清除对应缓存 |
|||
|
|||
3. **批量失效**： |
|||
- 使用前缀清除策略，如清除所有 `supplies_${userId}_` 开头的缓存 |
|||
|
|||
### 3. 实施方案 |
|||
|
|||
#### 3.1 实施步骤 |
|||
|
|||
1. **第一步：添加缓存管理器** |
|||
- 在 `supply.html` 中添加 `CacheManager` 类 |
|||
- 初始化缓存管理器实例 |
|||
|
|||
2. **第二步：优化数据加载** |
|||
- 修改 `loadSupplies` 函数，添加缓存逻辑 |
|||
- 实现增量加载和分页 |
|||
|
|||
3. **第三步：实现虚拟滚动** |
|||
- 添加 `VirtualScroll` 类 |
|||
- 修改渲染逻辑，使用虚拟滚动 |
|||
|
|||
4. **第四步：添加缓存失效机制** |
|||
- 在数据变更操作后添加缓存清除逻辑 |
|||
- 实现缓存过期检查 |
|||
|
|||
5. **第五步：测试和优化** |
|||
- 测试不同数据量下的性能 |
|||
- 调整缓存时间和分页大小 |
|||
|
|||
#### 3.2 预期效果 |
|||
|
|||
| 指标 | 优化前 | 优化后 | 提升幅度 | |
|||
|------|--------|--------|----------| |
|||
| 首次加载时间 | 5-10秒 | 2-3秒 | ~60% | |
|||
| 页面刷新时间 | 3-5秒 | 0.5-1秒 | ~80% | |
|||
| 内存使用 | 500MB+ | 100-200MB | ~60% | |
|||
| 可支持数据量 | 500-1000条 | 5000+条 | ~5x | |
|||
|
|||
### 4. 监控和维护 |
|||
|
|||
#### 4.1 监控指标 |
|||
|
|||
1. **前端指标**： |
|||
- 页面加载时间 |
|||
- 数据加载时间 |
|||
- 内存使用情况 |
|||
- 缓存命中率 |
|||
|
|||
2. **后端指标**： |
|||
- API 响应时间 |
|||
- 数据库查询时间 |
|||
- 缓存命中率 |
|||
|
|||
#### 4.2 维护建议 |
|||
|
|||
1. **定期清理**： |
|||
- 定期清理过期缓存 |
|||
- 监控 localStorage 使用情况 |
|||
|
|||
2. **性能分析**： |
|||
- 使用 Chrome DevTools 分析性能 |
|||
- 识别瓶颈并优化 |
|||
|
|||
3. **扩展性**： |
|||
- 设计模块化的缓存系统 |
|||
- 支持未来添加更多缓存策略 |
|||
|
|||
### 5. 代码集成示例 |
|||
|
|||
#### 5.1 完整的缓存集成 |
|||
|
|||
```javascript |
|||
// 在页面初始化时 |
|||
window.onload = function() { |
|||
// 初始化缓存管理器 |
|||
const cacheManager = new CacheManager(); |
|||
|
|||
// 初始化应用 |
|||
init(); |
|||
|
|||
// 加载数据（优先使用缓存） |
|||
loadSupplies(); |
|||
|
|||
// 定时刷新缓存 |
|||
setInterval(() => { |
|||
loadSupplies(false); // 不强制刷新 |
|||
}, 300000); // 5分钟 |
|||
}; |
|||
|
|||
// 在数据变更操作后 |
|||
async function publishSupply(id) { |
|||
// 执行上架操作 |
|||
const success = await apiCall('/api/supplies/' + id + '/publish'); |
|||
|
|||
if (success) { |
|||
// 清除相关缓存 |
|||
const userInfo = checkLogin(); |
|||
const cacheKey = `supplies_${userInfo.userId || userInfo.id}_${userInfo.projectName}`; |
|||
cacheManager.delete(cacheKey); |
|||
|
|||
// 重新加载数据 |
|||
loadSupplies(true); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## 4. 总结 |
|||
|
|||
本实施方案通过以下核心技术提升性能： |
|||
|
|||
1. **多级缓存**：内存 + localStorage + 后端 Redis |
|||
2. **增量加载**：分页获取数据，减少一次性加载压力 |
|||
3. **虚拟滚动**：只渲染可视区域的数据，减少 DOM 操作 |
|||
4. **智能缓存策略**：基于用户角色和数据类型的差异化缓存 |
|||
5. **缓存失效机制**：时间过期 + 主动失效 |
|||
|
|||
通过这些优化，系统可以支持： |
|||
- 管理员查看和管理大量货源数据 |
|||
- 快速页面加载和响应 |
|||
- 稳定的性能表现，即使在数据量增长的情况下 |
|||
|
|||
此方案不仅解决了当前的性能问题，也为未来的系统扩展奠定了基础。 |
|||
Loading…
Reference in new issue