优化前 N+1查询问题

百度作为大型互联网公司,其代码优化涉及多个层面，以下是从不同角度提供的代码精简优化建议：

前端代码优化

HTML/CSS 精简

<!-- 优化前 -->
<div class="container" style="width: 100%; height: auto;">
  <div class="header">
    <div class="logo"></div>
  </div>
</div>
<!-- 优化后 -->
<div class="container">
  <div class="header">
    <div class="logo"></div>
  </div>
</div>

JavaScript 优化

// 优化前 - 重复选择DOM
document.querySelector('.btn1').addEventListener('click', fn1);
document.querySelector('.btn2').addEventListener('click', fn2);
// 优化后 - 事件委托
document.addEventListener('click', (e) => {
  if (e.target.matches('.btn1')) fn1();
  if (e.target.matches('.btn2')) fn2();
});
// 函数节流优化
const throttle = (func, limit) => {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

后端代码优化

数据库查询优化

    posts = Post.objects.filter(user=user)  # 每次循环都查询数据库
# 优化后 - 使用select_related/prefetch_related
users = User.objects.prefetch_related('posts').all()

缓存策略

# Redis缓存示例
import redis
from functools import wraps
cache = redis.Redis()
def cache_result(expire=300):
    def decorator(func):
        @wraps(func)
        def wrapper(*args, **kwargs):
            key = f"{func.__name__}:{args}:{kwargs}"
            result = cache.get(key)
            if result:
                return result
            result = func(*args, **kwargs)
            cache.setex(key, expire, result)
            return result
        return wrapper
    return decorator

构建和部署优化

Webpack配置优化

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    runtimeChunk: 'single'
  }
};

图片资源优化

<!-- WebP格式 + 懒加载 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="placeholder.jpg" data-src="image.jpg" loading="lazy">
</picture>

架构层面优化

微服务拆分

原始单体架构 → 微服务拆分：
- 用户服务
- 搜索服务
- 推荐服务服务

CDN加速策略

# Nginx配置示例
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
}

代码质量优化

删除无用代码

// 使用工具检测无用代码
// 1. Webpack Bundle Analyzer
// 2. ESLint no-unused-vars规则
// 3. Tree Shaking自动删除

代码压缩

# 使用压缩工具
uglifyjs input.js -c -m -o output.min.js
cssnano input.css -o output.min.css

实际优化建议

1. 首屏加载优化

   • 关键CSS内联
   • 非关键JS异步加载
   • 图片懒加载

2. 网络请求优化

   • HTTP/2多路复用
   • 请求合并
   • 合理的缓存策略

3. 代码分割

   // 动态导入
   const SearchComponent = React.lazy(() => import('./Search'));

4. 监控和持续优化

   • 使用Lighthouse进行性能评分
   • 监控真实用户性能数据
   • A/B测试优化效果

注意事项

1. 避免过度优化 - 权衡开发成本和收益
2. 保持可读性 - 精简不等于晦涩
3. 测试回归 - 每次优化后充分测试
4. 渐进式优化 - 从瓶颈最大的地方开始

需要根据具体业务场景选择优化策略,百度这样的大型项目，通常会采用更复杂的优化方案，包括：

• 服务端渲染(SSR)
• 边缘计算
• 智能预加载
• 个性化缓存策略等

标签： N+1查询 性能优化