# DNS 查询日志加载性能优化方案

## 问题分析

当前日志详情页面加载时间约 10 秒，主要性能瓶颈分析如下：

### 1. **主要性能瓶颈**

#### 1.1 同步 API 调用（最严重）
- **位置**: `updateLogsTable()` 函数第 1221 行
- **问题**: 对每条日志都调用 `await isDomainInTrackerDatabase(log.domain)`
- **影响**: 假设每页 10 条日志，每条日志检查跟踪器数据库需要 100-500ms，总计 1-5 秒
- **代码**:
```javascript
const trackerInfo = await isDomainInTrackerDatabase(log.domain); // ❌ 每条都 await
```

#### 1.2 跟踪器数据库加载
- **位置**: `isDomainInTrackerDatabase()` 函数
- **问题**: 每次检查都要等待数据库加载完成
- **影响**: 首次加载或数据库未加载完成时，每条日志都要等待

#### 1.3 域名信息 API 调用
- **位置**: `getDomainInfoFromAPI()` 函数
- **问题**: 如果实现中调用 API，会产生网络延迟
- **影响**: 每个域名都可能产生一次 HTTP 请求

#### 1.4 IP 地理位置查询
- **位置**: `getIpGeolocation()` 函数
- **问题**: 虽然有缓存，但首次查询仍需调用外部 API
- **影响**: 每个新 IP 地址需要 200-500ms

### 2. **性能测试数据（估算）**

| 操作 | 单次耗时 | 每页 10 条总耗时 | 优化后耗时 |
|------|---------|----------------|-----------|
| 跟踪器检查 | 100-500ms | 1-5 秒 | <100ms |
| IP 地理位置 | 200-500ms | 2-5 秒 | <500ms（缓存） |
| 后端 API 查询 | 100-300ms | 100-300ms | 不变 |
| DOM 渲染 | 50-100ms | 50-100ms | 不变 |
| **总计** | **10 秒** | **3-10 秒** | **<1 秒** |

---

## 优化方案

### 方案一：异步并行处理（推荐优先实施）⭐⭐⭐⭐⭐

#### 1.1 批量并行检查跟踪器

**问题**: 当前是串行等待每个域名的检查结果
**解决**: 使用 `Promise.all()` 并行处理所有域名的检查

```javascript
// 优化前（串行）
for (const log of logs) {
    const trackerInfo = await isDomainInTrackerDatabase(log.domain);
    // ... 处理逻辑
}

// 优化后（并行）
const trackerChecks = logs.map(log => isDomainInTrackerDatabase(log.domain));
const trackerResults = await Promise.all(trackerChecks);

// 然后渲染表格
logs.forEach((log, index) => {
    const trackerInfo = trackerResults[index];
    // ... 渲染逻辑
});
```

**预期效果**: 从 1-5 秒降低到 100-500ms

#### 1.2 预加载跟踪器数据库

**问题**: 每次检查都要等待数据库加载
**解决**: 页面初始化时立即加载，而不是延迟加载

```javascript
// 在页面加载时立即执行
document.addEventListener('DOMContentLoaded', () => {
    loadTrackersDatabase(); // 提前加载，不等待日志显示
});
```

**预期效果**: 消除数据库加载等待时间

---

### 方案二：缓存优化 ⭐⭐⭐⭐

#### 2.1 增强跟踪器检查缓存

**问题**: 相同的域名被重复检查
**解决**: 添加内存缓存，避免重复检查

```javascript
// 添加缓存
const trackerCache = new Map();
const trackerCacheTimestamp = new Map();
const TRACKER_CACHE_EXPIRY = 24 * 60 * 60 * 1000; // 24 小时

async function isDomainInTrackerDatabase(domain) {
    // 检查缓存
    const cached = trackerCache.get(domain);
    const timestamp = trackerCacheTimestamp.get(domain);
    
    if (cached && timestamp && (Date.now() - timestamp) < TRACKER_CACHE_EXPIRY) {
        return cached;
    }
    
    // 执行实际检查...
    const result = // ... 检查逻辑
    
    // 缓存结果
    trackerCache.set(domain, result);
    trackerCacheTimestamp.set(domain, Date.now());
    
    return result;
}
```

**预期效果**: 重复域名检查从 100ms 降低到 <1ms

#### 2.2 IP 地理位置缓存优化

**问题**: 相同 IP 被重复查询
**解决**: 已有 LRU 缓存，确保缓存命中率高

```javascript
// 确保缓存大小足够（当前为 1000，建议保持）
const GEOLOCATION_CACHE_MAX_SIZE = 1000;
```

---

### 方案三：延迟渲染优化 ⭐⭐⭐

#### 3.1 先渲染后更新

**问题**: 等待所有数据获取完成才渲染表格
**解决**: 先渲染基本内容，再异步更新增强信息

