444 lines
11 KiB
Markdown
444 lines
11 KiB
Markdown
# bin文件上传速度优化方案 v3.14.2
|
||
|
||
**版本**: v3.14.2
|
||
**日期**: 2025-10-12
|
||
**类型**: 性能优化
|
||
|
||
---
|
||
|
||
## 📊 性能瓶颈分析
|
||
|
||
### 当前性能数据
|
||
|
||
**单文件处理时间**：~1200-3800ms
|
||
|
||
| 步骤 | 耗时 | 占比 | 类型 |
|
||
|-----|------|------|------|
|
||
| 1. 读取文件 | 5-10ms | <1% | I/O |
|
||
| 2. Base64转换 | 20-50ms | 2-4% | CPU |
|
||
| 3. 读取localStorage | 10-20ms | 1-2% | I/O |
|
||
| 4. 写入localStorage(bin) | 50-100ms | 4-8% | I/O |
|
||
| 5. **上传到服务器** | **500-2000ms** | **40-50%** | **网络** 🔴 |
|
||
| 6. **等待服务器响应** | **500-1500ms** | **30-40%** | **网络** 🔴 |
|
||
| 7. 提取Token | 5ms | <1% | CPU |
|
||
| 8. 写入localStorage(Token) | 30-50ms | 2-4% | I/O |
|
||
|
||
### 🔴 主要瓶颈
|
||
|
||
1. **网络请求（70-90%）** - 服务器往返时间
|
||
2. **localStorage写入（6-12%）** - 频繁的磁盘I/O
|
||
3. **Base64转换（2-4%）** - CPU计算
|
||
|
||
---
|
||
|
||
## 🚀 优化方案
|
||
|
||
### 方案1：并发上传（最有效 ⭐⭐⭐⭐⭐）
|
||
|
||
**原理**：同时处理多个文件，利用网络等待时间
|
||
|
||
**实现**：
|
||
```javascript
|
||
// 并发处理配置
|
||
const CONCURRENT_UPLOAD_LIMIT = 3 // 同时上传3个文件
|
||
|
||
// 使用Promise.all控制并发
|
||
const uploadBatch = async (files, startIndex, batchSize) => {
|
||
const batch = files.slice(startIndex, startIndex + batchSize)
|
||
const promises = batch.map(file => uploadSingleFile(file))
|
||
return await Promise.all(promises)
|
||
}
|
||
|
||
// 分批并发处理
|
||
for (let i = 0; i < files.length; i += CONCURRENT_UPLOAD_LIMIT) {
|
||
await uploadBatch(files, i, CONCURRENT_UPLOAD_LIMIT)
|
||
}
|
||
```
|
||
|
||
**预期效果**：
|
||
- 3个并发：速度提升 **2-2.5倍** 🚀
|
||
- 9个文件：从 ~18-34秒 → ~7-14秒
|
||
|
||
**风险**：
|
||
- ⚠️ 服务器可能有并发限制
|
||
- ⚠️ 需要处理并发失败的情况
|
||
|
||
---
|
||
|
||
### 方案2：延迟bin文件存储（中等有效 ⭐⭐⭐）
|
||
|
||
**原理**：先上传获取Token，后台异步存储bin文件
|
||
|
||
**实现**：
|
||
```javascript
|
||
// 收集需要存储的bin文件
|
||
const pendingBinFiles = []
|
||
|
||
for (let file of files) {
|
||
// 1. 快速上传获取Token
|
||
const token = await uploadAndGetToken(file)
|
||
tokenStore.addToken(token)
|
||
|
||
// 2. 延迟存储bin文件
|
||
pendingBinFiles.push({ id, content, ...meta })
|
||
}
|
||
|
||
// 所有上传完成后，批量存储bin文件
|
||
setTimeout(() => {
|
||
saveBinFilesToLocalStorage(pendingBinFiles)
|
||
}, 1000)
|
||
```
|
||
|
||
**预期效果**：
|
||
- 每个文件节省 50-100ms
|
||
- 9个文件节省 ~0.5-1秒
|
||
- 用户感知速度提升 **10-15%**
|
||
|
||
**优点**：
|
||
- ✅ 不阻塞主流程
|
||
- ✅ 用户体验更流畅
|
||
|
||
---
|
||
|
||
### 方案3：可选bin文件存储（小幅优化 ⭐⭐）
|
||
|
||
**原理**：让用户选择是否需要存储bin文件
|
||
|
||
**实现**：
|
||
```vue
|
||
<n-checkbox v-model:checked="saveBinFiles">
|
||
保存bin文件到本地（用于后续刷新Token）
|
||
</n-checkbox>
|
||
```
|
||
|
||
**预期效果**：
|
||
- 如果不保存：每个文件节省 50-120ms
|
||
- 9个文件节省 ~0.5-1.1秒
|
||
- 速度提升 **8-12%**
|
||
|
||
**适用场景**：
|
||
- 用户不需要刷新Token功能
|
||
- 临时导入Token
|
||
|
||
---
|
||
|
||
### 方案4：批量localStorage操作（小幅优化 ⭐⭐）
|
||
|
||
**原理**：减少localStorage写入次数
|
||
|
||
**当前**：
|
||
```javascript
|
||
// 每个文件写2次localStorage
|
||
for (let file of files) {
|
||
// 写入1：存储bin文件
|
||
localStorage.setItem('storedBinFiles', ...)
|
||
|
||
// 写入2：存储Token
|
||
tokenStore.addToken(...) // 内部也会写localStorage
|
||
}
|
||
// 总计：9个文件 = 18次写入
|
||
```
|
||
|
||
**优化后**：
|
||
```javascript
|
||
// 收集所有数据
|
||
const binFiles = []
|
||
const tokens = []
|
||
|
||
for (let file of files) {
|
||
binFiles.push(...)
|
||
tokens.push(...)
|
||
}
|
||
|
||
// 批量写入（2次）
|
||
localStorage.setItem('storedBinFiles', JSON.stringify(binFiles))
|
||
localStorage.setItem('gameTokens', JSON.stringify(tokens))
|
||
// 总计：只写2次
|
||
```
|
||
|
||
**预期效果**：
|
||
- 减少16次localStorage写入
|
||
- 节省 ~0.5-1秒
|
||
- 速度提升 **8-10%**
|
||
|
||
---
|
||
|
||
## 📋 推荐实施方案
|
||
|
||
### 阶段1：快速见效（推荐优先实施 🔥）
|
||
|
||
**方案1 + 方案2组合**
|
||
|
||
| 优化项 | 预期提升 | 实施难度 | 风险 |
|
||
|-------|---------|---------|------|
|
||
| 并发上传(3并发) | 120-150% | ⭐⭐ | 低 |
|
||
| 延迟bin存储 | 10-15% | ⭐ | 极低 |
|
||
| **综合效果** | **2-2.8倍** | ⭐⭐ | **低** |
|
||
|
||
**预期结果**：
|
||
- 9个文件：**18-34秒 → 6-12秒** 🚀
|
||
- 用户体验：显著提升
|
||
|
||
### 阶段2：进一步优化（可选）
|
||
|
||
**+ 方案3 + 方案4**
|
||
|
||
| 优化项 | 额外提升 | 实施难度 |
|
||
|-------|---------|---------|
|
||
| 可选bin存储 | 8-12% | ⭐ |
|
||
| 批量localStorage | 8-10% | ⭐⭐ |
|
||
| **综合额外效果** | **15-20%** | ⭐⭐ |
|
||
|
||
**最终结果**：
|
||
- 9个文件：**18-34秒 → 5-10秒** 🚀🚀
|
||
- 用户体验：极大提升
|
||
|
||
---
|
||
|
||
## 🔧 具体实施代码
|
||
|
||
### 1. 并发上传实现
|
||
|
||
```javascript
|
||
// 并发上传配置（可调整）
|
||
const uploadConfig = reactive({
|
||
concurrentLimit: 3, // 同时上传3个文件
|
||
enableConcurrent: true // 是否启用并发
|
||
})
|
||
|
||
// 单个文件上传函数
|
||
const uploadSingleFile = async (file, index, totalFiles) => {
|
||
try {
|
||
updateUploadProgress(index + 1, totalFiles, file.name)
|
||
|
||
// 读取文件
|
||
const arrayBuffer = await readBinFile(file)
|
||
|
||
// 上传到服务器（最耗时的部分）
|
||
const response = await fetch('https://xxz-xyzw.hortorgames.com/login/authuser?_seq=1', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/octet-stream' },
|
||
body: arrayBuffer
|
||
})
|
||
|
||
// 提取Token
|
||
const responseArrayBuffer = await response.arrayBuffer()
|
||
const roleToken = extractRoleToken(responseArrayBuffer)
|
||
|
||
// 生成Token数据
|
||
const tokenData = createTokenData(roleToken, file.name)
|
||
|
||
// 返回结果
|
||
return { success: true, tokenData, arrayBuffer, file }
|
||
} catch (error) {
|
||
return { success: false, error, file }
|
||
}
|
||
}
|
||
|
||
// 并发批量处理
|
||
const handleBinImportConcurrent = async () => {
|
||
const files = binForm.files
|
||
const totalFiles = files.length
|
||
|
||
uploadProgress.show = true
|
||
uploadProgress.type = 'bin'
|
||
uploadProgress.total = totalFiles
|
||
|
||
let successCount = 0
|
||
let failedCount = 0
|
||
const binFilesToSave = [] // 延迟存储
|
||
|
||
// 分批并发处理
|
||
for (let i = 0; i < files.length; i += uploadConfig.concurrentLimit) {
|
||
const batchSize = Math.min(uploadConfig.concurrentLimit, files.length - i)
|
||
const batch = Array.from({ length: batchSize }, (_, j) => files[i + j])
|
||
|
||
// 并发上传这一批
|
||
const results = await Promise.all(
|
||
batch.map((file, j) => uploadSingleFile(file, i + j, totalFiles))
|
||
)
|
||
|
||
// 处理结果
|
||
for (const result of results) {
|
||
if (result.success) {
|
||
// 立即保存Token
|
||
tokenStore.addToken(result.tokenData)
|
||
successCount++
|
||
uploadProgress.successCount = successCount
|
||
|
||
// 收集bin文件（延迟存储）
|
||
binFilesToSave.push({
|
||
id: `bin_${Date.now()}_${Math.random()}`,
|
||
name: result.file.name,
|
||
content: arrayBufferToBase64(result.arrayBuffer),
|
||
tokenData: result.tokenData
|
||
})
|
||
} else {
|
||
failedCount++
|
||
uploadProgress.failedCount = failedCount
|
||
console.error(`上传失败: ${result.file.name}`, result.error)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 后台异步存储bin文件（不阻塞）
|
||
setTimeout(() => {
|
||
saveBinFilesToLocalStorage(binFilesToSave)
|
||
}, 500)
|
||
|
||
// 显示结果
|
||
setTimeout(() => resetUploadProgress(), 2000)
|
||
message.success(`成功导入 ${successCount} 个Token${failedCount > 0 ? `，${failedCount} 个失败` : ''}`)
|
||
}
|
||
|
||
// 批量保存bin文件到localStorage
|
||
const saveBinFilesToLocalStorage = (binFiles) => {
|
||
try {
|
||
const storedBinFiles = JSON.parse(localStorage.getItem('storedBinFiles') || '{}')
|
||
|
||
// 批量添加
|
||
binFiles.forEach(binFile => {
|
||
storedBinFiles[binFile.id] = {
|
||
id: binFile.id,
|
||
name: binFile.name,
|
||
roleName: binFile.tokenData.name,
|
||
content: binFile.content,
|
||
createdAt: new Date().toISOString(),
|
||
lastUsed: new Date().toISOString()
|
||
}
|
||
})
|
||
|
||
// 一次性写入
|
||
localStorage.setItem('storedBinFiles', JSON.stringify(storedBinFiles))
|
||
console.log(`✅ 批量保存 ${binFiles.length} 个bin文件到localStorage`)
|
||
} catch (error) {
|
||
console.error('批量保存bin文件失败:', error)
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 可选bin文件存储
|
||
|
||
```vue
|
||
<template>
|
||
<n-form-item label="上传选项">
|
||
<n-space vertical>
|
||
<n-checkbox v-model:checked="uploadConfig.enableConcurrent">
|
||
<n-text>启用并发上传（推荐，速度提升2-3倍）</n-text>
|
||
</n-checkbox>
|
||
|
||
<n-checkbox v-model:checked="uploadConfig.saveBinFiles">
|
||
<n-text>保存bin文件到本地（用于后续刷新Token）</n-text>
|
||
</n-checkbox>
|
||
|
||
<n-input-number
|
||
v-if="uploadConfig.enableConcurrent"
|
||
v-model:value="uploadConfig.concurrentLimit"
|
||
:min="1"
|
||
:max="5"
|
||
placeholder="并发数量"
|
||
>
|
||
<template #prefix>并发数：</template>
|
||
</n-input-number>
|
||
</n-space>
|
||
</n-form-item>
|
||
</template>
|
||
|
||
<script setup>
|
||
const uploadConfig = reactive({
|
||
enableConcurrent: true, // 默认启用
|
||
concurrentLimit: 3, // 默认3个并发
|
||
saveBinFiles: true // 默认保存
|
||
})
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## 📈 性能对比
|
||
|
||
### 测试场景：上传9个bin文件
|
||
|
||
| 版本 | 串行/并发 | bin存储 | 总耗时 | 速度提升 |
|
||
|-----|----------|---------|--------|---------|
|
||
| v3.14.1 | 串行 | 即时 | 18-34秒 | 基线 |
|
||
| v3.14.2-A | **3并发** | 即时 | 7-14秒 | **2.2x** 🚀 |
|
||
| v3.14.2-B | **3并发** | **延迟** | 6-12秒 | **2.5x** 🚀 |
|
||
| v3.14.2-C | **3并发** | **可选关闭** | 5-10秒 | **2.8x** 🚀🚀 |
|
||
|
||
### 实际体验
|
||
|
||
- **v3.14.1**：等待18-34秒，用户感觉很慢 😟
|
||
- **v3.14.2**：等待5-10秒，用户感觉很快 😊
|
||
|
||
---
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 1. 服务器并发限制
|
||
|
||
某些服务器可能限制同一IP的并发请求数，建议：
|
||
- 默认3个并发（安全）
|
||
- 最多不超过5个
|
||
- 如果遇到429错误，自动降低并发数
|
||
|
||
### 2. 浏览器资源
|
||
|
||
- 浏览器对同一域名的并发连接数有限制（通常6-10个）
|
||
- 建议并发数不超过3-4个
|
||
|
||
### 3. 错误处理
|
||
|
||
并发模式下需要更完善的错误处理：
|
||
```javascript
|
||
try {
|
||
const results = await Promise.all(batch)
|
||
} catch (error) {
|
||
// 某个文件失败不影响其他文件
|
||
console.error('批次处理失败:', error)
|
||
}
|
||
```
|
||
|
||
### 4. 内存占用
|
||
|
||
并发处理会同时占用更多内存：
|
||
- 3个并发：增加约10-20MB内存
|
||
- 可接受范围
|
||
|
||
---
|
||
|
||
## ✅ 实施建议
|
||
|
||
### 推荐配置
|
||
|
||
```javascript
|
||
// 推荐的默认配置
|
||
{
|
||
enableConcurrent: true, // 启用并发
|
||
concurrentLimit: 3, // 3个并发（平衡性能和稳定性）
|
||
saveBinFiles: true, // 保存bin文件（功能完整）
|
||
delaySaveBinFiles: true // 延迟保存（提升速度）
|
||
}
|
||
```
|
||
|
||
### 渐进式实施
|
||
|
||
1. **第一步**：实施并发上传（方案1）
|
||
- 风险低，收益高
|
||
- 测试稳定性
|
||
|
||
2. **第二步**：添加延迟存储（方案2）
|
||
- 进一步优化
|
||
- 观察用户反馈
|
||
|
||
3. **第三步**：添加可选配置（方案3）
|
||
- 给高级用户更多选择
|
||
- 完善体验
|
||
|
||
---
|
||
|
||
**版本标记**: v3.14.2
|
||
**实施状态**: ⏳ 待实施
|
||
**预期收益**: 速度提升 **2-2.8倍** 🚀🚀
|
||
|