React Native中TensorFlow.js的dataSync()卡顿，如何改用data()实现即时预测？

核心问题原因 #

dataSync()是同步阻塞方法，会占用JS主线程直到获取预测结果，而React Native的相机渲染依赖主线程，这直接导致了画面卡顿。换成异步的data()方法，它返回Promise，不会阻塞主线程，能让相机渲染和预测并行执行。

修改后的代码实现 #

主要修改getPrediction函数，同时增加张量内存清理（避免内存泄漏导致的后续性能下降）：

<TensorCamera
  style={styles.camera}
  flashMode={Camera.Constants.FlashMode.off}
  type={Camera.Constants.Type.back}
  resizeWidth={224}
  resizeHeight={224}
  resizeDepth={3}
  onReady={handleCameraStream}
  autorender={true}
/>

// 相机流处理逻辑保持原结构
const handleCameraStream = (imageAsTensors) => {
  const loop = async () => {
    if (model !== null) {
      if (frameCount % makePredictionsEveryNFrames === 0) {
        const imageTensor = imageAsTensors.next().value;
        await getPrediction(imageTensor);
      }
    }

    frameCount += 1;
    frameCount = frameCount % makePredictionsEveryNFrames;
    requestAnimationFrameId = requestAnimationFrame(loop);
  };
  loop();
};

// 修改后的预测函数
const getPrediction = async (tensor) => {
  if (!tensor) {
    console.log("Tensor not found!");
    return;
  }

  // 使用tf.tidy自动清理中间张量，避免内存泄漏
  const final = tf.tidy(() => {
    const imageData2 = tensor.resizeBilinear([224, 224]);
    const normalized = imageData2.cast("float32").div(127.5).sub(1);
    return tf.expandDims(normalized, 0);
  });

  console.time();
  // 改用异步的data()方法，需添加await
  const prediction = await model.predict(final).data();
  console.timeEnd();
  console.log("Predictions:", prediction);

  // 手动清理最终张量（tf.tidy不会清理返回的张量）
  final.dispose();
  // 清理输入的相机帧张量，避免内存累积
  tensor.dispose();
};

关键修改点说明 #

• 替换dataSync()为await model.predict(final).data()：异步获取结果，不阻塞主线程
• 用tf.tidy()包裹中间张量操作：自动清理imageData2、normalized这些临时张量，防止内存泄漏
• 手动调用dispose()清理final和输入的tensor：tf.tidy不会清理它返回的张量，输入的相机帧张量也需要手动释放，避免内存占用持续升高

内容的提问来源于stack exchange，提问作者Giga Chad