JavaScript 性能优化与调试完全指南

// 性能预算检查脚本
const PERFORMANCE_BUDGET = {
  lcp: 2500,           // LCP < 2.5s
  cls: 0.1,            // CLS < 0.1
  totalBundleSize: 300, // 总 JS 体积 < 300KB (gzip)
  fcp: 1800,           // FCP < 1.8s
  tbt: 300,            // TBT < 300ms
};

async function checkPerformanceBudget() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    lcp: await getLCP(),
    cls: getCLS(),
    fcp: getFCP(),
    tbt: getTBT(),
    totalBundleSize: getBundleSize(),
  };

  const failures = Object.entries(metrics)
    .filter(([key, value]) => value > PERFORMANCE_BUDGET[key])
    .map(([key, value]) =>
      `${key}: ${value} (预算: ${PERFORMANCE_BUDGET[key]}) - 失败 ❌`
    );

  if (failures.length > 0) {
    console.error('性能预算检查失败:', failures);
  } else {
    console.log('✅ 所有性能指标在预算范围内');
  }
}

function getFCP() {
  const entry = performance.getEntriesByName('first-contentful-paint')[0];
  return entry ? entry.startTime : null;
}

function getTBT() {
  let tbt = 0;
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      tbt += entry.duration - 50;
    });
  });
  observer.observe({ type: 'longtask', buffered: true });
  return tbt;
}

function getBundleSize() {
  const scripts = performance.getEntriesByType('resource')
    .filter((r) => r.initiatorType === 'script');
  return scripts.reduce((sum, s) => sum + s.transferSize, 0) / 1024;
}

// ❌ 不良实践：交替读写导致多次重排
function badPractice() {
  for (let i = 0; i < 100; i++) {
    const item = document.querySelector(`.item-${i}`);
    item.style.width = `${i * 10}px`;        // 写
    const height = item.offsetHeight;         // 读（触发强制同步布局）
    item.style.height = `${height + 10}px`;   // 写（再次触发重排）
  }
}

// ✅ 良好实践：先读后写（批处理）
function goodPractice() {
  const items = document.querySelectorAll('[class^="item-"]');
  const heights = [];

  // 第一阶段：批量读取
  for (const item of items) {
    heights.push(item.offsetHeight);
  }

  // 第二阶段：批量写入
  items.forEach((item, i) => {
    item.style.width = `${i * 10}px`;
    item.style.height = `${heights[i] + 10}px`;
  });
}

// ✅ 使用 requestAnimationFrame 统一写入
function batchWriteWithRAF() {
  requestAnimationFrame(() => {
    items.forEach((item, i) => {
      item.style.transform = `translateX(${i * 50}px)`;
    });
  });
}

// ✅ 使用 transform + opacity 触发合成层
function animateWithCompositor(element) {
  element.style.transition = 'transform 0.3s ease, opacity 0.3s ease';

  // transform 和 opacity 的变化在合成器线程处理
  element.addEventListener('click', () => {
    element.style.transform = 'scale(1.2)';     // 合成层
    element.style.opacity = '0.5';              // 合成层
  });

  // ❌ 避免使用 layout-triggering 属性做动画
  // element.style.width = '200px';              // 触发布局
  // element.style.height = '200px';             // 触发布局
  // element.style.marginLeft = '50px';          // 触发布局
}

// 提升为合成层
function promoteToLayer(element) {
  element.style.willChange = 'transform';
  // 或者使用 3D 变换强制提升
  element.style.transform = 'translateZ(0)';
}

// GPU 加速动画示例
function smoothAnimation() {
  const el = document.getElementById('animated');

  // 使用 transform 实现平滑动画
  let position = 0;
  function animate() {
    position = (position + 1) % 360;
    el.style.transform = `rotate(${position}deg) translateX(200px)`;
    requestAnimationFrame(animate);
  }
  animate();
}

// 布局抖动检测工具
class LayoutThrashDetector {
  constructor() {
    this.reads = [];
    this.writes = [];
    this.threshold = 10; // 每秒超过 10 次读写触发告警
  }

  trackRead(property) {
    this.reads.push({ property, time: performance.now() });
    this.check();
  }

  trackWrite(property) {
    this.writes.push({ property, time: performance.now() });
    this.check();
  }

  check() {
    const now = performance.now();
    const recentReads = this.reads.filter((r) => now - r.time < 1000);
    const recentWrites = this.writes.filter((w) => now - w.time < 1000);

    if (recentReads.length + recentWrites.length > this.threshold) {
      console.warn(`布局抖动检测：1s 内 ${recentReads.length} 次读 + ${recentWrites.length} 次写`);
    }
  }
}

// 使用 fastdom 库实现 DOM 读写批处理
// import fastdom from 'fastdom';

function processItems(items) {
  // 批量读
  fastdom.measure(() => {
    const rects = items.map((item) => item.getBoundingClientRect());

    // 批量写
    fastdom.mutate(() => {
      items.forEach((item, i) => {
        item.style.width = `${rects[i].width * 1.5}px`;
        item.style.height = `${rects[i].height * 1.5}px`;
      });
    });
  });
}

/**
 * 简易虚拟滚动实现
 * 只渲染视口内的 DOM 节点，大幅减少 DOM 数量
 */
class VirtualScroller {
  constructor(container, { itemHeight, totalItems, renderItem }) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.totalItems = totalItems;
    this.renderItem = renderItem;
    this.viewportHeight = container.clientHeight;
    this.visibleCount = Math.ceil(this.viewportHeight / itemHeight) + 2;
    this.scrollTop = 0;
    this.startIndex = 0;

    this.container.style.overflow = 'auto';
    this.container.style.position = 'relative';

    // 撑起滚动条
    this.spacer = document.createElement('div');
    this.spacer.style.height = `${totalItems * itemHeight}px`;
    this.container.appendChild(this.spacer);

    // 可见内容容器
    this.content = document.createElement('div');
    this.content.style.position = 'absolute';
    this.content.style.top = '0';
    this.content.style.left = '0';
    this.content.style.right = '0';
    this.container.appendChild(this.content);

    this.container.addEventListener('scroll', () => this.onScroll());
    this.render();
  }

  onScroll() {
    this.scrollTop = this.container.scrollTop;
    this.render();
  }

  render() {
    this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
    const endIndex = Math.min(
      this.startIndex + this.visibleCount,
      this.totalItems
    );

    // 设置偏移
    this.content.style.transform = `translateY(${this.startIndex * this.itemHeight}px)`;

    // 只渲染可见范围内的项
    this.content.innerHTML = '';
    for (let i = this.startIndex; i < endIndex; i++) {
      const el = this.renderItem(i);
      el.style.height = `${this.itemHeight}px`;
      this.content.appendChild(el);
    }
  }
}

