一、背景与挑战

• 实时性强：包裹状态每分钟都可能更新，数据必须实时同步

• 国际化程度高：支持全球200+快递公司，页面需要适配多种语言和地区

• 数据可视化复杂：物流轨迹地图、时间轴、状态图表等可视化组件密集

• 移动端占比高：超过70%的用户通过手机查询包裹

• SEO友好要求：追踪结果页面需要被搜索引擎收录，便于用户分享

• 隐私安全要求：包裹信息敏感，数据传输和存储需要加密

二、性能瓶颈分析

2.1 数据层面瓶颈

┌─────────────────────────────────────────────────────────────┐
│                    数据包袱追踪页面                          │
├─────────────────────────────────────────────────────────────┤
│  问题1: 多源数据聚合耗时                                       │
│  ├── 快递公司API响应慢（平均600ms）                           │
│  ├── 海关清关信息需要额外调用（400ms）                         │
│  ├── 地理位置解析服务延迟（300ms）                            │
│  └── 未做数据合并，串行请求导致总耗时>1.5s                     │
│                                                             │
│  问题2: 历史轨迹数据冗余                                       │
│  ├── 单次查询返回最多100条轨迹记录                             │
│  ├── 每条记录包含20+字段，大部分无用                           │
│  └── JSON解析耗时80ms，内存占用过高                           │
│                                                             │
│  问题3: 实时推送机制低效                                       │
│  ├── WebSocket连接不稳定，频繁重连                             │
│  ├── 心跳包间隔过长（60s），状态更新不及时                      │
│  └── 消息队列积压，前端处理滞后                                 │
└─────────────────────────────────────────────────────────────┘

2.2 渲染层面瓶颈

┌─────────────────────────────────────────────────────────────┐
│                      渲染性能分析                            │
├─────────────────────────────────────────────────────────────┤
│  问题1: SVG地图渲染卡顿                                        │
│  ├── 世界地图SVG包含3000+路径元素                              │
│  ├── 每次状态更新重新渲染整个地图                               │
│  └── iOS Safari上帧率降至15fps                                │
│                                                             │
│  问题2: 时间轴组件DOM过重                                       │
│  ├── 100条轨迹记录生成400+DOM节点                              │
│  ├── CSS选择器复杂度O(n²)，样式计算耗时                         │
│  └── 滚动时触发频繁回流重绘                                     │
│                                                             │
│  问题3: 动画性能差                                             │
│  ├── 状态切换使用jQuery animate（CPU密集型）                   │
│  ├── 地图标记点动画未使用GPU加速                               │
│  └── 页面切换没有过渡优化                                       │
└─────────────────────────────────────────────────────────────┘

2.3 资源加载瓶颈

┌─────────────────────────────────────────────────────────────┐
│                      资源加载分析                            │
├─────────────────────────────────────────────────────────────┤
│  问题1: 语言包加载冗余                                         │
│  ├── 全量加载20种语言翻译文件（2MB）                           │
│  ├── 用户实际只需要1种语言                                    │
│  └── 语言切换时重新加载整个包                                   │
│                                                             │
│  问题2: 图标字体滥用                                           │
│  ├── 使用Font Awesome全量包（180KB）                           │
│  ├── 实际只用其中30个图标                                      │
│  └── 字体解码阻塞文本渲染                                       │
│                                                             │
│  问题3: 第三方SDK过多                                          │
│  ├── Google Analytics + Facebook Pixel + Hotjar               │
│  ├── 广告SDK阻塞主线程                                         │
│  └── 社交分享插件加载缓慢                                       │
└─────────────────────────────────────────────────────────────┘

三、优化方案实施

3.1 数据层优化

3.1.1 智能数据聚合与缓存

// 多源数据并行聚合服务
class TrackingDataAggregator {
  constructor() {
    this.cache = new RedisCache({
      ttl: 300, // 5分钟缓存
      maxKeys: 10000
    });
    this.requestQueue = new PQueue({ concurrency: 5 });
  }

