perf(traffic): optimize traffic data handling and improve performance

src/components/connection/connection-table.tsx

@@ -3,13 +3,13 @@ import { Box, IconButton, Tooltip } from "@mui/material";
 import {
   ColumnDef,
   ColumnSizingState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
+  SortingState,
   Updater,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import dayjs from "dayjs";
@@ -43,6 +43,50 @@ const reconcileColumnOrder = (
   return [...filtered, ...missing];
 };
 
+const createConnectionRow = (each: IConnectionsItem) => {
+  const { metadata, rulePayload } = each;
+  const chains = [...each.chains].reverse().join(" / ");
+  const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
+  const destination = metadata.destinationIP
+    ? `${metadata.destinationIP}:${metadata.destinationPort}`
+    : `${metadata.remoteDestination}:${metadata.destinationPort}`;
+
+  return {
+    id: each.id,
+    host: metadata.host
+      ? `${metadata.host}:${metadata.destinationPort}`
+      : `${metadata.remoteDestination}:${metadata.destinationPort}`,
+    download: each.download,
+    upload: each.upload,
+    dlSpeed: each.curDownload,
+    ulSpeed: each.curUpload,
+    chains,
+    rule,
+    process: truncateStr(metadata.process || metadata.processPath),
+    time: each.start,
+    source: `${metadata.sourceIP}:${metadata.sourcePort}`,
+    remoteDestination: destination,
+    type: `${metadata.type}(${metadata.network})`,
+    connectionData: each,
+  };
+};
+
+type ConnectionRow = ReturnType<typeof createConnectionRow>;
+
+const areRowsEqual = (a: ConnectionRow, b: ConnectionRow) =>
+  a.host === b.host &&
+  a.download === b.download &&
+  a.upload === b.upload &&
+  a.dlSpeed === b.dlSpeed &&
+  a.ulSpeed === b.ulSpeed &&
+  a.chains === b.chains &&
+  a.rule === b.rule &&
+  a.process === b.process &&
+  a.time === b.time &&
+  a.source === b.source &&
+  a.remoteDestination === b.remoteDestination &&
+  a.type === b.type;
+
 interface Props {
   connections: IConnectionsItem[];
   onShowDetail: (data: IConnectionsItem) => void;
@@ -105,35 +149,6 @@ export const ConnectionTable = (props: Props) => {
     },
   );
 
-  const createConnectionRow = (each: IConnectionsItem) => {
-    const { metadata, rulePayload } = each;
-    const chains = [...each.chains].reverse().join(" / ");
-    const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
-    const Destination = metadata.destinationIP
-      ? `${metadata.destinationIP}:${metadata.destinationPort}`
-      : `${metadata.remoteDestination}:${metadata.destinationPort}`;
-    return {
-      id: each.id,
-      host: metadata.host
-        ? `${metadata.host}:${metadata.destinationPort}`
-        : `${metadata.remoteDestination}:${metadata.destinationPort}`,
-      download: each.download,
-      upload: each.upload,
-      dlSpeed: each.curDownload,
-      ulSpeed: each.curUpload,
-      chains,
-      rule,
-      process: truncateStr(metadata.process || metadata.processPath),
-      time: each.start,
-      source: `${metadata.sourceIP}:${metadata.sourcePort}`,
-      remoteDestination: Destination,
-      type: `${metadata.type}(${metadata.network})`,
-      connectionData: each,
-    };
-  };
-
-  type ConnectionRow = ReturnType<typeof createConnectionRow>;
-
   type ColumnField = Exclude<keyof ConnectionRow, "connectionData">;
 
   interface BaseColumn {
@@ -209,7 +224,7 @@ export const ConnectionTable = (props: Props) => {
         width: 100,
         minWidth: 80,
         align: "right",
-        cell: (row) => dayjs(row.time).fromNow(),
+        // cell filled later with shared relativeNow ticker
       },
       {
         field: "source",
@@ -366,30 +381,68 @@ export const ConnectionTable = (props: Props) => {
     }));
   }, [columns, columnVisibilityModel]);
 
-  const connRows = useMemo<ConnectionRow[]>(
-    () => connections.map((each) => createConnectionRow(each)),
-    [connections],
-  );
+  const prevRowsRef = useRef<Map<string, ConnectionRow>>(new Map());
 