// 使用示例
const scroller = new VirtualScroller(document.getElementById('list'), {
  itemHeight: 40,
  totalItems: 100000,
  renderItem: (index) => {
    const div = document.createElement('div');
    div.textContent = `Item #${index}`;
    div.style.padding = '8px 16px';
    return div;
  },
});

// requestAnimationFrame: 在下一帧绘制前执行（用于动画和 DOM 更新）
function animateWithRAF() {
  const start = performance.now();
  const duration = 2000; // 2秒动画

  function frame(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);

    // 缓动函数
    const eased = 1 - Math.pow(1 - progress, 3);

    updateElementPosition(eased);

    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }

  requestAnimationFrame(frame);
}

// requestIdleCallback: 在浏览器空闲时执行（用于非紧急任务）
function scheduleNonCriticalWork() {
  const tasks = [
    () => console.log('任务 1: 日志上报'),
    () => console.log('任务 2: 分析数据处理'),
    () => console.log('任务 3: 预渲染下一屏'),
  ];

  function processTasks(deadline) {
    while (tasks.length > 0 && deadline.timeRemaining() > 5) {
      const task = tasks.shift();
      task();
    }

    if (tasks.length > 0) {
      // 还有剩余任务，下一次空闲时继续
      requestIdleCallback(processTasks, { timeout: 2000 });
    }
  }

  requestIdleCallback(processTasks, { timeout: 2000 });
}

// 组合使用：保证高优先级的同时利用空闲时间
function hybridApproach() {
  const queue = [];
  let scheduled = false;

  function enqueue(task, priority = 'low') {
    queue.push({ task, priority });
    if (!scheduled) {
      scheduled = true;
      requestAnimationFrame(() => {
        // 先处理高优先级任务
        const urgentTasks = queue.filter((t) => t.priority === 'high');
        urgentTasks.forEach((t) => t.task());

        // 低优先级任务留给空闲时间
        const idleTasks = queue.filter((t) => t.priority !== 'high');
        if (idleTasks.length > 0) {
          requestIdleCallback((deadline) => {
            while (idleTasks.length > 0 && deadline.timeRemaining() > 5) {
              idleTasks.shift().task();
            }
          });
        }

        queue.length = 0;
        scheduled = false;
      });
    }
  }

  return { enqueue };
}

// 将大任务分解为小任务
function processLargeArray(array) {
  const chunkSize = 1000;
  let index = 0;

  function processChunk() {
    const end = Math.min(index + chunkSize, array.length);
    for (let i = index; i < end; i++) {
      heavyComputation(array[i]);
    }
    index = end;

    if (index < array.length) {
      // 让出主线程，下一帧继续
      requestAnimationFrame(processChunk);
    }
  }

  processChunk();
}

// 使用 setTimeout 实现时间切片
function timeSlice(tasks, callback) {
  let index = 0;
  const startTime = performance.now();

  function doWork() {
    while (index < tasks.length) {
      // 每 10ms 检查一次是否超时
      if (performance.now() - startTime >= 10) {
        // 时间片耗尽，让出主线程
        setTimeout(doWork, 0);
        return;
      }
      tasks[index]();
      index++;
    }
    callback?.();
  }

  // 使用 MessageChannel 实现更精确的调度
  const channel = new MessageChannel();
  channel.port1.onmessage = doWork;
  channel.port2.postMessage(null);
}

// 使用 Scheduler API (Chrome 87+)
async function scheduledTasks() {
  const tasks = generateTasks();

  for (const task of tasks) {
    // 将每个任务交还给调度器
    await new Promise((resolve) => {
      navigator.scheduling?.isInputPending()
        ? setTimeout(resolve, 0)
        : scheduler?.yield().then(resolve) ?? setTimeout(resolve, 0);
    });
    task();
  }
}

// worker.js - Worker 线程
self.onmessage = async (event) => {
  const { type, data } = event.data;

  switch (type) {
    case 'process':
      const result = await processData(data);
      self.postMessage({ type: 'result', result });
      break;

    case 'sort':
      const sorted = data.sort((a, b) => a - b);
      // Transferable objects 避免内存拷贝
      self.postMessage(
        { type: 'result', result: sorted },
        [sorted.buffer] // 转移 ArrayBuffer 所有权
      );
      break;
  }
};

async function processData(data) {
  const chunkSize = Math.ceil(data.length / 4);
  let results = [];

  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    results.push(heavyComputation(chunk));

    // 报告进度
    self.postMessage({
      type: 'progress',
      percent: Math.round((i / data.length) * 100),
    });

    // 允许处理消息
    await new Promise((r) => setTimeout(r, 0));
  }

  return results;
}

class ObjectPool {
  constructor(factory, reset, initialSize = 10) {
    this.factory = factory;
    this.reset = reset;
    this.pool = [];
    this.active = new Set();

    // 预热池
    for (let i = 0; i < initialSize; i++) {
      this.pool.push(factory());
    }
  }

  acquire() {
    let obj = this.pool.pop();
    if (!obj) {
      obj = this.factory();
    }
    this.active.add(obj);
    return obj;
  }

  release(obj) {
    if (this.active.has(obj)) {
      this.reset(obj);
      this.pool.push(obj);
      this.active.delete(obj);
    }
  }

  // 池中可用对象数量
  get available() {
    return this.pool.length;
  }

  // 池中活跃对象数量
  get inUse() {
    return this.active.size;
  }
}

// 使用示例：粒子系统
class Particle {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.life = 0;
    this.color = '#000';
  }

  reset() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.life = 0;
    this.color = '#000';
  }
}

const particlePool = new ObjectPool(
  () => new Particle(),
  (p) => p.reset(),
  100
);

// 创建粒子
function createParticle(x, y) {
  const p = particlePool.acquire();
  p.x = x;
  p.y = y;
  p.vx = (Math.random() - 0.5) * 10;
  p.vy = (Math.random() - 0.5) * 10;
  p.life = 1;
  return p;
}

// 回收粒子
function updateParticles(particles) {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.life -= 0.02;

    if (p.life <= 0) {
      particlePool.release(p);
      particles.splice(i, 1);
    }
  }
}