  // 并行获取所有数据源
  async fetchTrackingData(trackingNumber, carriers) {
    const cacheKey = `tracking_${trackingNumber}_${carriers.join('_')}`;
    # 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
    // 检查缓存
    const cached = await this.cache.get(cacheKey);
    if (cached && !this.isStale(cached.timestamp)) {
      return this.mergeCachedData(cached);
    }

    // 并行请求多个数据源
    const fetchTasks = [
      this.fetchCarrierAPI(trackingNumber, carriers),
      this.fetchCustomsInfo(trackingNumber),
      this.fetchLocationData(trackingNumber),
      this.fetchEstimatedDelivery(trackingNumber, carriers)
    ];

    try {
      const results = await Promise.allSettled(fetchTasks);
      const mergedData = this.mergeResults(results);
      
      // 缓存聚合后的数据
      await this.cache.set(cacheKey, {
        ...mergedData,
        timestamp: Date.now()
      });

      return mergedData;
    } catch (error) {
      console.error('Data aggregation failed:', error);
      throw error;
    }
  }

  // 数据精简与格式化
  normalizeTrackingData(rawData) {
    const essentialFields = [
      'timestamp', 'status', 'location', 'description', 
      'carrier_code', 'country_code'
    ];

    return rawData.events.map(event => {
      const normalized = {};
      essentialFields.forEach(field => {
        normalized[field] = event[field];
      });
      
      // 地理位置简化处理
      normalized.locationSimple = this.simplifyLocation(event.location);
      
      // 状态标准化
      normalized.statusCode = this.normalizeStatusCode(event.status);
      # 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
      return normalized;
    }).slice(-50); // 只保留最近50条记录
  }

  // 地理位置简化（减少字符串长度）
  simplifyLocation(location) {
    if (!location) return '';
    
    // 移除冗余信息，保留核心位置
    return location
      .replace(/[-–—]\s*\d{4}.*$/, '') // 移除邮编
      .replace(/\b(Pte|Ltd|Inc|Corp)\b/gi, '') // 移除公司后缀
      .trim()
      .substring(0, 50); // 限制长度
  }
}

// 智能请求队列
class PQueue {
  constructor({ concurrency = 1 }) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  async add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push({ task, resolve, reject });
      this.process();
    });
  }

  async process() {
    if (this.running >= this.concurrency || this.queue.length === 0) {
      return;
    }

    this.running++;
    const { task, resolve, reject } = this.queue.shift();

    try {
      const result = await task();
      resolve(result);
    } catch (error) {
      reject(error);
    } finally {
      this.running--;
      this.process();
    }
  }
}

3.1.2 实时数据推送优化

// WebSocket连接管理器
class WebSocketManager {
  constructor(url) {
    this.url = url;
    this.ws = null;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 5;
    this.heartbeatInterval = 30000; // 30秒心跳
    this.messageQueue = [];
    this.isConnected = false;
  }

  connect(trackingNumbers) {
    return new Promise((resolve, reject) => {
      this.ws = new WebSocket(`${this.url}?trackings=${trackingNumbers.join(',')}`);
      # 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
      this.ws.onopen = () => {
        console.log('WebSocket connected');
        this.isConnected = true;
        this.reconnectAttempts = 0;
        this.startHeartbeat();
        this.flushMessageQueue();
        resolve();
      };

      this.ws.onmessage = (event) => {
        this.handleMessage(JSON.parse(event.data));
      };

      this.ws.onclose = () => {
        console.log('WebSocket disconnected');
        this.isConnected = false;
        this.stopHeartbeat();
        this.attemptReconnect();
      };

      this.ws.onerror = (error) => {
        console.error('WebSocket error:', error);
        reject(error);
      };

      // 连接超时
      setTimeout(() => {
        if (!this.isConnected) {
          reject(new Error('Connection timeout'));
        }
      }, 10000);
    });
  }

  // 优化的心跳机制
  startHeartbeat() {
    this.heartbeatTimer = setInterval(() => {
      if (this.isConnected) {
        this.send({ type: 'ping', timestamp: Date.now() });
        
        // 等待pong响应，超时则重连
        setTimeout(() => {
          if (this.pendingPong) {
            this.reconnect();
          }
        }, 5000);
      }
    }, this.heartbeatInterval);
  }

  // 增量数据更新
  handleMessage(message) {
    if (message.type === 'pong') {
      this.pendingPong = false;
      return;
    }

    if (message.type === 'tracking_update') {
      // 只更新变化的数据
      this.dispatchUpdate({
        trackingNumber: message.trackingNumber,
        updates: this.detectChanges(message.data)
      });
    }
  }

