WebAssembly (сокращенно WASM) - это новый веб-стандарт, разработанный группой сообщества W3C. Первый выпуск -v1.0- поставляется с основными движками браузеров (Microsoft Edge, Firefox, Safari и Google Chrome). Кроме того, WebAssembly - это первый новый язык, который полностью поддерживается всеми основными браузерами, начиная с Javascript.

WebAssembly - это низкоуровневый двоичный формат, который был создан для обеспечения высокой производительности, меньшего использования памяти и переносимости на разные платформы. Теперь его можно создать на C / C ++ и Rust. Кроме того, другие языки программирования, такие как C #, находятся на пути к этому. Фактически, сейчас C # находится в стадии сканирования модульности (краткое описание находится в оставшейся части статьи).

Caution! WebAssembly isn't opponent of Javascript.
Yes! WebAssembly is enough to create a complete web application, like Javascript. But they can be perfect couple for high-performance with minimum effort. Because they are strong in different spots.

Представление

Как я сказал в начале, WebAssembly - это новый стандарт для Интернета. Его производительность увеличивается день ото дня.

Зачем нам нужен WebAssembly?

Как вы знаете, такие процессы, как редактирование видео и музыки, обработка сигналов и 3D-рендеринг, требуют высокоскоростных вычислений и высокой производительности. Для этого очень важно оптимальное использование CPU и GPU. Прямо здесь к игре присоединяется WebAssembly. WebAssembly, разработанный на других языках, лучше, чем Javascript для всех описанных выше процессов.

Еще более быстрое время запуска - компилятор Liftoff
Как вы знаете, V8 - это высокопроизводительный механизм JavaScript и веб-сборки с открытым исходным кодом от Google, разработанный на C ++. С этим компилятором время запуска быстрее, чем раньше (TurboFan - более старый движок).

Liftoff позволяет избежать затрат времени и памяти на создание IR и генерирует машинный код за один проход по байт-коду функции WebAssembly.

С другой стороны, команда Mozilla упорно работает над повышением производительности веб-сборки. Их последняя статистика производительности браузера, которая была опубликована, приведена ниже.

Потоки
WebAssembly поддерживает потоки для Интернета, такие как Pthreads. Таким образом, вы можете использовать не только ядро ​​ЦП (им управляет ОС), и вы можете запускать процесс параллельно. Потоки - это часть веб-воркеров.

Что такое Web Worker?
Web Worker - это независимый от браузера JavaScript, который может работать в фоновом режиме. Каждый рабочий работает на ядре ЦП, поэтому производительность процесса пользовательского интерфейса не изменяется. Там вы можете получить доступ к библиотекам WASM и делать большие «дела» с меньшими потерями в производительности.

Please don't forget! Some features are in the beta versions of the browsers. For example, Liftoff engine is available since Chrome 69, Thread support is available since Chrome 70 (when flags updated as Enable).

Потоковая компиляция
WebAssembly поддерживает потоковую компиляцию. Что это такое?

Модули WebAssembly могут быть загружены частично. Вы можете импортировать файлы WASM в определенное место в определенное время, как вы хотите, как в следующем примере. Таким образом, вам не нужно импортировать модули из инициализации. вы можете разработать приложение с более быстрым запуском.

//main.js
var importObject = {
   env: { rand: arg => console.log(arg) }
};
WebAssembly.instantiateStreaming(
   fetch("util.wasm"),
   importObject
).then(obj => {
   obj.instance.exports._Z9factoriali(3)
});

Свойства, выделенные жирным шрифтом, являются важными точками сверху. Но прежде чем применять это, мы должны понять WAT.

Что такое WAT?
WAT - это текстовое представление WASM, которое называется текстовым форматом WebAssembly. Вы можете обновлять файлы WASM из WAT и наоборот. Но для этого нам нужен инструмент. Я использую WasmExplorer для создания WASM и WAT из C / C ++.

Теперь мы можем объяснить выделенные свойства.

Конвертированный файл «Util.c» выглядит следующим образом.

//util.c
#include <stdlib.h>
#include <time.h>
int factorial(int number)
{
  if (number > 1)
  {
    return number * factorial(number - 1);
  }
  else
  {
    return 1;
  }
}
int randomizer(int min, int max)
{
  return (rand() % (max - min + 1)) + min;
}

Сгенерированный файл «Util.wat» находится в следующем (нарезанный, исходный файл слишком длинный).