/**
 * 防抖：在事件触发后等待一段时间再执行
 * 适用于搜索输入、窗口调整等高频操作
 */
function debounce(fn, delay = 300) {
  let timer = null;

  return function (...args) {
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(context, args), delay);
  };
}

// 带 leading 选项：首次触发立即执行
function debounceWithLeading(fn, delay = 300, leading = false) {
  let timer = null;
  let hasExecuted = false;

  return function (...args) {
    const context = this;
    const callNow = leading && !hasExecuted;

    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      hasExecuted = false;
      if (!leading) fn.apply(context, args);
    }, delay);

    if (callNow) {
      hasExecuted = true;
      fn.apply(context, args);
    }
  };
}

/**
 * 节流：在固定频率内只执行一次
 * 适用于滚动、拖拽、动画等高频触发场景
 */
function throttle(fn, interval = 100) {
  let lastTime = 0;
  let timer = null;

  return function (...args) {
    const context = this;
    const now = Date.now();
    const remaining = interval - (now - lastTime);

    if (remaining <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      lastTime = now;
      fn.apply(context, args);
    } else if (!timer) {
      timer = setTimeout(() => {
        lastTime = Date.now();
        timer = null;
        fn.apply(context, args);
      }, remaining);
    }
  };
}

// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener(
  'input',
  debounce(async (e) => {
    const results = await fetchSearchResults(e.target.value);
    renderResults(results);
  }, 400)
);

window.addEventListener(
  'scroll',
  throttle(() => {
    checkInfiniteScroll();
  }, 200)
);

// 1. 闭包导致的内存泄漏
function createClosureLeak() {
  const largeData = new Array(1000000).fill('leak');

  return function () {
    // 该闭包持有 largeData 的引用
    console.log(largeData.length);
  };
}

const leaked = createClosureLeak(); // largeData 无法被 GC

// ✅ 修复：只引用需要的部分
function createClosureFixed() {
  const largeData = new Array(1000000).fill('leak');
  const length = largeData.length; // 只保存需要的值

  return function () {
    console.log(length);
  };
}

// 2. 定时器未清除
function startTimerLeak() {
  // ❌ 定时器回调持有外部作用域引用
  let count = 0;
  setInterval(() => {
    count++;
    console.log(count);
    if (count >= 10) {
      // ⚠️ 定时器依然在运行
    }
  }, 1000);
}

// ✅ 修复：保存定时器引用并在适当时机清除
function startTimerFixed() {
  let count = 0;
  const timer = setInterval(() => {
    count++;
    console.log(count);
    if (count >= 10) {
      clearInterval(timer);
    }
  }, 1000);
  return timer; // 让调用方可以手动清除
}

// 3. 事件监听未移除
class EventEmitterLeak {
  constructor(element) {
    this.element = element;
    this.handler = () => this.handleClick();
    element.addEventListener('click', this.handler);
    // ❌ 从未移除监听器
  }
  handleClick() { /* ... */ }
}

// ✅ 修复：提供销毁方法
class EventEmitterFixed {
  constructor(element) {
    this.element = element;
    this.handler = () => this.handleClick();
    element.addEventListener('click', this.handler);
  }

  handleClick() { /* ... */ }

  destroy() {
    this.element.removeEventListener('click', this.handler);
    this.element = null;
    this.handler = null;
  }
}

// 4. 全局变量泄漏
function globalLeak() {
  // ❌ 隐式全局变量
  leakedData = new Array(1000000);
  // 或者
  this.leakedData = new Array(1000000);
}

// ✅ 修复：始终使用严格模式和显式声明
'use strict';
function noGlobalLeak() {
  const localData = new Array(1000000);
  // 使用完毕 = null 帮助 GC
  return () => {
    const result = localData.length;
    // 不需要时
    process.nextTick(() => {
      // localData 可以 GC
    });
  };
}

// WeakMap: 键为弱引用，不会阻止 GC
const cache = new WeakMap();

class ExpensiveObject {
  constructor(data) {
    this.data = data;
  }

  // 使用 WeakMap 缓存计算结果
  static getProcessed(instance) {
    if (cache.has(instance)) {
      return cache.get(instance);
    }
    const result = instance.process();
    cache.set(instance, result);
    return result;
  }

  process() {
    // 耗时的数据处理
    return this.data.map((x) => x * 2);
  }
}

// 使用完毕后，obj 可被 GC，对应的缓存也会自动清理
let obj = new ExpensiveObject([1, 2, 3, 4, 5]);
const result = ExpensiveObject.getProcessed(obj);
obj = null; // WeakMap 中的引用不会阻止 GC

// WeakSet: 存储唯一对象的集合，不会阻止 GC
const activeConnections = new WeakSet();

class Connection {
  constructor(url) {
    this.url = url;
    activeConnections.add(this);
    console.log(`连接建立: ${url}，活跃连接数: ${activeConnections}`);
  }

  close() {
    activeConnections.delete(this);
    console.log(`连接关闭: ${this.url}`);
  }
}

// WeakSet 不会导致内存泄漏
function createTempConnections() {
  const conn = new Connection('https://api.example.com');
  // conn 使用完毕后，即使忘记 close，
  // conn 被回收时 WeakSet 自动清理
  return conn;
}

// WeakRef（ES2021）: 更直接的弱引用
function useWeakRef() {
  let target = { data: 'important' };
  const ref = new WeakRef(target);

  // 获取值（可能已被 GC）
  function getData() {
    const obj = ref.deref();
    if (obj) {
      console.log('对象仍在:', obj.data);
    } else {
      console.log('对象已被 GC');
    }
  }

  target = null; // 允许 GC
  // 此处调用 getData() 可能得到 null
}

const arr = new Array(1000000).fill(0).map((_, i) => i);

// 测试不同循环方式的性能
function benchLoops() {
  let sum = 0;

  // 1. 传统 for 循环（最快）
  console.time('for');
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  console.timeEnd('for');

  // 2. 缓存 length（微优化，对现代 JS 引擎几乎无影响）
  console.time('for-cached');
  for (let i = 0, len = arr.length; i < len; i++) {
    sum += arr[i];
  }
  console.timeEnd('for-cached');

  // 3. 逆向循环
  console.time('for-reverse');
  for (let i = arr.length - 1; i >= 0; i--) {
    sum += arr[i];
  }
  console.timeEnd('for-reverse');

  // 4. forEach
  console.time('forEach');
  arr.forEach((x) => { sum += x; });
  console.timeEnd('forEach');

  // 5. for...of
  console.time('for-of');
  for (const x of arr) {
    sum += x;
  }
  console.timeEnd('for-of');

  // 6. reduce
  console.time('reduce');
  sum = arr.reduce((acc, x) => acc + x, 0);
  console.timeEnd('reduce');

  // 7. while
  console.time('while');
  let i = 0;
  while (i < arr.length) {
    sum += arr[i];
    i++;
  }
  console.timeEnd('while');

  return sum;
}