  // 检测数据变化，避免全量更新
  detectChanges(newData) {
    const changes = {};
    
    if (newData.latestEvent !== this.cachedData.latestEvent) {
      changes.latestEvent = newData.latestEvent;
    }
    
    if (newData.status !== this.cachedData.status) {
      changes.status = newData.status;
    }
    
    if (newData.estimatedDelivery !== this.cachedData.estimatedDelivery) {
      changes.estimatedDelivery = newData.estimatedDelivery;
    }

    return changes;
  }
}

3.2 渲染层优化

3.2.1 SVG地图性能优化

// 高性能物流地图组件
class LogisticsMap {
  constructor(container) {
    this.container = container;
    this.svg = null;
    this.markers = new Map();
    this.visibleRegion = null;
    this.lodLevel = 0; // Level of Detail
    
    this.init();
  }

  init() {
    this.createSimplifiedMap();
    this.setupLODSystem();
    this.bindEvents();
  }

  // 创建简化版地图
  createSimplifiedMap() {
    // 使用预处理的简化SVG
    const simplifiedPaths = this.getSimplifiedPaths();
    
    this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    this.svg.setAttribute('viewBox', '0 0 1000 500');
    this.svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
    
    // 使用DocumentFragment批量添加元素
    const fragment = document.createDocumentFragment();
    
    simplifiedPaths.forEach(pathData => {
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', pathData.d);
      path.setAttribute('fill', pathData.fill);
      path.setAttribute('stroke', pathData.stroke);
      path.setAttribute('stroke-width', '0.5');
      path.style.pointerEvents = 'none'; // 禁用不必要的事件
      fragment.appendChild(path);
    });

    this.svg.appendChild(fragment);
    this.container.appendChild(this.svg);
  }

  // 根据缩放级别调整细节
  setupLODSystem() {
    const levels = [
      { minZoom: 0, maxZoom: 2, pathDetail: 'coarse' },
      { minZoom: 2, maxZoom: 4, pathDetail: 'normal' },
      { minZoom: 4, maxZoom: 8, pathDetail: 'detailed' }
    ];

    this.lodSystem = {
      currentLevel: 0,
      getPathDetail: (zoom) => {
        return levels.find(l => zoom >= l.minZoom && zoom < l.maxZoom)?.pathDetail || 'coarse';
      }
    };
  }

  // 使用Canvas优化标记点渲染
  renderMarkers(markers) {
    // 清除旧标记
    this.clearMarkers();
    
    // 使用OffscreenCanvas进行离屏渲染
    if ('OffscreenCanvas' in window) {
      this.renderWithOffscreenCanvas(markers);
    } else {
      this.renderWithDOM(markers);
    }
  }

  renderWithOffscreenCanvas(markers) {
    const canvas = document.createElement('canvas');
    canvas.width = this.container.offsetWidth;
    canvas.height = this.container.offsetHeight;
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    canvas.style.left = '0';
    canvas.style.pointerEvents = 'none';
    
    const offscreen = canvas.transferControlToOffscreen();
    const ctx = offscreen.getContext('2d');
    
    // 批量绘制标记点
    markers.forEach(marker => {
      this.drawMarker(ctx, marker);
    });
    
    this.container.appendChild(canvas);
  }

  drawMarker(ctx, marker) {
    const { x, y, status, isAnimated } = marker;
    
    // 使用圆角矩形代替复杂图标
    ctx.beginPath();
    ctx.roundRect(x - 8, y - 8, 16, 16, 4);
    
    // 根据状态设置颜色
    const colors = {
      'in_transit': '#1890ff',
      'delivered': '#52c41a',
      'exception': '#ff4d4f',
      'pending': '#faad14'
    };
    
    ctx.fillStyle = colors[status] || '#999';
    ctx.fill();
    
    // 动画效果使用CSS animation
    if (isAnimated) {
      ctx.shadowColor = colors[status];
      ctx.shadowBlur = 10;
      ctx.fill();
    }
  }

