iframe内XHR请求速率下降 无需鼠标悬停维持高请求率方案

这是Chromium内核（Chrome、Edge等主流浏览器）自88版本上线的能效节流策略导致的必然现象：
对于和顶层页面跨域、未获得用户交互激活、也未声明实时媒体权限的iframe，浏览器会将其内部的任务调度最小间隔强制限制为1s，定时器、网络请求队列都会被降频；只有当鼠标悬停在iframe区域、或用户在iframe内产生点击/输入等原生交互时，iframe才会进入高优先级调度状态，恢复正常的执行频率。
你遇到的鼠标移上去就恢复速率、移开就降到1次/秒，完全符合这个节流规则的表现。

按落地成本和有效性从高到低排列：

• 父页嵌入配置优化（同/跨域均适用）
  因为你的应用本身需要调用摄像头采集帧，直接在iframe标签上明确声明对应的实时媒体权限，浏览器会自动将该iframe标记为实时交互类场景，不会套用激进的1s节流规则，同时设置立即加载避免预加载节流：

  <iframe
    src="你的React应用地址"
    allow="camera; microphone; autoplay; display-capture"
    loading="eager"
  ></iframe>
  

  如果父页面是你可控的，等iframe加载完成后主动给iframe授予焦点即可完全解除节流：
  • 同域场景可以直接调用聚焦方法，加个短间隔兜底防止焦点被其他元素抢走：

    const iframe = document.querySelector('iframe')
    iframe.addEventListener('load', () => {
      iframe.contentWindow.focus()
      setInterval(() => iframe.contentWindow.focus(), 5000)
    })
    

  • 跨域场景可以在用户首次和父页面产生交互（点击、滚动等满足顶层用户激活条件）后，通过postMessage通知iframe自行调用window.focus()获取焦点，注意不要无意义循环抢焦点，会被浏览器判定为恶意行为拦截。
• 改造请求调度逻辑
  如果你原来用setInterval/setTimeout控制10次/秒的发送频率，这部分定时器是节流的重灾区，直接替换成requestAnimationFrame配合时间戳差值控制发送间隔即可——requestAnimationFrame在可见的高优先级iframe里会和屏幕刷新率对齐调度，不会被压到1s间隔。
  React侧改造示例：

  import { useEffect, useRef } from 'react'
  
  export default function CameraFrameSender() {
    const lastSendTimestamp = useRef(0)
    const SEND_GAP = 100 // 100ms间隔对应10次/秒的发送速率
  
    useEffect(() => {
      let rafTask = null
      const loopSend = (currentTime) => {
        if (currentTime - lastSendTimestamp.current >= SEND_GAP) {
          // 替换为你实际的摄像头帧采集+XHR发送逻辑
          sendCameraFrameByXhr()
          lastSendTimestamp.current = currentTime
        }
        rafTask = requestAnimationFrame(loopSend)
      }
      rafTask = requestAnimationFrame(loopSend)
      // 初始化主动请求焦点
      window.focus()
      // 页面可见性变化时重新请求焦点，避免切后台回来重新被节流
      const handleVisibilityChange = () => {
        if (!document.hidden) window.focus()
      }
      document.addEventListener('visibilitychange', handleVisibilityChange)
  
      return () => {
        cancelAnimationFrame(rafTask)
        document.removeEventListener('visibilitychange', handleVisibilityChange)
      }
    }, [])
  
    return null
  }
  

• 无效方案避坑
  不要尝试通过JS手动派发mouseover、mousemove事件模拟鼠标悬停，浏览器只会响应isTrusted=true的原生用户交互触发激活，手动派发的事件会被直接忽略，完全达不到效果。

内容的提问来源于stack exchange，提问作者Nimrod Borochov