[Tauri][React]性能采集工具数据展示卡顿优化

[nzcv]

[Tauri][React]性能采集工具数据展示卡顿优化

Tauri + React 写的 Android 性能采集工具（每秒通过 adb 采集系统内存与进程 PSS 并实时画折线图），数据展示「时不时卡一下」。排查后定位到两个根因：后端同步命令阻塞 UI 主线程 + 前端每次渲染都全量重算图表。

根因 1（主因）：Tauri 同步命令阻塞主线程

每秒采集会调用 adb_system_memory（cat /proc/meminfo）和 adb_pss_detail（dumpsys meminfo，较慢，常需几百毫秒）。这两个原本是同步命令。

Tauri v2 官方文档明确说明：

Commands without the async keyword are executed on the main thread unless defined with #[tauri::command(async)].

也就是说，同步命令运行在主线程上，每秒采集都会在 adb 子进程返回前冻结 WebView —— 这正是周期性卡顿的来源。

修复：用 spawn_blocking 把阻塞子进程调用挪到专用线程池

把命令改成 async fn，并通过 tauri::async_runtime::spawn_blocking 执行阻塞逻辑（注意 #[tauri::command(async)] 内部用的是 spawn 而非 spawn_blocking，对长阻塞任务不够，所以显式用 spawn_blocking）。

/// 把阻塞的 adb 逻辑丢到专用线程池，避免冻结 Tauri 主线程/UI。
async fn spawn_adb<T, F>(f: F) -> Result<T, String>
where
    F: FnOnce() -> Result<T, String> + Send + 'static,
    T: Send + 'static,
{
    tauri::async_runtime::spawn_blocking(f)
        .await
        .map_err(|e| format!("adb 任务执行失败: {e}"))?
}

命令薄封装，真正的同步逻辑保留在私有函数里：

#[tauri::command]
pub async fn adb_pss_detail(serial: String, pid: u32) -> Result<PssDetail, String> {
    spawn_adb(move || pss_detail(&serial, pid)).await
}

fn pss_detail(serial: &str, pid: u32) -> Result<PssDetail, String> {
    // ...原同步实现（run_adb + 解析）...
}

提示：把签名里的 &serial（原 String）改成 &str 后，run_adb(&["-s", serial, ...]) 直接传 serial 即可，不要再写 &serial（会变成 &&str）。

根因 2：前端每次渲染全量重算图表

TimelineView 在每次渲染都会对每个分组的每条曲线扫描全部样本算 Y 轴最大值、并拼接折线点串（Memory Detail 有 18 条曲线 × 最多 330 个样本）。任何无关状态变化（搜索框输入、折叠面板、切换某个分组）都会触发所有图表重算。

修复：拆 React.memo 组件 + useMemo 缓存重计算

• 把每个图表分组拆成独立的 React.memo 组件 ChartGroup。
• 把「最大值扫描 + 折线点串生成」放进 useMemo，只在样本缓冲 / 时间窗口 / 本组可见性变化时才重算。
• 用字符串签名 hiddenSig（如 "01001"）传递每组显隐状态，而不是每次 toggle 都换 identity 的 Set，这样 React.memo 能按值比较、正确跳过重渲染。
• 把回调（toggleSeries / setGroupSeries / toggleHidden）用 useCallback 固定 identity，避免破坏记忆化。

const ChartGroup = memo(function ChartGroup({ group: g, samples, startT, windowStartSec, hiddenSig, ... }: ChartGroupProps) {
  const hiddenByIndex = useMemo(
    () => g.series.map((_, i) => hiddenSig[i] === "1"),
    [g.series, hiddenSig]
  );

  // 仅在 samples / 窗口 / 本组可见性变化时重算
  const chart = useMemo(() => {
    let max = 0;
    for (let i = 0; i < g.series.length; i++) {
      if (hiddenByIndex[i]) continue;
      for (const sample of samples) {
        const v = valueAt(sample, g.source, g.series[i]);
        if (v > max) max = v;
      }
    }
    if (max <= 0) max = 1;
    const axisMax = max * 1.1;
    const lines = g.series.map((s, i) => ({
      name: s.name, color: s.color, hidden: hiddenByIndex[i],
      points: hiddenByIndex[i] ? "" : pointsFor(samples, startT, windowStartSec, g.source, s, axisMax),
    }));
    return { axisMax, lines };
  }, [g, hiddenByIndex, samples, startT, windowStartSec]);
  // ...render...
});