// 结论：for 循环最快，forEach 可读性最好但稍慢
// 对于 10^6 级别数据：for ≈ 2ms, forEach ≈ 6ms, for-of ≈ 8ms

// 1. if-else chains
function getStatusText(status) {
  if (status === 0) return '待处理';
  else if (status === 1) return '处理中';
  else if (status === 2) return '已完成';
  else if (status === 3) return '已取消';
  else if (status === 4) return '已退款';
  else return '未知';
}

// 2. switch
function getStatusTextSwitch(status) {
  switch (status) {
    case 0: return '待处理';
    case 1: return '处理中';
    case 2: return '已完成';
    case 3: return '已取消';
    case 4: return '已退款';
    default: return '未知';
  }
}

// 3. Map 查找（最快，O(1) 时间复杂度）
const STATUS_MAP = new Map([
  [0, '待处理'],
  [1, '处理中'],
  [2, '已完成'],
  [3, '已取消'],
  [4, '已退款'],
]);

function getStatusTextMap(status) {
  return STATUS_MAP.get(status) ?? '未知';
}

// 4. 对象查找（与 Map 类似，但 key 只能是 string/symbol）
const STATUS_OBJ = {
  0: '待处理',
  1: '处理中',
  2: '已完成',
  3: '已取消',
  4: '已退款',
};

function getStatusTextObj(status) {
  return STATUS_OBJ[status] ?? '未知';
}

// 5. 数组查找（适用于连续整数范围）
const STATUS_ARR = ['待处理', '处理中', '已完成', '已取消', '已退款'];
function getStatusTextArr(status) {
  return STATUS_ARR[status] ?? '未知';
}

// 性能对比结论：
// 简单条件（< 5 分支）：if-else ≈ switch
// 多条件（> 5 分支）：Map 查找 > 对象查找 > switch > if-else
// 连续整数范围：数组查找最快

const items = Array.from({ length: 100000 }, (_, i) => `item-${i}`);

// 1. 使用 + 运算符（大量拼接时性能最差）
function concatWithPlus() {
  let result = '';
  for (const item of items) {
    result += item + ',';
  }
  return result;
}

// 2. 使用 += 运算符
function concatWithPlusEq() {
  let result = '';
  for (const item of items) {
    result += item;
    result += ',';
  }
  return result;
}

// 3. 使用 Array.join()（最快）
function concatWithJoin() {
  return items.join(',');
}

// 4. 使用 Array.push() + join()
function concatWithPushJoin() {
  const parts = [];
  for (const item of items) {
    parts.push(item);
  }
  return parts.join(',');
}

// 5. 使用模板字符串（可读性好，性能适中）
function concatWithTemplate() {
  let result = '';
  for (const item of items) {
    result = `${result}${item},`;
  }
  return result;
}

// 6. 使用 String.prototype.concat()
function concatWithNativeConcat() {
  let result = '';
  for (const item of items) {
    result = result.concat(item, ',');
  }
  return result;
}

// 性能结论：join > push+join > += > + > concat > 模板字符串
// 对于已知所有元素的情况，join 是最佳选择

const users = Array.from({ length: 1000000 }, (_, i) => ({
  id: i,
  name: `User ${i}`,
  age: Math.floor(Math.random() * 50) + 18,
  active: Math.random() > 0.3,
}));

// ❌ 链式调用（3 次遍历）
function chainedApproach() {
  return users
    .filter((u) => u.active)
    .map((u) => ({ ...u, ageGroup: u.age >= 30 ? 'adult' : 'young' }))
    .reduce((acc, u) => acc + u.age, 0);
}

// ✅ 单次循环（1 次遍历）
function singleLoop() {
  let totalAge = 0;
  for (let i = 0; i < users.length; i++) {
    const u = users[i];
    if (u.active) {
      const ageGroup = u.age >= 30 ? 'adult' : 'young';
      totalAge += u.age;
      // 如果还需要保留中间结果
      // results.push({ ...u, ageGroup });
    }
  }
  return totalAge;
}

// ✅ 使用 transducers（函数式 + 单次遍历）
function transducerApproach() {
  // 手写 reduce 实现 filter + map 组合
  return users.reduce((acc, u) => {
    if (u.active) {
      const ageGroup = u.age >= 30 ? 'adult' : 'young';
      acc.push({ ...u, ageGroup });
    }
    return acc;
  }, []);
}

// 当只需要最终结果时，优先使用单次循环
// 当需要链式操作的可读性时，如果数据量 < 10K，链式调用也可接受

// ❌ 不良实践：热路径中频繁创建对象
function renderItemsBad(items) {
  return items.map((item) => {
    // 每次调用都创建新对象
    const style = {
      width: `${item.width}px`,
      height: `${item.height}px`,
      backgroundColor: item.color,
      borderRadius: '4px',
    };
    return `<div style="${Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';')}">${item.label}</div>`;
  });
}

// ✅ 优化：提取常量对象
const BASE_STYLE = {
  borderRadius: '4px',
  boxSizing: 'border-box',
};

function renderItemsGood(items) {
  return items.map((item) => {
    // 复用基对象，只创建变化的部分
    const dynamicStyle = {
      width: `${item.width}px`,
      height: `${item.height}px`,
      backgroundColor: item.color,
    };
    const style = { ...BASE_STYLE, ...dynamicStyle };
    return `<div style="${Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';')}">${item.label}</div>`;
  });
}

// ✅ 使用 CSS 类代替内联样式
function renderItemsCSS(items) {
  // 预定义 CSS 类，减少样式对象创建
  return items.map((item) =>
    `<div class="item-base item-${item.color}">${item.label}</div>`
  ).join('');
}

// ❌ 避免在热路径中使用 delete
function removeItemBad(obj, key) {
  // delete 会使对象从"快速模式"降级为"字典模式"
  delete obj[key];
  return obj;
}

// ✅ 使用解构或 Object.assign 代替
function removeItemGood(obj, key) {
  const { [key]: removed, ...rest } = obj;
  return rest;
}

