Есть ли прирост производительности при использовании web-sys вместо простого старого JavaScript?

Question

Я использовал wasm-bindgen для написания очень простого веб-приложения JS / Wasm, в котором преобразование в градациях серого (написанное на Rust) применяется к изображению, загруженному пользователем веб-приложения через <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);
}

Я думаю, что смогу избежать всего процесса копирования материала назад и вперед в пространство памяти, если я использую привязку веб-API, определенную в ящике web-sys, от fetch отображения файла до отображениякартинка в градациях серого.

Вот где я запутался: с точки зрения производительности, есть ли выигрыш в использовании web-sys и привязок его веб-API вместо того, чтобы делать все это в JavaScript?Ну, я полагаю, что есть, но где это?

Answer 1

Если я вас правильно понимаю, вы собираете данные взад и вперед, используя методы браузера в настоящее время, чтобы насладиться славой web-sys.У меня есть хорошие и плохие новости для вас.

Хорошая новость заключается в том, что если ваш код выложен так, как вы его сказали (и вот тут-то и появился бы фрагмент кода).удобно), вы получите одну копию памяти, идущую в каждую сторону.

Прямо сейчас процесс будет следующим:

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

(Качественный ASCII-арт, я знаю)

1 - это какой-то пользовательский ввод.2-> 3 - это цикл fetch.4. Маршаллинг обратно.

В лучшем случае, если ваш код действительно действительно структурирован таким образом, вы можете избавиться от копии данных на шагах 2 и 3, переместив все в web-sys,Вы не избавитесь от (относительно минимальной) копии данных ни на 1, ни на 4.

В зависимости от размера изображения, которое вы обескураживаете, и компьютера, на котором вы его запускаете, этоможет или не может представлять выигрыш в производительности.Я не изучал внутреннюю часть web-sys (как правило, это не моя область знаний - я разработчик встроенных систем), поэтому я не могу говорить о внутренних элементах самого ящика, но я принимаю fetch() каксделано браузером или через web-sys, чтобы быть идентичным по производительности.