如何在Firefox环境下的React应用中重置VIDEO和SOURCE DOM内存组

在开发基于React的实时媒体播放器时，遇到浏览器（尤其Firefox）中交替显示全屏视频与图片后内存持续上升、无法回落至基准水平的问题。通过开发者工具（F12）的「Memory」标签拍摄快照，切换到聚合视图可观察到SOURCE和VIDEO内存组占用异常。以下是针对性修复方案：

1. 修复定时器依赖引发的不必要组件更新 #

原MediaPlayer组件中，useEffect的依赖包含mediaSwap，导致每次媒体切换时都会销毁并重建定时器，引发额外的组件渲染开销。修改为无依赖，保证定时器仅初始化一次：

import { useEffect, useState } from "react";
import "./MediaStyles.css";
import ImagePlayer from "./ImagePlayer";
import VideoPlayer from "./VideoPlayer";

const MediaPlayer = () => {
  const [mediaSwap, setMediaSwap] = useState<boolean>(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setMediaSwap((swap) => !swap);
    }, 5000);
    return () => clearInterval(interval);
  }, []); // 移除mediaSwap依赖，避免重复创建定时器

  return (
    <>
      <div className="fullscreen-container">
        <div className="media-container">
          {mediaSwap ? <VideoPlayer /> : <ImagePlayer />}
        </div>
      </div>
    </>
  );
};

export default MediaPlayer;

2. 优化VideoPlayer的资源清理逻辑 #

原组件在挂载阶段执行不必要的清理操作，且依赖videoRef.current会导致useEffect频繁触发。调整为仅在组件卸载时彻底释放视频资源，避免内存泄漏：

import { useEffect, useRef } from "react";

const VideoPlayer = () => {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      // 挂载时自动播放（处理可能的播放失败）
      video.play().catch(err => console.error("视频播放失败:", err));
    }

    return () => {
      if (video) {
        // 暂停播放
        video.pause();
        // 移除所有source子元素
        const sources = video.querySelectorAll('source');
        sources.forEach(src => src.remove());
        // 清空视频源并终止加载
        video.src = "";
        video.load();
        // 解除DOM元素引用，帮助垃圾回收
        videoRef.current = null;
      }
    };
  }, []); // 无依赖，仅在挂载/卸载时执行

  return (
    <div>
      <video id="spotlight-video" ref={videoRef} muted playsInline>
        <source src="https://ibcdigitalsignageblob.blob.core.windows.net/fe3c4826-4e72-4cd4-a938-382d67a8badf/assets/2023-09-19_02_10_55_4kvid.mp4" />
      </video>
    </div>
  );
};

export default VideoPlayer;

3. 额外优化建议 #

• 避免频繁销毁重建组件：可将条件渲染改为控制显示隐藏（如style={{ display: mediaSwap ? 'block' : 'none' }}），减少DOM操作开销与内存波动
• Firefox浏览器辅助验证：在Memory面板手动触发垃圾回收按钮，确认内存是否正常回落
• 检查ImagePlayer组件：确保图片资源也能在切换时正确释放，避免类似内存问题

内容的提问来源于stack exchange，提问作者Samuel Zrna