// ✅ 或直接设置 undefined（如果不需要删除 key）
function removeItemByNull(obj, key) {
  obj[key] = undefined;
  return obj;
}

// 使用 console.time 和 performance.mark 辅助分析
function performTask() {
  performance.mark('task-start');

  // ... 执行任务 ...

  performance.mark('task-end');
  performance.measure('task-duration', 'task-start', 'task-end');

  const measures = performance.getEntriesByType('measure');
  console.log('任务耗时:', measures[measures.length - 1].duration, 'ms');
}

// 批量标记
class PerformanceMarker {
  constructor(prefix) {
    this.prefix = prefix;
    this.marks = {};
  }

  mark(name) {
    performance.mark(`${this.prefix}:${name}`);
    this.marks[name] = performance.now();
  }

  measure(name, startMark, endMark) {
    performance.measure(
      `${this.prefix}:${name}`,
      `${this.prefix}:${startMark}`,
      `${this.prefix}:${endMark}`
    );
  }

  getReport() {
    return performance.getEntriesByType('measure')
      .filter((m) => m.name.startsWith(this.prefix))
      .map((m) => ({
        name: m.name.replace(`${this.prefix}:`, ''),
        duration: m.duration.toFixed(2),
      }));
  }

  clear() {
    const prefix = this.prefix;
    performance.getEntriesByType('measure')
      .filter((m) => m.name.startsWith(prefix))
      .forEach((m) => performance.clearMeasures(m.name));
    performance.getEntriesByType('mark')
      .filter((m) => m.name.startsWith(prefix))
      .forEach((m) => performance.clearMarks(m.name));
  }
}

// Performance 面板录制步骤：
// 1. 打开 DevTools → Performance 面板
// 2. 点击录制按钮（或 Ctrl+E）
// 3. 执行需要分析的操作
// 4. 停止录制
// 5. 分析火焰图（Flame Chart）：
//    - 查看 Long Task（红色标记）
//    - 关注 Main 线程的活动
//    - 识别不必要的重排/重绘
//    - 检查网络请求瀑布图
//    - 查看 FPS 是否稳定

// 使用 performance.memory（非标准，仅 Chrome）
function checkMemoryUsage() {
  if (performance.memory) {
    console.log({
      jsHeapSizeLimit: `${(performance.memory.jsHeapSizeLimit / 1048576).toFixed(1)} MB`,
      totalJSHeapSize: `${(performance.memory.totalJSHeapSize / 1048576).toFixed(1)} MB`,
      usedJSHeapSize: `${(performance.memory.usedJSHeapSize / 1048576).toFixed(1)} MB`,
    });
  }
}

// 触发 GC 后检查内存（仅开发用）
async function detectMemoryLeak() {
  // 强制进行垃圾回收（需打开 Chrome 的"开发工具实验性功能"）
  if (window.gc) {
    // 先 GC 再记录基线
    window.gc();
    const baseline = performance.memory?.usedJSHeapSize || 0;

    // 执行可能泄漏的操作
    await leakyOperation();

    // GC 后再检查
    window.gc();
    const after = performance.memory?.usedJSHeapSize || 0;

    if (after - baseline > 1048576) {
      // 超过 1MB 的增加，可能存在内存泄漏
      console.warn(`内存增长: ${((after - baseline) / 1048576).toFixed(1)} MB`);
    }
  }
}

// 创建堆快照对比分析的辅助函数
class HeapSnapshotHelper {
  constructor() {
    this.snapshots = [];
  }

  takeSnapshot(name) {
    console.log(`请手动在 Memory 面板创建堆快照: ${name}`);
    // 记录当前时间点，用于在 DevTools 中标记
    performance.mark(`snapshot:${name}`);
  }

  // 用于在 DevTools 中查找特定类型的内存
  findRetainers(className) {
    console.log(`查找 ${className} 的保留路径...`);
    // 在 DevTools Console 中执行
    // queryObjects(ClassName) 可以列出所有实例
    console.log(`在 DevTools Console 中执行: queryObjects(${className})`);
  }
}

// Memory 面板使用步骤：
// 1. 打开 DevTools → Memory 面板
// 2. 选择"Heap snapshot"并点击"Take snapshot"
// 3. 执行操作后再次"Take snapshot"
// 4. 对比两个快照（Summary 视图）
// 5. 查看"Detached DOM tree"节点
// 6. 使用"Allocation instrumentation on timeline"跟踪内存分配

// Coverage 面板帮助发现未使用的代码

// 动态导入未使用代码的替代方案
// 使用 import() 进行代码分割
async function loadModuleOnDemand() {
  // 只有在需要时才加载
  if (condition) {
    const module = await import('./heavy-module.js');
    module.doSomething();
  }
}

// 使用 IntersectionObserver 延迟加载组件
function lazyLoadComponent(element) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        import('./lazy-component.js').then((mod) => {
          mod.render(entry.target);
        });
        observer.unobserve(entry.target);
      }
    });
  });
  observer.observe(element);
}

// Coverage 面板使用步骤：
// 1. 打开 DevTools → Coverage (Command+Shift+P 搜索 "Coverage")
// 2. 点击录制按钮
// 3. 正常使用页面
// 4. 停止录制查看分析结果：
//    - 红色 = 未执行的代码
//    - 绿色 = 已执行的代码
// 5. 根据结果移除无效代码或改为懒加载

// 以编程方式运行 Lighthouse
// 需要在 Node.js 环境中运行

async function runLighthouse(url) {
  const lighthouse = require('lighthouse');
  const chromeLauncher = require('chrome-launcher');

  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const options = {
    logLevel: 'info',
    output: 'json',
    onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
    port: chrome.port,
  };

  const result = await lighthouse(url, options);

  // 提取关键指标
  const audits = result.lhr.audits;
  const metrics = {
    performance: result.lhr.categories.performance.score * 100,
    lcp: audits['largest-contentful-paint'].numericValue,
    tbt: audits['total-blocking-time'].numericValue,
    cls: audits['cumulative-layout-shift'].numericValue,
    si: audits['speed-index'].numericValue,
    fcp: audits['first-contentful-paint'].numericValue,
    unusedJs: audits['unused-javascript'].numericValue,
    unusedCss: audits['unused-css-rules'].numericValue,
  };

  console.table(metrics);
  await chrome.kill();
  return metrics;
}

// Network 面板瀑布图分析
// 关键观察点：

// 1. 资源优先级
// 可以在 Network 面板的 Priority 列查看每个资源的优先级
// Highest → High → Medium → Low → Lowest