  // GPU加速的状态切换动画
  animateStatusChange(element, oldStatus, newStatus) {
    const animations = {
      'pending_to_in_transit': 'slideRight',
      'in_transit_to_delivered': 'bounceIn',
      'any_to_exception': 'shake'
    };

    const animationType = animations[`${oldStatus}_to_${newStatus}`] || animations['any_to_exception'];
    
    // 使用CSS transform和will-change
    element.style.willChange = 'transform, opacity';
    element.classList.add(`animate-${animationType}`);
    
    element.addEventListener('animationend', () => {
      element.style.willChange = 'auto';
      element.classList.remove(`animate-${animationType}`);
    }, { once: true });
  }
}

3.2.2 虚拟时间轴组件

// React虚拟时间轴组件
import { useVirtualizer } from '@tanstack/react-virtual';

const TrackingTimeline = ({ events }) => {
  const parentRef = React.useRef(null);
  
  // 虚拟化配置
  const rowVirtualizer = useVirtualizer({
    count: events.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 80, // 预估每项高度
    overscan: 5 // 预渲染额外项目
  });

  // 分组显示优化
  const groupedEvents = useMemo(() => {
    return events.reduce((groups, event, index) => {
      const date = new Date(event.timestamp).toLocaleDateString();
      if (!groups[date]) {
        groups[date] = [];
      }
      groups[date].push({ ...event, index });
      return groups;
    }, {});
  }, [events]);

  return (
    <div 
      ref={parentRef} 
      className="timeline-container"
      style={{ height: '400px', overflow: 'auto' }}
    >
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative'
        }}
      >
        {rowVirtualizer.getVirtualItems().map(virtualItem => {
          const dateGroups = Object.entries(groupedEvents);
          let currentOffset = 0;
          
          for (const [date, dayEvents] of dateGroups) {
            const groupHeight = dayEvents.length * 80;
            
            if (virtualItem.index < currentOffset + dayEvents.length) {
              const eventIndex = virtualItem.index - currentOffset;
              const event = dayEvents[eventIndex];
              
              return (
                <div
                  key={virtualItem.key}
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '80px',
                    transform: `translateY(${virtualItem.start}px)`
                  }}
                >
                  <TimelineItem 
                    event={event} 
                    isFirst={eventIndex === 0}
                    date={date}
                  />
                </div>
              );
            }
            
            currentOffset += dayEvents.length;
          }
          
          return null;
        })}
      </div>
    </div>
  );
};

// 单个时间轴项组件
const TimelineItem = React.memo(({ event, isFirst, date }) => {
  return (
    <div className="timeline-item">
      {/* 日期分隔线 */}
      {isFirst && (
        <div className="date-separator">
          <span className="date-text">{date}</span>
        </div>
      )}
      
      {/* 时间轴节点 */}
      <div className="timeline-node">
        <div className={`node-dot status-${event.statusCode}`} />
        <div className="node-line" />
      </div>
      
      {/* 事件内容 */}
      <div className="timeline-content">
        <p className="event-location">{event.locationSimple}</p>
        <p className="event-description">{event.description}</p>
        <span className="event-time">
          {new Date(event.timestamp).toLocaleTimeString()}
        </span>
      </div>
    </div>
  );
});

3.3 资源加载优化

3.3.1 智能语言包加载

// 按需加载语言包
class I18nManager {
  constructor() {
    this.loadedLanguages = new Set();
    this.currentLanguage = this.detectLanguage();
    this.fallbackLanguage = 'en';
  }

  // 检测用户语言偏好
  detectLanguage() {
    // 1. URL参数
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('lang')) {
      return urlParams.get('lang');
    }
    
    // 2. localStorage
    const savedLang = localStorage.getItem('preferred_language');
    if (savedLang) {
      return savedLang;
    }
    
