vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{Performance → DevTool/components/Performance}/modules/usePerformanceData.ts

@@ -1,258 +1,258 @@
-import { ref } from 'vue';
-import { MSG_TYPE } from '../../../const';
-import { raf, caf } from '../../../utils';
-
-const fps = ref(0);
-const cpuLoad = ref(0);
-const memory = ref(0);
-
-const fpsHistory = ref<number[]>([]);
-const cpuHistory = ref<number[]>([]);
-const memoryHistory = ref<number[]>([]);
-const timeHistory = ref<number[]>([]); // 记录时间戳
-const longTasksHistory = ref<{ ts: number; duration: number; type?: string }[]>(
-  [],
-); // 记录长任务记录
-const displayMaxScale = ref(60);
-const lastUpdateTs = ref(Date.now()); // 记录最后一次更新时间点
-let animationId: number | null = null;
-let logicMonitorTimer: any = null;
-
-let heartbeatTimer: any = null;
-let metricsHandler: any = null;
-
-const performanceMonitorEnabled = ref(false);
-
-export function usePerformanceData() {
-  function clearData() {
-    fpsHistory.value = [];
-    cpuHistory.value = [];
-    memoryHistory.value = [];
-    timeHistory.value = [];
-    longTasksHistory.value = [];
-    lastUpdateTs.value = Date.now();
-  }
-
-  // 逻辑线程监测
-  function startLogicMonitor() {
-    if (logicMonitorTimer) return;
-    let lastTime = Date.now();
-    logicMonitorTimer = setInterval(() => {
-      const now = Date.now();
-      const delta = now - lastTime;
-
-      // 这里的 20ms 是预期周期。如果有偏差，说明逻辑线程繁忙
-      // 1. 计算负载估算 (0-100)
-      // 偏差超过 5ms 开始计算负载，超过 80ms 认为 100% 负载
-      const drift = Math.max(0, delta - 20);
-      const estimatedLoad = Math.min(100, Math.round((drift / 60) * 100));
-      // 平滑处理
-      cpuLoad.value = Math.round(cpuLoad.value * 0.7 + estimatedLoad * 0.3);
-
-      // 2. 这里的 100ms 实际上包含了 20ms 的采样周期，如果偏差超过 80ms 则认为逻辑线程阻塞
-      if (delta > 100) {
-        longTasksHistory.value = [
-          ...longTasksHistory.value,
-          { ts: now, duration: delta, type: 'Logic' },
-        ].slice(-20);
-      }
-      lastTime = now;
-    }, 20); // 高频采样以获得更好精度
-  }
-
-  function stopLogicMonitor() {
-    if (logicMonitorTimer) {
-      clearInterval(logicMonitorTimer);
-      logicMonitorTimer = null;
-    }
-  }
-
-  function initData(points: number) {
-    const now = Date.now();
-    // 如果已经有数据且长度足够，不需要重复初始化
-    if (fpsHistory.value.length >= points) return;
-
-    const needed = points - fpsHistory.value.length;
-
-    // 如果是第一次初始化，填充过去的虚拟时间点
-    if (fpsHistory.value.length === 0) {
-      fpsHistory.value = new Array(points).fill(0);
-      cpuHistory.value = new Array(points).fill(0);
-      memoryHistory.value = new Array(points).fill(0);
-      timeHistory.value = Array.from(
-        { length: points },
-        (_, i) => now - (points - 1 - i) * 1000,
-      );
-    } else {
-      // 如果是扩容，向前（左侧）追加 0 点数据
-      const fillFps = new Array(needed).fill(0);
-      const fillCpu = new Array(needed).fill(0);
-      const fillMem = new Array(needed).fill(0);
-      const firstTs = timeHistory.value[0];
-      const fillTime = Array.from(
-        { length: needed },
-        (_, i) => firstTs - (needed - i) * 1000,
-      );
-
-      fpsHistory.value = [...fillFps, ...fpsHistory.value];
-      cpuHistory.value = [...fillCpu, ...cpuHistory.value];
-      memoryHistory.value = [...fillMem, ...memoryHistory.value];
-      timeHistory.value = [...fillTime, ...timeHistory.value];
-    }
-
-    lastUpdateTs.value = now;
-  }
-
-  function startScaleAnimation(target: number) {
-    if (animationId) {
-      caf(animationId);
-    }
-
-    const animate = () => {
-      const diff = target - displayMaxScale.value;
-      if (Math.abs(diff) < 0.5) {
-        displayMaxScale.value = target;
-        animationId = null;
-        return;
-      }
-      displayMaxScale.value += diff * 0.15;
-      animationId = raf(animate);
-    };
-    animate();
-  }
-
-  function updateMetrics(
-    data:
-      | {
-          fps: number;
-          load: number;
-          longTasks?: { ts: number; duration: number; type?: string }[];
-        }
-      | {
-          fps: number;
-          load: number;
-          longTasks?: { ts: number; duration: number; type?: string }[];
-        }[],
-  ) {
-    const items = Array.isArray(data) ? data : [data];
-    if (items.length === 0) return;
-
-    const now = Date.now();
-    lastUpdateTs.value = now;
-
-    items.forEach((item, index) => {
-      fps.value = item.fps;
-      cpuLoad.value = item.load;
-
-      // 如果有长任务，记录下来（保持最近 20 条）
-      if (item.longTasks && item.longTasks.length > 0) {
-        longTasksHistory.value = [
-          ...longTasksHistory.value,
-          ...item.longTasks,
-        ].slice(-20);
-      }
-
-      // 安全访问 performance 对象（安卓平台可能不存在）
-      let mem = 0;
-      if (typeof performance !== 'undefined' && (performance as any).memory) {
-        mem = Math.round(
-          (performance as any).memory.usedJSHeapSize / 1024 / 1024,
-        );
-        memory.value = mem;
-      }
-
-      fpsHistory.value.shift();
-      fpsHistory.value.push(item.fps);
-      cpuHistory.value.shift();
-      cpuHistory.value.push(item.load);
-      memoryHistory.value.shift();
-      memoryHistory.value.push(mem);
-
-      // 优先级：由于 renderjs 传来的采样点自带时间戳，优先使用它
-      // 如果没有，则使用 logic 层当前生成的 now 向前平摊
-      const eventTs = (item as any).ts;
-      const ts =
-        eventTs !== undefined
-          ? Math.min(now, eventTs)
-          : now - (items.length - 1 - index) * 1000;
-
-      timeHistory.value.shift();
-      timeHistory.value.push(ts);
-    });
-
-    const maxVal = Math.max(...fpsHistory.value, 0);
-    let targetScale = 60;
-    if (maxVal > 144) targetScale = 240;
-    else if (maxVal > 120) targetScale = 144;
-    else if (maxVal > 90) targetScale = 120;
-    else if (maxVal > 60) targetScale = 100;
-
-    startScaleAnimation(targetScale);
-  }
-
-  function startHeartbeat() {
-    if (metricsHandler || heartbeatTimer) return;
-
-    metricsHandler = (data: any) => updateMetrics(data);
-
-    uni.$on(MSG_TYPE.PERF_METRICS, metricsHandler);
-    startLogicMonitor(); // 启动逻辑层监测
-
-    heartbeatTimer = setInterval(() => {
-      const now = Date.now();
-      // 如果超过 2 秒没收到外部(renderjs)数据，说明处于非 H5/App 环境，切换到降级模式
-      if (now - lastUpdateTs.value > 2000) {
-        // 估算逻辑层负载：我们没有真实的渲染 FPS，但可以展示逻辑层的心跳健康度
-        // 这在小程序等平台非常有意义
-        updateMetrics({
-          fps: 0, // 非 H5 无法获取准确渲染帧率
-          load: cpuLoad.value || 0, // 这里的 load 会由 startLogicMonitor 的逻辑更新（如果有的化）
-        });
-      }
-
-      if (timeHistory.value.length > 0) {
-        if (now - lastUpdateTs.value < 800) return;
-        updateMetrics({ fps: fps.value, load: cpuLoad.value });
-      }
-    }, 1000);
-  }
-
-  function stopHeartbeat() {
-    if (metricsHandler) {
-      uni.$off(MSG_TYPE.PERF_METRICS, metricsHandler);
-      metricsHandler = null;
-    }
-    stopLogicMonitor(); // 停止逻辑层监测
-    if (heartbeatTimer) {
-      clearInterval(heartbeatTimer);
-      heartbeatTimer = null;
-    }
-    // clean animation
-    if (animationId) {
-      caf(animationId);
-      animationId = null;
-    }
-    clearData();
-  }
-
-  return {
-    fps,
-    cpuLoad,
-    memory,
-    fpsHistory,
-    cpuHistory,
-    memoryHistory,
-    timeHistory,
-    longTasksHistory,
-    displayMaxScale,
-    lastUpdateTs,
-    performanceMonitorEnabled,
-    initData,
-    updateMetrics,
-    startHeartbeat,
-    stopHeartbeat,
-    startLogicMonitor,
-    stopLogicMonitor,
-    clearData,
-  };
-}
+import { ref } from 'vue';
+import { MSG_TYPE } from '../../../../../const';
+import { raf, caf } from '../../../../../utils';
+
+const fps = ref(0);
+const cpuLoad = ref(0);
+const memory = ref(0);
+
+const fpsHistory = ref<number[]>([]);
+const cpuHistory = ref<number[]>([]);
+const memoryHistory = ref<number[]>([]);
+const timeHistory = ref<number[]>([]); // 记录时间戳
+const longTasksHistory = ref<{ ts: number; duration: number; type?: string }[]>(
+  [],
+); // 记录长任务记录
+const displayMaxScale = ref(60);
+const lastUpdateTs = ref(Date.now()); // 记录最后一次更新时间点
+let animationId: number | null = null;
+let logicMonitorTimer: any = null;
+
+let heartbeatTimer: any = null;
+let metricsHandler: any = null;
+
+const performanceMonitorEnabled = ref(false);
+
+export function usePerformanceData() {
+  function clearData() {
+    fpsHistory.value = [];
+    cpuHistory.value = [];
+    memoryHistory.value = [];
+    timeHistory.value = [];
+    longTasksHistory.value = [];
+    lastUpdateTs.value = Date.now();
+  }
+
+  // 逻辑线程监测
+  function startLogicMonitor() {
+    if (logicMonitorTimer) return;
+    let lastTime = Date.now();
+    logicMonitorTimer = setInterval(() => {
+      const now = Date.now();
+      const delta = now - lastTime;
+
+      // 这里的 20ms 是预期周期。如果有偏差，说明逻辑线程繁忙
+      // 1. 计算负载估算 (0-100)
+      // 偏差超过 5ms 开始计算负载，超过 80ms 认为 100% 负载
+      const drift = Math.max(0, delta - 20);
+      const estimatedLoad = Math.min(100, Math.round((drift / 60) * 100));
+      // 平滑处理
+      cpuLoad.value = Math.round(cpuLoad.value * 0.7 + estimatedLoad * 0.3);
+
+      // 2. 这里的 100ms 实际上包含了 20ms 的采样周期，如果偏差超过 80ms 则认为逻辑线程阻塞
+      if (delta > 100) {
+        longTasksHistory.value = [
+          ...longTasksHistory.value,
+          { ts: now, duration: delta, type: 'Logic' },
+        ].slice(-20);
+      }
+      lastTime = now;
+    }, 20); // 高频采样以获得更好精度
+  }
+
+  function stopLogicMonitor() {
+    if (logicMonitorTimer) {
+      clearInterval(logicMonitorTimer);
+      logicMonitorTimer = null;
+    }
+  }
+
+  function initData(points: number) {
+    const now = Date.now();
+    // 如果已经有数据且长度足够，不需要重复初始化
+    if (fpsHistory.value.length >= points) return;
+
+    const needed = points - fpsHistory.value.length;
+
+    // 如果是第一次初始化，填充过去的虚拟时间点
+    if (fpsHistory.value.length === 0) {
+      fpsHistory.value = new Array(points).fill(0);
+      cpuHistory.value = new Array(points).fill(0);
+      memoryHistory.value = new Array(points).fill(0);
+      timeHistory.value = Array.from(
+        { length: points },
+        (_, i) => now - (points - 1 - i) * 1000,
+      );
+    } else {
+      // 如果是扩容，向前（左侧）追加 0 点数据
+      const fillFps = new Array(needed).fill(0);
+      const fillCpu = new Array(needed).fill(0);
+      const fillMem = new Array(needed).fill(0);
+      const firstTs = timeHistory.value[0];
+      const fillTime = Array.from(
+        { length: needed },
+        (_, i) => firstTs - (needed - i) * 1000,
+      );
+
+      fpsHistory.value = [...fillFps, ...fpsHistory.value];
+      cpuHistory.value = [...fillCpu, ...cpuHistory.value];
+      memoryHistory.value = [...fillMem, ...memoryHistory.value];
+      timeHistory.value = [...fillTime, ...timeHistory.value];
+    }
+
+    lastUpdateTs.value = now;
+  }
+
+  function startScaleAnimation(target: number) {
+    if (animationId) {
+      caf(animationId);
+    }
+
+    const animate = () => {
+      const diff = target - displayMaxScale.value;
+      if (Math.abs(diff) < 0.5) {
+        displayMaxScale.value = target;
+        animationId = null;
+        return;
+      }
+      displayMaxScale.value += diff * 0.15;
+      animationId = raf(animate);
+    };
+    animate();
+  }
+
+  function updateMetrics(
+    data:
+      | {
+          fps: number;
+          load: number;
+          longTasks?: { ts: number; duration: number; type?: string }[];
+        }
+      | {
+          fps: number;
+          load: number;
+          longTasks?: { ts: number; duration: number; type?: string }[];
+        }[],
+  ) {
+    const items = Array.isArray(data) ? data : [data];
+    if (items.length === 0) return;
+
+    const now = Date.now();
+    lastUpdateTs.value = now;
+
+    items.forEach((item, index) => {
+      fps.value = item.fps;
+      cpuLoad.value = item.load;
+
+      // 如果有长任务，记录下来（保持最近 20 条）
+      if (item.longTasks && item.longTasks.length > 0) {
+        longTasksHistory.value = [
+          ...longTasksHistory.value,
+          ...item.longTasks,
+        ].slice(-20);
+      }
+
+      // 安全访问 performance 对象（安卓平台可能不存在）
+      let mem = 0;
+      if (typeof performance !== 'undefined' && (performance as any).memory) {
+        mem = Math.round(
+          (performance as any).memory.usedJSHeapSize / 1024 / 1024,
+        );
+        memory.value = mem;
+      }
+
+      fpsHistory.value.shift();
+      fpsHistory.value.push(item.fps);
+      cpuHistory.value.shift();
+      cpuHistory.value.push(item.load);
+      memoryHistory.value.shift();
+      memoryHistory.value.push(mem);
+
+      // 优先级：由于 renderjs 传来的采样点自带时间戳，优先使用它
+      // 如果没有，则使用 logic 层当前生成的 now 向前平摊
+      const eventTs = (item as any).ts;
+      const ts =
+        eventTs !== undefined
+          ? Math.min(now, eventTs)
+          : now - (items.length - 1 - index) * 1000;
+
+      timeHistory.value.shift();
+      timeHistory.value.push(ts);
+    });
+
+    const maxVal = Math.max(...fpsHistory.value, 0);
+    let targetScale = 60;
+    if (maxVal > 144) targetScale = 240;
+    else if (maxVal > 120) targetScale = 144;
+    else if (maxVal > 90) targetScale = 120;
+    else if (maxVal > 60) targetScale = 100;
+
+    startScaleAnimation(targetScale);
+  }
+
+  function startHeartbeat() {
+    if (metricsHandler || heartbeatTimer) return;
+
+    metricsHandler = (data: any) => updateMetrics(data);
+
+    uni.$on(MSG_TYPE.PERF_METRICS, metricsHandler);
+    startLogicMonitor(); // 启动逻辑层监测
+
+    heartbeatTimer = setInterval(() => {
+      const now = Date.now();
+      // 如果超过 2 秒没收到外部(renderjs)数据，说明处于非 H5/App 环境，切换到降级模式
+      if (now - lastUpdateTs.value > 2000) {
+        // 估算逻辑层负载：我们没有真实的渲染 FPS，但可以展示逻辑层的心跳健康度
+        // 这在小程序等平台非常有意义
+        updateMetrics({
+          fps: 0, // 非 H5 无法获取准确渲染帧率
+          load: cpuLoad.value || 0, // 这里的 load 会由 startLogicMonitor 的逻辑更新（如果有的化）
+        });
+      }
+
+      if (timeHistory.value.length > 0) {
+        if (now - lastUpdateTs.value < 800) return;
+        updateMetrics({ fps: fps.value, load: cpuLoad.value });
+      }
+    }, 1000);
+  }
+
+  function stopHeartbeat() {
+    if (metricsHandler) {
+      uni.$off(MSG_TYPE.PERF_METRICS, metricsHandler);
+      metricsHandler = null;
+    }
+    stopLogicMonitor(); // 停止逻辑层监测
+    if (heartbeatTimer) {
+      clearInterval(heartbeatTimer);
+      heartbeatTimer = null;
+    }
+    // clean animation
+    if (animationId) {
+      caf(animationId);
+      animationId = null;
+    }
+    clearData();
+  }
+
+  return {
+    fps,
+    cpuLoad,
+    memory,
+    fpsHistory,
+    cpuHistory,
+    memoryHistory,
+    timeHistory,
+    longTasksHistory,
+    displayMaxScale,
+    lastUpdateTs,
+    performanceMonitorEnabled,
+    initData,
+    updateMetrics,
+    startHeartbeat,
+    stopHeartbeat,
+    startLogicMonitor,
+    stopLogicMonitor,
+    clearData,
+  };
+}