// 2. 请求瀑布图中的关键事件
// - DNS Lookup: 毫秒级
// - Initial connection: TCP 握手（+ TLS 若 HTTPS）
// - SSL/TLS: 仅在 HTTPS
// - TTFB: 服务器响应延迟
// - Content Download: 实际数据传输

// 3. 使用 Navigation Preload API 加速 Service Worker 启动
self.addEventListener('activate', (event) => {
  event.waitUntil(
    // 启用导航预加载
    self.registration.navigationPreload.enable()
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    (async () => {
      try {
        // 使用预加载的响应
        const response = await event.preloadResponse;
        if (response) return response;
        return await fetch(event.request);
      } catch {
        return caches.match(event.request);
      }
    })()
  );
});

// 4. 网络请求拦截与 mock（开发环境）
if (process.env.NODE_ENV === 'development') {
  const originalFetch = window.fetch;
  window.fetch = async (url, options) => {
    console.log('[Network]', url, options?.method || 'GET');
    const start = performance.now();
    const response = await originalFetch(url, options);
    const duration = performance.now() - start;
    console.log(`[Network] ${url} - ${duration.toFixed(0)}ms [${response.status}]`);
    return response;
  };
}

// 1. 响应式图片
// HTML 提供多种尺寸供浏览器选择
const responsiveImage = `
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img
    src="image.jpg"
    srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w"
    sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1280px"
    alt="描述"
    loading="lazy"
    decoding="async"
    width="1280"
    height="720"
  >
</picture>`;

// 2. Canvas 压缩客户端图片
function compressImage(file, { maxWidth = 1920, quality = 0.8 } = {}) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      // 等比例缩放
      if (width > maxWidth) {
        height = (height * maxWidth) / width;
        width = maxWidth;
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(
        (blob) => {
          URL.revokeObjectURL(url);
          resolve(blob);
        },
        file.type,
        quality
      );
    };

    img.onerror = () => reject(new Error('图片加载失败'));
    img.src = url;
  });
}

// 3. 使用 Image Loading API 观察加载状态
function trackImageLoading() {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.initiatorType === 'img') {
        const imgElement = entry.element;
        console.log(`图片加载: ${entry.name.split('/').pop()} - ${entry.duration.toFixed(0)}ms`);
        if (entry.transferSize === 0) {
          console.log('  从缓存加载');
        }
      }
    });
  });
  observer.observe({ type: 'resource', buffered: true });
}

// 1. font-display 控制字体加载时的行为
// 在 @font-face 中配置
const fontFaceCSS = `
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;    /* 优先使用系统字体显示文本，字体加载后替换 */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font-bold.woff2') format('woff2');
  font-display: optional; /* 如果字体在 100ms 内未加载，使用系统字体 */
  font-weight: 700;
  font-style: normal;
}`;

// 2. 字体子集化
// 只包含页面使用的字符
const subsetFontConfig = {
  // 使用 glyphhanger 或字体工具生成子集
  // 中文通常需要完整的字体文件，但可以按需加载
  subsets: ['latin', 'latin-ext', 'chinese-simplified'],
  // 或使用 Unicode-range
  unicodeRange: 'U+4E00-9FFF', // CJK 统一表意文字
};

// 3. 预加载关键字体
// <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" crossorigin>

// 4. FOIT (Flash of Invisible Text) 与 FOUT (Flash of Unstyled Text) 处理
function handleFontLoading() {
  // 检测字体是否已加载
  if (document.fonts) {
    document.fonts.ready.then(() => {
      document.documentElement.classList.add('fonts-loaded');
    });

    // 设置超时，避免长时间无样式文本闪烁
    setTimeout(() => {
      if (!document.documentElement.classList.contains('fonts-loaded')) {
        document.documentElement.classList.add('fonts-timeout');
      }
    }, 3000);
  }
}

// 5. 使用 CSS Font Loading API
async function loadFontWithAPI() {
  const font = new FontFace(
    'DynamicFont',
    'url(/fonts/dynamic-font.woff2)',
    { weight: '400' }
  );

  try {
    const loadedFont = await font.load();
    document.fonts.add(loadedFont);
    console.log('字体加载成功');
  } catch (error) {
    console.error('字体加载失败:', error);
  }
}

// 1. 延迟加载不重要第三方脚本
function loadNonCriticalThirdParty() {
  // 使用 requestIdleCallback 延迟加载
  requestIdleCallback(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.example.com/analytics.js';
    script.async = true;
    document.body.appendChild(script);
  }, { timeout: 5000 });
}

// 2. 通过 IntersectionObserver 加载可见区域脚本
function loadAdsWhenVisible(adElement) {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 加载广告脚本
          const script = document.createElement('script');
          script.src = 'https://ads.example.com/loader.js';
          entry.target.appendChild(script);
          observer.unobserve(entry.target);
        }
      });
    },
    { rootMargin: '200px' } // 提前 200px 加载
  );
  observer.observe(adElement);
}

// 3. 使用沙箱隔离第三方脚本
function sandboxThirdParty(url) {
  const iframe = document.createElement('iframe');
  iframe.sandbox = 'allow-scripts allow-same-origin'; // 最小权限
  iframe.src = url;
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  return iframe;
}

// 4. 第三方脚本性能监控
function monitorThirdPartyPerformance() {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.initiatorType === 'script') {
        const url = new URL(entry.name);
        if (isThirdParty(url.hostname)) {
          console.warn(`第三方脚本 [${url.hostname}]: ${entry.duration.toFixed(0)}ms`);
          // 超过 500ms 的第三方脚本触发告警
          if (entry.duration > 500) {
            reportSlowThirdParty(url.hostname, entry.duration);
          }
        }
      }
    });
  });
  observer.observe({ type: 'resource', buffered: true });
}

function isThirdParty(hostname) {
  const currentHost = window.location.hostname;
  return hostname !== currentHost;
}

// 1. 分页渲染（渐进式）
async function progressiveRender(list, container, batchSize = 50) {
  let index = 0;

  function renderBatch() {
    const fragment = document.createDocumentFragment();
    const end = Math.min(index + batchSize, list.length);

    for (let i = index; i < end; i++) {
      const item = document.createElement('div');
      item.className = 'list-item';
      item.textContent = list[i];
      fragment.appendChild(item);
    }

    container.appendChild(fragment);
    index = end;

    if (index < list.length) {
      requestAnimationFrame(renderBatch);
    }
  }

  renderBatch();
}