    // 3. 浏览器语言
    const browserLang = navigator.language.split('-')[0];
    return ['zh', 'en', 'es', 'fr', 'de', 'ja', 'ko'].includes(browserLang) 
      ? browserLang 
      : 'en';
  }

  // 动态加载语言包
  async loadLanguage(lang) {
    if (this.loadedLanguages.has(lang)) {
      return;
    }

    try {
      // 使用动态import加载语言包
      const languageModule = await import(
        /* webpackChunkName: "i18n-[request]" */
        `./locales/${lang}.json`
      );
      
      // 合并到全局翻译对象
      window.i18n = {
        ...window.i18n,
        ...languageModule.default
      };
      
      this.loadedLanguages.add(lang);
      this.currentLanguage = lang;
      localStorage.setItem('preferred_language', lang);
      
      // 触发语言切换事件
      window.dispatchEvent(new CustomEvent('languageChanged', { detail: lang }));
      
    } catch (error) {
      console.warn(`Failed to load language ${lang}, falling back to ${this.fallbackLanguage}`);
      if (lang !== this.fallbackLanguage) {
        await this.loadLanguage(this.fallbackLanguage);
      }
    }
  }

  // 按需加载特定模块的翻译
  async loadModuleTranslations(moduleName, lang = this.currentLanguage) {
    const cacheKey = `${moduleName}_${lang}`;
    
    if (this.moduleCache && this.moduleCache.has(cacheKey)) {
      return this.moduleCache.get(cacheKey);
    }

    try {
      const translations = await import(
        /* webpackChunkName: "i18n-module-[request]" */
        `./locales/modules/${moduleName}/${lang}.json`
      );
      
      if (!this.moduleCache) {
        this.moduleCache = new Map();
      }
      this.moduleCache.set(cacheKey, translations.default);
      
      return translations.default;
    } catch (error) {
      return {};
    }
  }

  // 翻译函数优化
  t(key, params = {}) {
    const keys = key.split('.');
    let value = window.i18n;
    
    for (const k of keys) {
      value = value?.[k];
      if (value === undefined) break;
    }
    
    if (typeof value !== 'string') {
      console.warn(`Translation missing for key: ${key}`);
      return key;
    }

    // 替换参数
    return value.replace(/{(\w+)}/g, (match, paramName) => {
      return params[paramName] ?? match;
    });
  }
}

// 使用示例
const i18n = new I18nManager();

// 页面初始化时加载当前语言
await i18n.loadLanguage(i18n.currentLanguage);

// 按需加载模块翻译
document.getElementById('customs-tab').addEventListener('click', async () => {
  const customsTranslations = await i18n.loadModuleTranslations('customs');
  // 更新界面翻译
});

3.3.2 图标系统优化

// SVG Sprite图标系统
class IconSystem {
  constructor() {
    this.iconCache = new Map();
    this.spriteLoaded = false;
  }

  // 加载SVG Sprite
  async loadSprite() {
    if (this.spriteLoaded) return;

    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', '/assets/icons/sprite.svg', true);
      xhr.onload = () => {
        const div = document.createElement('div');
        div.style.display = 'none';
        div.innerHTML = xhr.responseText;
        document.body.insertBefore(div, document.body.firstChild);
        this.spriteLoaded = true;
        resolve();
      };
      xhr.onerror = reject;
      xhr.send();
    });
  }

  // 获取图标
  getIcon(name, options = {}) {
    const { size = 24, color = 'currentColor', className = '' } = options;
    
    const iconId = `icon-${name}`;
    
    // 创建SVG元素
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', size);
    svg.setAttribute('height', size);
    svg.setAttribute('class', `icon ${className}`);
    svg.setAttribute('aria-hidden', 'true');
    
    const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#${iconId}`);
    
    svg.appendChild(use);
    
    // 内联样式用于颜色
    svg.style.color = color;
    
    return svg;
  }

  // 预加载常用图标
  preloadIcons(iconNames) {
    iconNames.forEach(name => {
      const img = new Image();
      img.src = `/assets/icons/${name}.svg`;
    });
  }
}

// 图标组件
const Icon = ({ name, size, color, className }) => {
  const iconSystem = useMemo(() => new IconSystem(), []);
  
  useEffect(() => {
    iconSystem.loadSprite();
  }, [iconSystem]);

  return iconSystem.getIcon(name, { size, color, className });
};

// 使用方式
// <Icon name="package" size={32} color="#1890ff" />
// <Icon name="truck" size={24} />
// <Icon name="check-circle" size={20} color="#52c41a" />

3.4 移动端专项优化

3.4.1 触摸优化

// 移动端触摸交互优化
class MobileTouchOptimizer {
  constructor() {
    this.touchStartY = 0;
    this.touchThreshold = 10;
  }