```javascript
async function updateLogsTable(logs) {
    // 第一步：立即渲染基本表格（不等待跟踪器检查）
    renderBasicTable(logs);
    
    // 第二步：异步获取跟踪器信息并更新
    const trackerChecks = logs.map(log => isDomainInTrackerDatabase(log.domain));
    Promise.all(trackerChecks).then(results => {
        updateTrackerIcons(results); // 只更新图标部分
    });
    
    // 第三步：异步获取 IP 地理位置
    logs.forEach(log => {
        getIpGeolocation(log.clientIP).then(location => {
            updateLocationElement(log.clientIP, location);
        });
    });
}
```

**预期效果**: 用户感知加载时间从 10 秒降低到 500ms 以内

#### 3.2 虚拟滚动（针对大量数据）

**问题**: 如果用户选择每页 100 条，DOM 节点过多
**解决**: 只渲染可见区域的日志

```javascript
// 使用虚拟滚动库或自定义实现
// 只渲染可视区域的 20-30 条，滚动时动态加载
```

**预期效果**: 渲染时间从 100ms 降低到 20ms

---

### 方案四：后端优化 ⭐⭐⭐⭐

#### 4.1 后端批量检查跟踪器

**问题**: 前端检查每条日志的跟踪器状态
**解决**: 后端在返回日志时直接包含跟踪器信息

```go
// 后端代码修改
type QueryLog struct {
    // ... 现有字段
    IsTracker bool   `json:"isTracker"`
    TrackerName string `json:"trackerName,omitempty"`
}

// 在返回日志前批量检查
func (s *Server) enrichLogsWithTrackerInfo(logs []QueryLog) {
    for i := range logs {
        logs[i].IsTracker, logs[i].TrackerName = s.checkTracker(logs[i].Domain)
    }
}
```

**预期效果**: 完全消除前端跟踪器检查时间

#### 4.2 后端缓存优化

**问题**: 后端查询数据库慢
**解决**: 增加 Redis 或内存缓存

```go
// 使用内存缓存查询结果
var queryCache = lru.New(100)
```

**预期效果**: 后端查询时间从 300ms 降低到 50ms

---

### 方案五：数据库索引优化 ⭐⭐⭐

#### 5.1 添加数据库索引

**问题**: 日志查询慢
**解决**: 为常用查询字段添加索引

```sql
-- 为时间戳添加索引（加速时间范围查询）
CREATE INDEX idx_timestamp ON query_logs(timestamp DESC);

-- 为域名添加索引（加速域名搜索）
CREATE INDEX idx_domain ON query_logs(domain);

-- 为客户端 IP 添加索引
CREATE INDEX idx_client_ip ON query_logs(client_ip);

-- 组合索引（加速组合查询）
CREATE INDEX idx_timestamp_result ON query_logs(timestamp DESC, result);
```

**预期效果**: 后端查询时间从 500ms 降低到 50ms

---

## 实施优先级

### 第一阶段（立即实施，效果最明显）
1. ✅ **方案 1.1**: 并行处理跟踪器检查
2. ✅ **方案 2.1**: 添加跟踪器检查缓存
3. ✅ **方案 1.2**: 预加载跟踪器数据库

**预期效果**: 10 秒 → 2-3 秒

### 第二阶段（本周内实施）
4. ✅ **方案 3.1**: 先渲染后更新
5. ✅ **方案 4.1**: 后端批量检查跟踪器

**预期效果**: 2-3 秒 → 1 秒以内

### 第三阶段（长期优化）
6. ✅ **方案 5.1**: 数据库索引优化
7. ✅ **方案 4.2**: 后端缓存
8. ✅ **方案 3.2**: 虚拟滚动

**预期效果**: 1 秒 → 500ms 以内

---

## 具体代码修改

### 修改 1: `logs.js` - 并行处理跟踪器检查

```javascript
// 在 updateLogsTable() 函数中，替换第 1155-1353 行

async function updateLogsTable(logs) {
    const tableBody = document.getElementById('logs-table-body');
    if (!tableBody) return;
    
    // 清空表格
    tableBody.innerHTML = '';
    
    if (logs.length === 0) {
        // 显示空状态
        tableBody.innerHTML = `
            <tr>
                <td colspan="5" class="py-8 text-center text-gray-500 border-b border-gray-100">
                    <i class="fa fa-file-text-o text-4xl mb-2 text-gray-300"></i>
                    <div>暂无查询日志</div>
                </td>
            </tr>
        `;
        return;
    }
    
    // 检测是否为移动设备
    const isMobile = window.innerWidth <= 768;
    
    // 【优化】并行处理所有跟踪器检查
    const trackerChecks = logs.map(log => isDomainInTrackerDatabase(log.domain));
    const trackerResults = await Promise.all(trackerChecks);
    
    // 预创建文档片段，减少 DOM 操作
    const fragment = document.createDocumentFragment();
    
    // 填充表格
    for (let i = 0; i < logs.length; i++) {
        const log = logs[i];
        const trackerInfo = trackerResults[i];
        const isTracker = trackerInfo !== null;
        
        const row = document.createElement('tr');
        row.className = `border-b border-gray-100 hover:bg-gray-50 transition-colors ${
            log.result === 'blocked' ? 'bg-red-50' : ''
        }`;
        
        // ... 渲染逻辑（保持不变，但移除 await）
        
        fragment.appendChild(row);
    }
    
    // 一次性添加到 DOM
    tableBody.appendChild(fragment);
    
    // 【优化】异步更新 IP 地理位置（不阻塞渲染）
    logs.forEach(log => {
        if (!isPrivateIP(log.clientIP)) {
            getIpGeolocation(log.clientIP).then(location => {
                const locationEl = document.querySelector(`.location-${log.clientIP.replace(/[.:]/g, '-')}`);
                if (locationEl) {
                    locationEl.textContent = location;
                }
            });
        }
    });
}
```

