当大模型API响应延迟超过1秒时，前端可以采取以下优化策略来保证用户体验：

1. 视觉反馈策略

加载状态指示

graph TD
    A[用户提交请求] --> B[立即显示加载动画]
    B --> C{API响应时间}
    C -->|＜1秒| D[直接显示结果]
    C -->|1-3秒| E[保持加载状态]
    C -->|＞3秒| F[显示进度预估]

具体实现：

• 骨架屏(Skeleton Screen)：展示内容的大致轮廓
• 进度条：对于长时间任务显示进度百分比
• 旋转加载图标：简单的视觉提示

2. 渐进式响应策略

流式传输(Streaming)

// 示例：使用Server-Sent Events或WebSocket
const eventSource = new EventSource('/api/stream');
eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'partial') {
        // 逐步显示部分结果
        updateUI(data.content);
    } else if (data.type === 'complete') {
        // 最终完整结果
        completeResponse(data.content);
    }
};

打字机效果

• 逐字显示响应内容
• 给用户"正在生成"的真实感
• 减少等待的焦虑感

3. 预加载与缓存策略

预测性预加载

// 基于用户行为预测可能的需求
const preloadCache = new Map();

function predictivePreload(context) {
    // 分析上下文，预加载可能需要的响应
    const likelyQueries = analyzeContext(context);
    likelyQueries.forEach(query => {
        if (!preloadCache.has(query)) {
            fetchAPI(query).then(result => {
                preloadCache.set(query, result);
            });
        }
    });
}

结果缓存

• 相同查询直接返回缓存结果
• 设置合理的缓存过期时间
• 考虑上下文相似性的模糊匹配

4. 超时与降级策略

智能超时处理

const timeoutStrategies = {
    immediate: 1000,    // 1秒：显示加载状态
    warning: 3000,      // 3秒：显示预计等待时间
    critical: 10000,    // 10秒：提供取消选项
    fallback: 30000     // 30秒：降级方案
};

function handleTimeout(duration, requestId) {
    if (duration > timeoutStrategies.critical) {
        showCancelOption(requestId);
    }
    if (duration > timeoutStrategies.fallback) {
        activateFallback(requestId);
    }
}

降级方案

• 简化模型：切换到响应更快的轻量级模型
• 本地处理：使用规则引擎或本地AI模型
• 模板响应：提供预设的标准回答

5. 用户体验优化

预期管理

• 明确告知：“这可能需要几秒钟时间”
• 进度透明：“正在处理您的请求，已完成60%”
• 设置期望：“复杂问题需要更多思考时间”

交互保持

// 在等待期间保持界面可交互
function enableWaitingInteractions() {
    // 允许用户执行其他操作
    enableNavigation();
    enableContentEditing();
    enableCancelOption();
    
    // 后台继续处理主要请求
    continueMainRequestInBackground();
}

6. 技术架构优化

请求队列管理

class RequestQueue {
    constructor() {
        this.queue = [];
        this.processing = false;
    }
    
    async addRequest(request) {
        return new Promise((resolve) => {
            this.queue.push({ request, resolve });
            if (!this.processing) this.processQueue();
        });
    }
    
    async processQueue() {
        this.processing = true;
        while (this.queue.length > 0) {
            const { request, resolve } = this.queue.shift();
            const result = await this.executeRequest(request);
            resolve(result);
            // 添加间隔避免服务器过载
            await this.delay(100);
        }
        this.processing = false;
    }
}

连接复用与池化

• 保持HTTP/2连接复用
• 使用WebSocket长连接
• 实现连接池管理

7. 监控与自适应

性能监控

// 实时监控API性能
const performanceMonitor = {
    responseTimes: [],
    
    recordResponseTime(duration) {
        this.responseTimes.push({
            timestamp: Date.now(),
            duration: duration
        });
        
        // 保留最近100个记录
        if (this.responseTimes.length > 100) {
            this.responseTimes.shift();
        }
    },
    
    getAverageResponseTime() {
        return this.responseTimes.reduce((sum, record) => 
            sum + record.duration, 0) / this.responseTimes.length;
    }
};

自适应策略

• 根据历史响应时间动态调整超时阈值
• 高峰期自动启用降级方案
• 基于网络状况调整请求策略

8. 错误处理与重试

智能重试机制

async function smartRetry(request, maxRetries = 3) {
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
            const result = await fetchWithTimeout(request);
            return result;
        } catch (error) {
            if (attempt === maxRetries) throw error;
            
            // 指数退避重试
            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }
}

通过组合使用这些策略，前端可以在大模型API响应延迟的情况下，依然为用户提供流畅、透明的体验，有效减轻等待带来的负面感受。