Есть ли прирост производительности при использовании 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 art, я знаю)

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

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

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