为什么从帆布转换为屏幕范围会提高抽签和getimagedata的性能？

Question

我正在通过网络摄像头的实时媒体流进行实时过程，该过程要求FPS停留在30fps左右。 getimagedata是我的主要瓶颈之一，它要求 22ms 从画布上提取iMagedata对象，只剩下11毫秒才能进行其他操作。

这是我对设置进行此简单更改后的简单片段

  video = document.createElement("video");
  inputCanvas = document.createElement("canvas");
  inputCanvas.width = width;
  inputCanvas.height = height;
  inputCanvasCtx = inputCanvas.getContext("2d");
  video.width = width;
  video.height = height;
  video.srcObject = stream;

// And using the requestVideoFrameCallback API, whenever a frame is presented, this callback is triggered
  function onFrame(now, metadata){

     inputCanvasCtx.drawImage(video, 0, 0);;

     // Get frame from our canvas.
     frame = inputCanvasCtx.getImageData(0,0,inputCanvas.width, inputCanvas.height);

     // Other computations
  }

，而没有更改其他任何东西，我设法提取 11ms 的框架，这是一半的时间，我无法理解为什么。我只用两行将常规画布转换为屏幕范围。

  video = document.createElement("video");
  inputCanvas = document.createElement("canvas");
  inputCanvas.width = width;
  inputCanvas.height = height;
  offscreen = inputCanvas.transferControlToOffscreen(); // Changed line
  inputCanvasCtx = offscreen.getContext("2d"); // Changed line
  video.width = width;
  video.height = height;
  video.srcObject = stream;

我将感谢有关此事的任何见解。