父组件渲染时按值传 hiddenSig：

{groups.map((g) => (
  <ChartGroup
    key={g.key}
    group={g}
    samples={samples}
    startT={startT}
    windowStartSec={windowStartSec}
    hiddenSig={g.series
      .map((s) => (hiddenSeries.has(seriesKey(g.key, s.name)) ? "1" : "0"))
      .join("")}
    onToggleSeries={toggleSeries}
    onSetGroupSeries={setGroupSeries}
    onToggleHidden={onToggleHidden}
    /* ... */
  />
))}

附带问题：Vite Fast Refresh 报 export 不兼容

改完后 dev 启动报：

[vite] (client) hmr invalidate /src/views/TimelineView.tsx
Could not Fast Refresh ("PARAM_GROUP_KEY" export is incompatible).

原因：React Fast Refresh 要求一个文件只导出组件。TimelineView.tsx 同时 export default（组件）和 export const PARAM_GROUP_KEY（普通常量），二者混在一起会让 HMR 失效。

修复：把非组件常量拆到独立模块

新建 src/views/metricGroups.ts，存放 PARAM_GROUPS、PARAM_GROUP_KEY 及类型 MetricGroup / Series / Source；TimelineView.tsx 与 MainView.tsx 都从该模块导入。TimelineView.tsx 此后只导出默认组件，Fast Refresh 恢复正常。

推荐组合 / 排查清单

• Tauri 卡 UI：凡是耗时（IO / 子进程 / CPU）的命令，一律 async fn + tauri::async_runtime::spawn_blocking，别用裸同步 #[tauri::command]。
• React 实时图表卡顿：高频更新的列表/图表拆 React.memo，重计算包 useMemo，回调包 useCallback，集合类状态尽量用「按值比较的签名」传子组件。
• Fast Refresh 失效：组件文件只导出组件，常量/工具函数/类型拆到单独文件。

[nzcv]

Tauri v2 + React 通过 ADB 采集 Android 内存（系统内存 + 进程 PSS）

场景：用 Tauri v2 + React 做一个 Android 性能采集工具（类似 UWA/Gears 的界面）。本条记录如何从全 mock 切换到真实数据采集——设备/进程列表、系统内存（/proc/meminfo）、单进程 PSS 明细（dumpsys meminfo），以及时间轴折线「逐步向右、满 5 分钟后平移」的实现。adb 走系统 PATH。

1. 关键 ADB 命令

# 设备列表（带 model 等信息）
adb devices -l
# List of devices attached
# emulator-5554   device product:sdk model:Pixel_10 device:... transport_id:1

# 进程列表（固定列顺序，便于解析）
adb -s <serial> shell ps -A -o PID,NAME
# 旧设备回退：ps -o PID,NAME / ps

# 系统整机内存（kB）
adb -s <serial> shell cat /proc/meminfo
# MemTotal / MemAvailable / SwapTotal / SwapFree / Committed_AS ...

# 单进程 PSS 内存明细（按 pid）
adb -s <serial> shell dumpsys meminfo <pid>

dumpsys meminfo 的 PSS 表（取 Pss Total 列，单位 kB），行名到指标的映射：

TOTAL -> PSS Total      .apk mmap -> APK mmap     .dex mmap -> DEX mmap
.oat mmap -> OAT mmap   .art mmap -> ART mmap     .so mmap -> SO mmap
.jar mmap -> JAR mmap   Native Heap / Dalvik Heap / Dalvik Other
Stack / Ashmem          Gfx dev -> Gfx Dev        Other dev -> Other Dev
Other mmap / EGL mtrack / GL mtrack / Unknown

注意：dumpsys meminfo 后面还有 App Summary 段会重复部分标签，解析到 App Summary 要 break，只取第一张 PSS 表。

2. Rust 侧 Tauri command（不需要 shell 插件，原生 std::process::Command 即可）

要点：Windows 下加 CREATE_NO_WINDOW（0x08000000）防止弹出黑框；命令统一返回 Result<T, String>。

use std::process::Command;

#[cfg(windows)]
const CREATE_NO_WINDOW: u32 = 0x0800_0000;