(module
 (type $FUNCSIG$i (func (result i32)))
 (import "env" "rand" (func $rand (result i32)))
 (table 0 anyfunc)
 (memory $0 1)
 (export "memory" (memory $0))
 (export "_Z9factoriali" (func $_Z9factoriali))
 (export "_Z10randomizerii" (func $_Z10randomizerii))
 (func $_Z9factoriali (; 1 ;) (param $0 i32) (result i32)
  (local $1 i32)
  (local $2 i32)
  (set_local $2
   (i32.const 1)
  )
  ...

Если вы хотите использовать потоковую компиляцию, вам понадобится такой файл WAT. Ниже я попытаюсь показать вам, как создать importObject для instantiateStreaming.

env (строка 3 Util.wat) - ›env (строка 2 main.js)
rand (строка Util. wat, строка 3) - ›rand (main.js, строка 2)
_Z9factoriali (Util.wat, строка 7) -› _Z9factoriali (main.js, строка 9)

При желании можно использовать функцию _Z10randomizerii (строка 8 Util.wat).

Но, не волнуйтесь, сверху есть более простой способ :)

Emscripten

Emscripten - это набор инструментов для компиляции в asm.js и WebAssembly, созданный с использованием LLVM, который позволяет запускать C и C ++ в Интернете с почти нативной скоростью без плагинов.

Инструкции по установке Emscripten находятся здесь.

Вы можете сгенерировать файлы WASM и JS с помощью инструмента интерфейса командной строки emscripten и легко импортировать файл js на свою страницу. Для этого вам нужно немного обновить файл util.c.

//util.c
#include <stdlib.h>
#include <time.h>
#include <emscripten/emscripten.h>
int main(int argc, char **argv)
{
   srand(time(NULL));
   printf("UTIL.wasm loaded.\n");
   return 0;
}
int EMSCRIPTEN_KEEPALIVE factorial(int number)
{
   if (number > 1)
   {
      return number * factorial(number - 1);
   }
   else
   {
      return 1;
   }
}
int EMSCRIPTEN_KEEPALIVE randomizer(int min, int max)
{
   return (rand() % (max - min + 1)) + min;
}

Файл util.c будет преобразован в файл WASM и JS с помощью следующей команды.

[Definition]
emcc <C/C++ File path> -s WASM=1 -o <Output File Path>
[Example]
emcc ./module/util/util.c -s WASM=1 -o util.js

Эта команда сгенерирует файлы «util.wasm» и «util.js». После этого все остальное легко :)

Вы импортируете «util.js» как скрипт и будете использовать экспортированные функции, например. Все функции будут в объекте «окно».

<script src="util.js"></script>
<script>
   _randomizer(minValue, maxValue);
   _factorial(value)
</script>

Я создал страницу с помощью этого метода, вы можете увидеть ниже.
«UTIL.wasm загружен». сообщение появится из «основной» функции WASM. И вы можете использовать экспортированные функции в любое время.

Конечно, это далеко не все методы использования WebAssembly. Доступны и другие методы импорта, такие как wasm-loader.

wasm-loader - это загрузчик бинарных файлов для webpack. Для этого пока нет статистики по эффективности, но важно увидеть осуществимость.

Портативность - Гибкость

Переносимость - это цель сообщества WebAssembly. Они стремятся использовать сторонние библиотеки, библиотеку, разработанную для других платформ, и ту же библиотеку для кросс-платформ. И они это сделали. Мы можем использовать большинство библиотек для Интернета.

Blazor

Blazor - это экспериментальная веб-платформа .NET, использующая C # и HTML, работающая в браузере.

Как я сказал в начале, C # находится в стадии сканирования. Почему?
Потому что, как я понимаю, мы пока не можем экспортировать модуль, разработанный на C #. По крайней мере, официально он пока недоступен. Но если вы хотите начать разработку Blazor, вы можете это сделать. Он похож на синтаксис MVC Razor.

С другой стороны, некоторые популярные библиотеки пока недоступны, например System.Generics-. Вы можете использовать некоторые ограниченные возможности.

Кто пользуется?

Есть несколько крупных продуктов.

Вы что-то заметили?
Всем им нужно что-то рендерить и высокая производительность процессов. Поэтому следует хорошо подумать, использовать или не использовать.

Заключение

Как вы знаете, мы каждый день слышим о каких-то новых технологиях, библиотеках, методах компиляции, сборщиках, фреймворках. Как правило, они разработаны для повышения производительности интерфейсных технологий. WebAssembly - одна из них. Может быть, лучший из них. Но для чего?

По моему личному мнению, статистика использования WebAssembly еще долго будет оставаться на низком уровне. Но причина неплохая. На самом деле, большинству веб-приложений не нужна высокая производительность, многопоточность или что-то в этом роде. Например, я думаю, что такой блог-сайт, как Medium, никогда не понадобится, или, насколько я понимаю, youtube.com еще не использует, может быть, никогда не будет. С другой стороны, Maybe Pixlr Online Photo Editor или некоторые сайты Online Video Converter должны использовать эту технологию.

использованная литература