  // 优化滚动性能
  optimizeScrollContainer(container) {
    // 使用passive事件监听器
    container.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: true });
    container.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: true });
    
    // 启用硬件加速
    container.style.webkitOverflowScrolling = 'touch';
    container.style.overscrollBehavior = 'contain';
  }

  onTouchStart(e) {
    this.touchStartY = e.touches[0].clientY;
  }

  onTouchMove(e) {
    const touchY = e.touches[0].clientY;
    const diff = Math.abs(touchY - this.touchStartY);
    
    // 防止微小滑动触发不必要的重排
    if (diff < this.touchThreshold) {
      e.preventDefault();
    }
  }

  // 优化点击响应
  optimizeClickTargets() {
    // 扩大可点击区域
    document.querySelectorAll('.clickable').forEach(element => {
      const rect = element.getBoundingClientRect();
      if (rect.height < 44) { // Apple推荐最小点击区域
        element.style.minHeight = '44px';
        element.style.minWidth = '44px';
      }
    });

    // 使用FastClick消除300ms延迟
    if ('ontouchstart' in window) {
      this.applyFastClick();
    }
  }

  applyFastClick() {
    document.addEventListener('touchend', (e) => {
      const target = e.target.closest('[data-fast-click]');
      if (target) {
        e.preventDefault();
        const clickEvent = new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window
        });
        target.dispatchEvent(clickEvent);
      }
    }, { passive: false });
  }
}

四、性能监控与数据分析

4.1 业务指标监控

// 17网专属性能指标
class SeventeenTrackMetrics {
  static businessMetrics = {
    TRACKING_DATA_FETCH_TIME: 'tracking_data_fetch_time',
    MAP_RENDER_TIME: 'map_render_time',
    TIMELINE_LOAD_TIME: 'timeline_load_time',
    STATUS_UPDATE_LATENCY: 'status_update_latency',
    PAGE_NAVIGATION_TIME: 'page_navigation_time'
  };

  // 追踪数据获取时间
  static measureDataFetch(trackingNumber) {
    const startTime = performance.now();
    
    return {
      end: () => {
        const duration = performance.now() - startTime;
        this.report(this.businessMetrics.TRACKING_DATA_FETCH_TIME, duration, {
          tracking_number: trackingNumber.substring(0, 8)
        });
      }
    };
  }

  // 地图渲染性能
  static measureMapRender() {
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        if (entry.name.includes('map-render')) {
          this.report(this.businessMetrics.MAP_RENDER_TIME, entry.duration);
        }
      });
    });
    observer.observe({ entryTypes: ['measure'] });
  }

  // 状态更新延迟
  static measureStatusLatency(serverTimestamp, clientReceivedTime) {
    const latency = clientReceivedTime - serverTimestamp;
    this.report(this.businessMetrics.STATUS_UPDATE_LATENCY, latency);
  }

  // 上报指标
  static report(metricName, value, tags = {}) {
    const payload = {
      metric_name: metricName,
      metric_value: value,
      timestamp: Date.now(),
      page: window.location.pathname,
      tracking_count: window.trackingCount || 1,
      carrier_count: window.carrierCount || 1,
      device_type: this.getDeviceType(),
      connection_type: navigator.connection?.effectiveType || 'unknown',
      ...tags
    };

    // 使用Beacon API确保数据可靠发送
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/metrics/track', JSON.stringify(payload));
    }
  }

  static getDeviceType() {
    const ua = navigator.userAgent;
    if (/tablet|ipad|playbook|silk/i.test(ua)) return 'tablet';
    if (/mobile|iphone|ipod|blackberry|opera mini|iemobile/i.test(ua)) return 'mobile';
    return 'desktop';
  }
}

五、优化效果

六、经验总结

1. 实时性优化是核心：针对物流追踪场景，数据获取和推送的优化比UI优化更重要

2. 国际化要精细化：语言包、时区、数字格式等都要考虑，不能简单粗暴

3. 可视化性能关键：地图和时间轴是性能杀手，必须用Canvas、虚拟列表等技术优化

4. 移动端体验优先：70%的移动端用户要求极致的触摸体验和加载速度

5. 缓存策略要智能：根据物流查询特点，设计合理的TTL和失效机制

6. 监控要业务导向：除了技术指标，更要关注业务指标如查询成功率、状态更新及时性等