fn adb() -> Command {
    let mut cmd = Command::new("adb");
    #[cfg(windows)]
    {
        use std::os::windows::process::CommandExt;
        cmd.creation_flags(CREATE_NO_WINDOW);
    }
    cmd
}

fn run_adb(args: &[&str]) -> Result<String, String> {
    let out = adb().args(args).output()
        .map_err(|e| format!("无法运行 adb，请确认已安装并加入 PATH: {e}"))?;
    if !out.status.success() {
        return Err(format!("adb {} 失败: {}", args.join(" "),
            String::from_utf8_lossy(&out.stderr).trim()));
    }
    Ok(String::from_utf8_lossy(&out.stdout).into_owned())
}

#[tauri::command]
fn adb_system_memory(serial: String) -> Result<SystemMemory, String> {
    let s = run_adb(&["-s", &serial, "shell", "cat", "/proc/meminfo"])?;
    // 解析 "Key:  12345 kB" -> HashMap<String, f64(kB)>
    // total = MemTotal/1048576 (GB)
    // available = MemAvailable; swap = (SwapTotal - SwapFree); virtual = Committed_AS
    // ...
}

注册到 invoke_handler（lib.rs）：

mod adb;
tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![
        adb::adb_list_devices,
        adb::adb_list_processes,
        adb::adb_system_memory,
        adb::adb_pss_detail,
    ])

纯进程调用不涉及 webview，所以 不需要改 capabilities，也不用 tauri-plugin-shell。

3. 前端采样循环 + 滚动缓冲

@tauri-apps/api 的 invoke 直接调；采集时每秒采样一次，写入滚动缓冲（缓冲略大于 5 分钟窗口，留左边界余量）：

const SAMPLE_INTERVAL_MS = 1000;
const MAX_SAMPLES = 330; // > 300（5min @ 1s）

useEffect(() => {
  if (!collecting || !selection) return;
  let cancelled = false;
  const tick = async () => {
    const [usage, pss] = await Promise.all([
      systemMemory(selection.serial),
      pssDetail(selection.serial, selection.pid),
    ]);
    if (cancelled) return;
    const now = Date.now();
    setStartTime((p) => p ?? now);          // 会话起点，独立于缓冲裁剪
    setSamples((prev) => {
      const next = [...prev, { t: now, usage, pss: pss.items }];
      return next.length > MAX_SAMPLES ? next.slice(-MAX_SAMPLES) : next;
    });
  };
  void tick();
  const id = setInterval(tick, SAMPLE_INTERVAL_MS);
  return () => { cancelled = true; clearInterval(id); };
}, [collecting, selection]);

连续失败（如拔线/无 adb）累计 3 次自动停止采集并提示错误。

4. 折线「向右生长 + 满 5 分钟平移时间轴」

核心：按真实经过时间而非数组下标定位 x，配合滑动窗口。

const WINDOW_SEC = 300;                 // 可视窗口 5 分钟
const startT = startTime ?? samples[0]?.t ?? 0;
const lastT  = samples.at(-1)?.t ?? startT;
const elapsedSec = startTime ? (lastT - startT) / 1000 : 0;
const windowStartSec = Math.max(0, elapsedSec - WINDOW_SEC); // 满了才 > 0

// 每个样本：sec = (sample.t - startT)/1000
// x = ((sec - windowStartSec) / WINDOW_SEC) * 1000   // viewBox 0..1000
// sec < windowStartSec 的点丢弃（滚出左边界）

• 未满 5 分钟：windowStartSec=0，折线从左往右生长。
• 超过 5 分钟：窗口起点跟着前移，图表恒显示最近 5 分钟；刻度标签从 windowStartSec 起算（如 7 分钟时显示 2:00 … 7:00），播放头按经过时间定位，时间轴随之平移。

关键是 startTime 用一个独立于缓冲裁剪的会话起点（每次重新选择设备/应用时重置），否则裁剪掉旧样本后 elapsed 会错乱。

推荐组合

• 采集后端：std::process::Command 调 adb（PATH），Windows 加 CREATE_NO_WINDOW，返回 Result<_, String>。
• 指标：/proc/meminfo（整机）+ dumpsys meminfo <pid>（进程 PSS，取首张表的 Pss Total 列）。
• 前端：1s 采样 + 滚动缓冲（330）+ 按时间定位的 5 分钟滑动窗口。