-  const columnDefs = useMemo<ColumnDef<ConnectionRow>[]>(() => {
-    return columns.map((column) => ({
-      id: column.field,
-      accessorKey: column.field,
-      header: column.headerName,
-      size: column.width,
-      minSize: column.minWidth ?? 80,
-      enableResizing: true,
-      meta: {
-        align: column.align ?? "left",
-        field: column.field,
-      },
-      cell: column.cell
-        ? ({ row }) => column.cell?.(row.original)
-        : (info) => info.getValue(),
-    }));
-  }, [columns]);
+  const connRows = useMemo<ConnectionRow[]>(() => {
+    const prevMap = prevRowsRef.current;
+    const nextMap = new Map<string, ConnectionRow>();
+
+    const nextRows = connections.map((each) => {
+      const nextRow = createConnectionRow(each);
+      const prevRow = prevMap.get(each.id);
+
+      if (prevRow && areRowsEqual(prevRow, nextRow)) {
+        nextMap.set(each.id, prevRow);
+        return prevRow;
+      }
+
+      nextMap.set(each.id, nextRow);
+      return nextRow;
+    });
+
+    prevRowsRef.current = nextMap;
+    return nextRows;
+  }, [connections]);
 
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [relativeNow, setRelativeNow] = useState(() => Date.now());
+
+  const columnDefs = useMemo<ColumnDef<ConnectionRow>[]>(() => {
+    return columns.map((column) => {
+      const baseCell: ColumnDef<ConnectionRow>["cell"] = column.cell
+        ? (ctx) => column.cell?.(ctx.row.original)
+        : (ctx) => ctx.getValue() as ReactNode;
+
+      const cell: ColumnDef<ConnectionRow>["cell"] =
+        column.field === "time"
+          ? (ctx) => dayjs(ctx.row.original.time).from(relativeNow)
+          : baseCell;
+
+      return {
+        id: column.field,
+        accessorKey: column.field,
+        header: column.headerName,
+        size: column.width,
+        minSize: column.minWidth ?? 80,
+        enableResizing: true,
+        meta: {
+          align: column.align ?? "left",
+          field: column.field,
+        },
+        cell,
+      } satisfies ColumnDef<ConnectionRow>;
+    });
+  }, [columns, relativeNow]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return undefined;
+
+    const timer = window.setInterval(() => {
+      setRelativeNow(Date.now());
+    }, 5000);
+
+    return () => window.clearInterval(timer);
+  }, []);
 
   const handleColumnSizingChange = useCallback(
     (updater: Updater<ColumnSizingState>) => {
@@ -411,7 +464,6 @@ export const ConnectionTable = (props: Props) => {
 
   const table = useReactTable({
     data: connRows,
-    columns: columnDefs,
     state: {
       columnVisibility: columnVisibilityState,
       columnSizing: columnWidths,
@@ -420,10 +472,11 @@ export const ConnectionTable = (props: Props) => {
     columnResizeMode: "onChange",
     enableSortingRemoval: true,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: sorting.length ? getSortedRowModel() : undefined,
     onSortingChange: setSorting,
     onColumnSizingChange: handleColumnSizingChange,
     onColumnVisibilityChange: handleColumnVisibilityChange,
+    columns: columnDefs,
   });
 
   const rows = table.getRowModel().rows;
@@ -432,7 +485,7 @@ export const ConnectionTable = (props: Props) => {
     count: rows.length,
     getScrollElement: () => tableContainerRef.current,
     estimateSize: () => ROW_HEIGHT,
-    overscan: 8,
+    overscan: 4,
   });
 
   const virtualRows = rowVirtualizer.getVirtualItems();

src/components/home/enhanced-canvas-traffic-graph.tsx

@@ -147,6 +147,7 @@ export const EnhancedCanvasTrafficGraph = memo(
     });
     const lastDataTimestampRef = useRef<number>(0);
     const resumeCooldownRef = useRef<number>(0);
+    const dataStaleRef = useRef<boolean>(false);
 
     // 当前显示的数据缓存
     const [displayData, dispatchDisplayData] = useReducer(
@@ -197,6 +198,7 @@ export const EnhancedCanvasTrafficGraph = memo(
     useEffect(() => {
       if (displayData.length === 0) {
         lastDataTimestampRef.current = 0;
+        dataStaleRef.current = false;
         fpsControllerRef.current.target = GRAPH_CONFIG.targetFPS;
         fpsControllerRef.current.samples = [];
         fpsControllerRef.current.lastAdjustTime = 0;
@@ -209,6 +211,11 @@ export const EnhancedCanvasTrafficGraph = memo(
         displayData[displayData.length - 1]?.timestamp ?? null;
       if (latestTimestamp) {
         lastDataTimestampRef.current = latestTimestamp;
+        const age = Date.now() - latestTimestamp;
+        const stale = age > STALE_DATA_THRESHOLD;
+        dataStaleRef.current = stale;
+      } else {
+        dataStaleRef.current = false;
       }
     }, [displayData]);
 
@@ -986,7 +993,11 @@ export const EnhancedCanvasTrafficGraph = memo(
 
     // 受控的动画循环
     useEffect(() => {
-      if (!isWindowFocused || displayData.length === 0) {
+      if (
+        !isWindowFocused ||
+        displayData.length === 0 ||
+        dataStaleRef.current
+      ) {
         if (animationFrameRef.current) {
           cancelAnimationFrame(animationFrameRef.current);
           animationFrameRef.current = undefined;
@@ -1002,9 +1013,25 @@ export const EnhancedCanvasTrafficGraph = memo(
           return;
         }
 
+        const lastDataAge =
+          lastDataTimestampRef.current > 0
+            ? Date.now() - lastDataTimestampRef.current
+            : null;
         const targetFPS = fpsControllerRef.current.target;
         const frameBudget = 1000 / targetFPS;
 
+        if (
+          typeof lastDataAge === "number" &&
+          lastDataAge > STALE_DATA_THRESHOLD
+        ) {
+          if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = undefined;
+          }
+          dataStaleRef.current = true;
+          return;
+        }
+
         if (
           currentTime - lastRenderTimeRef.current >= frameBudget ||
           !isInitializedRef.current

src/components/home/enhanced-traffic-stats.tsx

@@ -14,8 +14,7 @@ import {
   alpha,
   useTheme,
 } from "@mui/material";
-import { useRef, memo, useMemo } from "react";
-import { ReactNode } from "react";
+import { ReactNode, memo, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import { TrafficErrorBoundary } from "@/components/common/traffic-error-boundary";
@@ -147,9 +146,12 @@ export const EnhancedTrafficStats = () => {
   const trafficRef = useRef<EnhancedCanvasTrafficGraphRef>(null);
   const pageVisible = useVisibility();
 
+  // 是否显示流量图表
+  const trafficGraph = verge?.traffic_graph ?? true;
+
   const {
     response: { data: traffic },
-  } = useTrafficData();
+  } = useTrafficData({ enabled: trafficGraph && pageVisible });
 
   const {
     response: { data: memory },
@@ -159,9 +161,6 @@ export const EnhancedTrafficStats = () => {
     response: { data: connections },
   } = useConnectionData();
 
-  // 是否显示流量图表
-  const trafficGraph = verge?.traffic_graph ?? true;
-
   // Canvas组件现在直接从全局Hook获取数据，无需手动添加数据点
 
   // 使用useMemo计算解析后的流量数据

src/components/layout/layout-traffic.tsx

@@ -29,7 +29,7 @@ export const LayoutTraffic = () => {
 
   const {
     response: { data: traffic },
-  } = useTrafficData();
+  } = useTrafficData({ enabled: trafficGraph && pageVisible });
   const {
     response: { data: memory },
   } = useMemoryData();

src/components/proxy/use-filter-sort.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useReducer } from "react";
+import { useEffect, useMemo, useReducer, useRef } from "react";
 
 import { useVerge } from "@/hooks/use-verge";
 import delayManager from "@/services/delay";
@@ -22,6 +22,10 @@ export default function useFilterSort(
 ) {
   const { verge } = useVerge();
   const [_, bumpRefresh] = useReducer((count: number) => count + 1, 0);
+  const lastInputRef = useRef<{ text: string; sort: ProxySortType } | null>(
+    null,
+  );
+  const debounceTimer = useRef<number | null>(null);
 
   useEffect(() => {
     let last = 0;
@@ -40,7 +44,7 @@ export default function useFilterSort(
     };
   }, [groupName]);
 
-  return useMemo(() => {
+  const compute = useMemo(() => {
     const fp = filterProxies(proxies, groupName, filterText, searchState);
     const sp = sortProxies(
       fp,
@@ -57,6 +61,39 @@ export default function useFilterSort(
     searchState,
     verge?.default_latency_timeout,
   ]);
+
+  const [result, setResult] = useReducer(
+    (_prev: IProxyItem[], next: IProxyItem[]) => next,
+    compute,
+  );
+
+  useEffect(() => {
+    if (debounceTimer.current !== null) {
+      window.clearTimeout(debounceTimer.current);
+      debounceTimer.current = null;
+    }
+
+    const prev = lastInputRef.current;
+    const stableInputs =
+      prev && prev.text === filterText && prev.sort === sortType;
+
+    lastInputRef.current = { text: filterText, sort: sortType };
+
+    const delay = stableInputs ? 0 : 150;
+    debounceTimer.current = window.setTimeout(() => {
+      setResult(compute);
+      debounceTimer.current = null;
+    }, delay);
+
+    return () => {
+      if (debounceTimer.current !== null) {
+        window.clearTimeout(debounceTimer.current);
+        debounceTimer.current = null;
+      }
+    };
+  }, [compute, filterText, sortType]);
+
+  return result;
 }
 
 export function filterSort(