// 2. 使用 DocumentFragment 批量添加
function batchDOMAppend(items, container) {
  const fragment = document.createDocumentFragment();

  for (const item of items) {
    const el = document.createElement('div');
    el.textContent = item;
    fragment.appendChild(el);
  }

  // 一次性添加到 DOM，只触发一次重排
  container.appendChild(fragment);
}

// 3. 时间切片渲染
function renderWithTimeSlice(items, container, timeSlice = 8) {
  let index = 0;
  const total = items.length;

  function schedule() {
    const start = performance.now();
    let count = 0;

    while (performance.now() - start < timeSlice && index < total) {
      const item = document.createElement('div');
      item.textContent = items[index];
      container.appendChild(item);
      index++;
      count++;
    }

    if (index < total) {
      console.log(`已渲染: ${index}/${total} (${((index / total) * 100).toFixed(1)}%)`);
      requestAnimationFrame(schedule);
    }
  }

  schedule();
}

// 4. 使用 `content-visibility` CSS 属性
// .list-item {
//   content-visibility: auto;      /* 不在视口中的元素跳过渲染 */
//   contain-intrinsic-size: 40px;  /* 预留空间避免滚动跳动 */
// }

// 5. 虚拟滚动（参考 3.6 节）

// 1. 全局 JS 错误捕获
window.onerror = function (message, source, lineno, colno, error) {
  const errorData = {
    type: 'js_error',
    message,
    source,
    lineno,
    colno,
    stack: error?.stack,
    url: window.location.href,
    timestamp: Date.now(),
    userAgent: navigator.userAgent,
  };

  // 上报错误
  reportError(errorData);
  return true; // 阻止默认错误处理
};

// 2. Promise 错误捕获
window.addEventListener('unhandledrejection', (event) => {
  const errorData = {
    type: 'promise_error',
    message: event.reason?.message || String(event.reason),
    stack: event.reason?.stack,
    url: window.location.href,
    timestamp: Date.now(),
  };

  reportError(errorData);
  event.preventDefault();
});

// 3. 资源加载错误捕获
window.addEventListener('error', (event) => {
  if (event.target instanceof HTMLElement) {
    const target = event.target;
    const errorData = {
      type: 'resource_error',
      tagName: target.tagName,
      source: target.src || target.href,
      url: window.location.href,
      timestamp: Date.now(),
    };
    reportError(errorData);
  }
}, true); // 捕获阶段

// 4. 封装 fetch/XMLHttpRequest 错误
function wrapFetchWithErrorTracking() {
  const originalFetch = window.fetch;

  window.fetch = async (...args) => {
    try {
      const response = await originalFetch(...args);
      if (!response.ok) {
        reportError({
          type: 'http_error',
          url: args[0],
          status: response.status,
          statusText: response.statusText,
        });
      }
      return response;
    } catch (error) {
      reportError({
        type: 'network_error',
        url: args[0],
        message: error.message,
      });
      throw error;
    }
  };
}

// 5. React 错误边界
// class ErrorBoundary extends React.Component {
//   componentDidCatch(error, errorInfo) {
//     reportError({
//       type: 'react_error',
//       message: error.message,
//       stack: error.stack,
//       componentStack: errorInfo.componentStack,
//     });
//   }
// }

// 完整的性能监控收集器
class PerformanceMonitor {
  constructor(options = {}) {
    this.endpoint = options.endpoint || '/api/performance';
    this.sampleRate = options.sampleRate || 1; // 采样率
    this.autoReport = options.autoReport ?? true;
    this.metrics = new Map();

    if (this.autoReport) {
      this.initObservers();
      window.addEventListener('load', () => this.collectInitialMetrics());
      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          this.flush();
        }
      });
    }
  }

  initObservers() {
    // LCP
    new PerformanceObserver((list) => {
      const entries = list.getEntries();
      this.metrics.set('LCP', entries[entries.length - 1].startTime);
    }).observe({ type: 'largest-contentful-paint', buffered: true });

    // FID
    new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        this.metrics.set('FID', entry.processingStart - entry.startTime);
      });
    }).observe({ type: 'first-input', buffered: true });

    // CLS
    let cls = 0;
    new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (!entry.hadRecentInput) cls += entry.value;
      });
      this.metrics.set('CLS', cls);
    }).observe({ type: 'layout-shift', buffered: true });

    // Long Tasks
    new PerformanceObserver((list) => {
      const longTasks = [];
      list.getEntries().forEach((entry) => {
        if (entry.duration > 50) {
          longTasks.push({
            duration: entry.duration,
            startTime: entry.startTime,
          });
        }
      });
      if (longTasks.length > 0) {
        this.metrics.set('longTasks', longTasks);
      }
    }).observe({ type: 'longtask', buffered: true });

    // Resource Timing
    new PerformanceObserver((list) => {
      const resources = list.getEntries().map((entry) => ({
        name: entry.name.split('/').pop(),
        type: entry.initiatorType,
        duration: entry.duration,
        transferSize: entry.transferSize,
        protocol: entry.nextHopProtocol,
      }));
      this.metrics.set('resources', resources);
    }).observe({ type: 'resource', buffered: true });
  }

  collectInitialMetrics() {
    const navEntry = performance.getEntriesByType('navigation')[0];
    if (navEntry) {
      this.metrics.set('TTFB', navEntry.responseStart - navEntry.requestStart);
      this.metrics.set('DOMContentLoaded', navEntry.domContentLoadedEventEnd - navEntry.domContentLoadedEventStart);
      this.metrics.set('LoadEvent', navEntry.loadEventEnd - navEntry.loadEventStart);
      this.metrics.set('DomInteractive', navEntry.domInteractive);
    }

    // FCP
    const fcp = performance.getEntriesByName('first-contentful-paint')[0];
    if (fcp) this.metrics.set('FCP', fcp.startTime);
  }

  addCustomMetric(name, value) {
    this.metrics.set(name, value);
  }

  async flush() {
    if (Math.random() > this.sampleRate) return;

    const data = Object.fromEntries(this.metrics);
    data.url = window.location.href;
    data.timestamp = Date.now();
    data.userAgent = navigator.userAgent;

    // 使用 sendBeacon 确保在页面卸载时也能发送
    if (navigator.sendBeacon) {
      navigator.sendBeacon(this.endpoint, JSON.stringify(data));
    } else {
      await fetch(this.endpoint, {
        method: 'POST',
        body: JSON.stringify(data),
        keepalive: true,
      });
    }

    this.metrics.clear();
  }
}

