javascript - 使用 web-sys 而不是普通的旧 JavaScript 是否有性能提升？

Question

我用了wasm-bindgen编写一个非常基本的 JS/Wasm webapp，其中灰度转换(用 Rust 编写)应用于 webapp 用户通过 <input type="file"> 上传的图像。并显示在 <canvas> 中.

为此，我必须将图像加载到 WebAssembly 内存空间中，对每个像素应用转换，然后将结果返回到内存空间中，以便 JS 负责显示:

import { memory} from "img-grayscale-wasm/img_grayscale_wasm_bg";
import {MyImage} from "img-grayscale-wasm"

//...

async function processImg(file, width, height){
  const canvas = document.getElementById("pixel-grayscale");

  var resp = await fetch(file.name)
  var bytes = await resp.arrayBuffer()

  const myImage = MyImage.new();
  const ptr = myImage.alloc(bytes.byteLength); 

  // Copy to memory space
  const imgArray = new Uint8Array(memory.buffer, ptr, bytes.byteLength);    
  imgArray.set(new Uint8Array(bytes));

  // transform img
  myImage.read_img(ptr, bytes.byteLength) 
  const grayScalePtr = myImage.to_grayscale(width, height)

  // read from memory space
  const arr = new Uint8ClampedArray(memory.buffer, grayScalePtr, width * height * 4);
  let imageData = new ImageData(arr, width);

  getContextFromCanvas(canvas, width, height).putImageData(imageData, 0, 0);
}

如果我使用 web-sys 中定义的网络 API 绑定(bind)，我想我可以避免将内容来回复制到内存空间的整个过程。 crate ，来自 fetch将文件加载到灰度图片的显示中。

这是我感到困惑的地方:性能方面，使用 web-sys 是否有好处？及其网络的 API 绑定(bind)，而不是全部用 JavaScript 完成？好吧，我想有，但它在哪里？

Answer 1

如果我对您的理解正确，您现在正在使用浏览器方法来回编码数据，以享受 web-sys 的荣耀。我有一些好消息和一些坏消息要告诉你。

好消息是，如果您的代码按照您所说的方式进行布局(这是一个片段会非常方便的地方)，您将获得一份内存副本。

现在，流程如下:

            1              2
         ======>        =====>       \
Browser         WebWorker      Rust   ||
         <======        <=====      <=/
            4              3

(我知道高质量的 ASCII 艺术)

1 是某种用户输入。 2->3 是一个fetch 循环。 4 是回编码。

充其量，如果您的代码是确实以这种方式构建，您可以通过将所有内容移动到web-sys 来摆脱步骤 2 和 3 中的数据副本。您不会删除 1 和 4 上的(相对最少的)数据副本。

根据要去饱和的图像的大小以及运行它的计算机，这可能会或可能不会带来性能提升。我没有研究过 web-sys 的内部结构(这通常不是我的专业领域 - 我是一名嵌入式系统开发人员)，所以我不能谈论 crate 本身的内部结构，但我假设 fetch() 由浏览器完成或通过 web-sys 完成在性能上是相同的。