### 修改 2: `logs.js` - 添加跟踪器缓存

```javascript
// 在全局变量部分添加
const trackerCache = new Map();
const trackerCacheTimestamp = new Map();
const TRACKER_CACHE_EXPIRY = 24 * 60 * 60 * 1000; // 24 小时

// 修改 isDomainInTrackerDatabase 函数
async function isDomainInTrackerDatabase(domain) {
    // 检查缓存
    const cached = trackerCache.get(domain);
    const timestamp = trackerCacheTimestamp.get(domain);
    
    if (cached !== undefined && timestamp && (Date.now() - timestamp) < TRACKER_CACHE_EXPIRY) {
        return cached;
    }
    
    // 确保数据库已加载
    if (!trackersDatabase || !trackersLoaded) {
        await loadTrackersDatabase();
    }
    
    if (!trackersDatabase || !trackersDatabase.trackers) {
        trackerCache.set(domain, null);
        trackerCacheTimestamp.set(domain, Date.now());
        return null;
    }
    
    // 检查逻辑（保持不变）
    let result = null;
    
    if (trackersDatabase.trackers.hasOwnProperty(domain)) {
        result = trackersDatabase.trackers[domain];
    } else {
        for (const trackerKey in trackersDatabase.trackers) {
            const tracker = trackersDatabase.trackers[trackerKey];
            if (tracker && tracker.url) {
                try {
                    const trackerUrl = new URL(tracker.url);
                    if (trackerUrl.hostname === domain) {
                        result = tracker;
                        break;
                    }
                } catch (e) {
                    // 忽略无效 URL
                }
            }
        }
    }
    
    // 缓存结果
    trackerCache.set(domain, result);
    trackerCacheTimestamp.set(domain, Date.now());
    
    // 限制缓存大小（LRU 简单实现）
    if (trackerCache.size > 1000) {
        const oldestKey = trackerCache.keys().next().value;
        trackerCache.delete(oldestKey);
        trackerCacheTimestamp.delete(oldestKey);
    }
    
    return result;
}
```

### 修改 3: `index.html` - 预加载跟踪器数据库

```html
<!-- 在页面底部，logs.js 加载后立即执行 -->
<script>
    // 页面加载时立即预加载跟踪器数据库
    document.addEventListener('DOMContentLoaded', function() {
        // 异步加载，不阻塞页面
        if (typeof loadTrackersDatabase === 'function') {
            loadTrackersDatabase();
        }
    });
</script>
```

---

## 性能监控

### 添加性能日志

```javascript
// 在 loadLogs() 函数中添加性能监控
async function loadLogs() {
    const startTime = performance.now();
    console.log('🚀 开始加载日志...');
    
    // ... 加载逻辑
    
    const endTime = performance.now();
    const duration = endTime - startTime;
    console.log(`✅ 日志加载完成，耗时：${duration.toFixed(2)}ms`);
    
    // 分解各阶段耗时
    console.log('📊 性能分析:', {
        API 请求：apiTime,
        跟踪器检查：trackerTime,
        DOM 渲染：renderTime,
        IP 查询：ipTime
    });
}
```

---

## 预期最终效果

| 优化阶段 | 加载时间 | 改善幅度 |
|---------|---------|---------|
| 优化前 | 10 秒 | - |
| 第一阶段 | 2-3 秒 | 70-80% |
| 第二阶段 | 1 秒以内 | 90% |
| 第三阶段 | 500ms 以内 | 95% |

---

## 风险与注意事项

1. **内存使用**: 缓存会增加内存占用，建议限制缓存大小
2. **缓存一致性**: 跟踪器数据库更新后需要清理缓存
3. **浏览器兼容性**: `Promise.all()` 在老旧浏览器可能不支持
4. **并发限制**: 如果日志数量过多（>100），考虑分批处理

---

## 总结

**最优先实施的优化**:
1. ✅ 并行处理跟踪器检查（方案 1.1）
2. ✅ 添加跟踪器检查缓存（方案 2.1）
3. ✅ 先渲染后更新（方案 3.1）

这三项优化可以将加载时间从 10 秒降低到 1 秒以内，且实施成本低，风险小。