// 使用示例
const perfMonitor = new PerformanceMonitor({
  endpoint: '/api/v1/perf',
  sampleRate: 0.1, // 10% 采样
});

class UserBehaviorTracker {
  constructor(endpoint) {
    this.endpoint = endpoint;
    this.events = [];
    this.batchSize = 10;
    this.flushInterval = 30000; // 30s
    this.init();
  }

  init() {
    // 自动追踪常见用户行为
    this.trackPageView();
    this.trackClicks();
    this.trackScroll();
    this.trackNavigation();

    // 定时上报
    setInterval(() => this.flush(), this.flushInterval);

    // 页面关闭前上报
    window.addEventListener('beforeunload', () => this.flush());
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') this.flush();
    });
  }

  track(event) {
    this.events.push({
      ...event,
      timestamp: Date.now(),
      url: window.location.href,
      sessionId: this.getSessionId(),
    });

    if (this.events.length >= this.batchSize) {
      this.flush();
    }
  }

  trackPageView() {
    this.track({
      type: 'page_view',
      referrer: document.referrer,
      title: document.title,
    });
  }

  trackClicks() {
    document.addEventListener('click', (e) => {
      const target = e.target;
      this.track({
        type: 'click',
        tagName: target.tagName,
        id: target.id,
        className: target.className,
        text: target.textContent?.slice(0, 50),
        x: e.clientX,
        y: e.clientY,
      });
    }, { passive: true });
  }

  trackScroll() {
    let lastScrollY = 0;
    let maxScroll = 0;

    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = Math.min((scrollY / docHeight) * 100, 100);

      if (scrollPercent > maxScroll) {
        maxScroll = scrollPercent;
      }

      // 每滚动 25% 记录一次深度
      if (Math.floor(scrollPercent / 25) > Math.floor(lastScrollY / 25)) {
        this.track({
          type: 'scroll_depth',
          depth: Math.floor(scrollPercent / 25) * 25,
        });
      }

      lastScrollY = scrollY;
    }, { passive: true });
  }

  trackNavigation() {
    // 监听 SPA 路由变化
    let lastUrl = window.location.href;

    const observer = new MutationObserver(() => {
      if (window.location.href !== lastUrl) {
        lastUrl = window.location.href;
        this.trackPageView();
      }
    });

    observer.observe(document.querySelector('title') || document.head, {
      childList: true,
      subtree: true,
    });
  }

  getSessionId() {
    let sessionId = sessionStorage.getItem('session_id');
    if (!sessionId) {
      sessionId = `sess_${Date.now()}_${Math.random().toString(36).slice(2)}`;
      sessionStorage.setItem('session_id', sessionId);
    }
    return sessionId;
  }

  async flush() {
    if (this.events.length === 0) return;

    const batch = this.events.splice(0);
    const payload = { events: batch, timestamp: Date.now() };

    try {
      if (navigator.sendBeacon) {
        navigator.sendBeacon(this.endpoint, JSON.stringify(payload));
      } else {
        await fetch(this.endpoint, {
          method: 'POST',
          body: JSON.stringify(payload),
          keepalive: true,
        });
      }
    } catch (error) {
      // 上报失败：保留事件，下次重试
      console.warn('行为上报失败:', error);
    }
  }
}

// 智能日志上报器
class Logger {
  constructor(options = {}) {
    this.endpoint = options.endpoint || '/api/logs';
    this.maxQueueSize = options.maxQueueSize || 50;
    this.sampleRate = options.sampleRate || 1;
    this.minLevel = options.minLevel || 'info';
    this.retryCount = options.retryCount || 3;
    this.queue = [];
    this.pending = false;

    // 级别
    this.levels = { debug: 0, info: 1, warn: 2, error: 3 };

    // 后台上报（页面不可见时）
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.flush(true);
      }
    });

    // 周期性上报
    setInterval(() => this.flush(), 10000);
  }

  log(level, message, data = {}) {
    if (this.levels[level] < this.levels[this.minLevel]) return;
    if (Math.random() > this.sampleRate) return;

    this.queue.push({
      level,
      message,
      data: this.sanitizeData(data),
      timestamp: Date.now(),
      url: window.location.href,
      userAgent: navigator.userAgent,
    });

    // 错误立即上报
    if (level === 'error') {
      this.flush();
    }

    // 队列满时触发上报
    if (this.queue.length >= this.maxQueueSize) {
      this.flush();
    }
  }

  debug(message, data) { this.log('debug', message, data); }
  info(message, data) { this.log('info', message, data); }
  warn(message, data) { this.log('warn', message, data); }
  error(message, data) { this.log('error', message, data); }

  sanitizeData(data) {
    // 清理敏感数据
    const sanitized = { ...data };
    const sensitiveKeys = ['password', 'token', 'secret', 'key', 'authorization'];

    for (const key of Object.keys(sanitized)) {
      if (sensitiveKeys.some((k) => key.toLowerCase().includes(k))) {
        sanitized[key] = '***';
      }
    }

    return sanitized;
  }

  async flush(useBeacon = false) {
    if (this.queue.length === 0 || this.pending) return;

    const batch = this.queue.splice(0);
    this.pending = true;

    const payload = JSON.stringify({
      logs: batch,
      timestamp: Date.now(),
      batchId: `batch_${Date.now()}`,
    });

    let success = false;
    let attempts = 0;

    while (!success && attempts < this.retryCount) {
      attempts++;
      try {
        if (useBeacon) {
          success = navigator.sendBeacon(this.endpoint, payload);
        } else {
          const response = await fetch(this.endpoint, {
            method: 'POST',
            body: payload,
            headers: { 'Content-Type': 'application/json' },
            keepalive: true,
          });
          success = response.ok;
        }
      } catch {
        // 重试
        await new Promise((r) => setTimeout(r, 1000 * attempts));
      }
    }

    if (!success) {
      // 最多保留 100 条日志避免内存膨胀
      this.queue = [...batch, ...this.queue].slice(-100);
    }

    this.pending = false;
  }
}

// 使用示例
const logger = new Logger({
  endpoint: '/api/v1/logs',
  sampleRate: 0.5,       // 50% 采样
  minLevel: 'info',      // debug 级别不上报
  maxQueueSize: 20,      // 每 20 条上报一次
});

logger.info('页面加载完成', { loadTime: 1500 });
logger.warn('API 响应慢', { endpoint: '/api/users', duration: 3500 });
logger.error('应用崩溃', { error: error.message, stack: error.stack });