Разработка

Почему WebAssembly значительно изменит веб

Дэвид Брайант из Mozilla рассказал о технологии WebAssembly, цель которой — приблизить веб-приложения к нативным по производительности и скорости запуска.

Опубликовано

7 лет назад

29.09.2017

Автор:

Анна Гуляева

Если вы ещё не слышали о WebAssembly: это развивающийся стандарт, попытка приблизить по быстродействию веб-приложения к нативным. WebAssembly — это одно из крупнейших достижений веб-платформы за последнее десятилетие.

Этот стандарт позволит создавать удивительные видеоигры и веб-приложения для таких задач, как компьютерный дизайн, редактирование фото и видео и визуализации данных. Многие существующие приложения для продуктивности (т.е. email, социальные сети и текстовые редакторы) и JavaScript-фреймворки, вероятно, будут использовать WebAssembly для значительного сокращения времени загрузки и улучшения производительности. В отличие от других подходов для достижения нативного опыта, WebAssembly не требует встроенных плагинов, а запускается внутри веб-платформы. Это значит, что разработчики могут интегрировать библиотеки WebAssembly для сложных вычислительных процессов (сжатие данных, распознавание лиц) в существующие JavaScript-приложения для снижения нагрузки.

Чтобы получить общее представление о WebAssembly и понять, как компании собираются использовать технологию, посмотрите это видео. Вы услышите инженеров из Mozilla, Autodesk, Epic и Unity.

JavaScript изначально был задуман как легкий язык для довольно простых задач. Например, для того, чтобы убедиться, что вы заполнили форму правильно. Он должен был быть простым для начинающих разработчиков.

С тех пор многое изменилось. Современные веб-приложения стали сложными программами с кодом как на стороне клиента, так и на стороне сервера. Большая часть этого кода написана на JavaScript.

Но при всех преимуществах языка JavaScript и написанных на нем движков, у него есть значительные врожденные ограничения, из-за которых JavaScript не подходит для определенных сценариев. Например, из-за выполнения JavaScript браузер не может запустить приложение так же быстро, как нативную программу, написанную на другом языке.

Мы всегда знали об этом, но никогда не хотели ограничивать амбиции веба. Несколько лет назад мы начали исследовательский проект по созданию виртуальной машины в браузере для безопасного запуска JavaScript и других языков с высокой скоростью. В частности, мы поставили такую цель — запуск современных игр в Firefox без плагинов. При достижении этой задачи мы бы смогли запустить почти любое приложение. Нашим первым крупным шагом после продолжительных экспериментов стала демонстрация запуска в Firefox игр на популярных движках при помощи низкоуровневого сабсета (подмножества) JavaScript под названием asm.js.

Субязык asm.js работал на удивление хорошо, и мы знали, что этот подход сработает даже лучше при использовании в качестве веб-стандарта. Мы использовали asm.js только для того, чтобы доказать свою точку зрения. Затем мы начали сотрудничать с другими браузерами, чтобы создать такой стандарт, который будет запускаться как часть браузера. Вместе мы создали WebAssembly и вскоре надеемся расширять стандарт на другие браузеры.

[notice]Технология WebAssembly – это инициатива, направленная на создание безопасного, переносимого и быстрого для загрузки и исполнения формата кода, подходящего для Web. WebAssembly – это не язык программирования. Это – цель компиляции, у которой имеются спецификации текстового и бинарного форматов. Это означает, что другие низкоуровневые языки, такие, как C/C++, Rust, Swift, и так далее, можно скомпилировать в WebAssembly. WebAssembly даёт доступ к тем же API, что и браузерный JavaScript, органично встраивается в существующий стек технологий. Для компиляции кода в формат WebAssembly используется Emscripten.

Emscripten – это компилятор из байт-кода LLVM в JavaScript. То есть, с его помощью можно скомпилировать в JavaScript программы, написанные на C/C++ или на любых других языках, код на которых можно преобразовать в формат LLVM. Emscripten предоставляет набор API для портирования кода в формат, подходящий для веб. Этому проекту уже много лет, в основном его используют для преобразования игр в их браузерные варианты. Emscripten позволяет достичь высокой производительности благодаря тому, что он генерирует код, соответствующий стандартам Asm.js, о котором ниже, но недавно его успешно оснастили поддержкой WebAssembly.

Asm.js – это низкоуровневое оптимизированное подмножество JavaScript, обеспечивающее линейный доступ к памяти с помощью типизированных массивов и поддерживающее аннотации с информацией о типах данных. Asm.js позволяет повысить производительность решений. Это – тоже не новый язык программирования, поэтому, если браузер его не поддерживает, Asm.js-код будет выполняться как обычный JavaScript, то есть, от его использования не удастся получить прироста производительности.
[/notice]

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

В каком-то смысле WebAssembly меняет работу веб-разработчика и фундаментальные свойства веба. С помощью WebAssembly и сопутствующего набора инструментов программы, написанные на C и C++, могут быть перемещены в веб для запуска с близкой к нативным приложениям производительностью. Мы ожидаем, что, с развитием WebAssembly, вы сможете поступать так же с языками создания мобильных приложений — то есть, Java, Swift и C#.

Если вам интересны подробности истории WebAssembly, посмотрите это видео.

Технология WebAssembly доступна в Firefox для Windows, MacOS, Linux и Android (а также поддерживается Google Chrome, Microsoft Edge и планируется в Safari). Мы особенно рады её потенциалу на мобильных устройствах — ведь не все приложения должны быть нативными?

Чтобы попробовать приложения, использующие WebAssemble, посмотрите на это демо Zen Garden. Видеоверсию вы можете посмотреть ниже.

Следующая таблица показывает три различных представления одного и того же исходного кода по мере трансляции его в wasm:

Исходный код на C	«линейный ассемблерный байт-код»	бинарный код WASM
int factorial(int n) { if (n == 0) return 1; else return n * factorial(n-1); }	get_local 0 i64.eqz if i64 i64.const 1 else get_local 0 get_local 0 i64.const 1 i64.sub call 0 i64.mul end	20 00 50 04 7e 42 01 05 20 00 20 00 42 01 7d 10 00 7e 0b

Исходный код на C

«линейный ассемблерный байт-код»

бинарный код WASM

int factorial(int n) {
  if (n == 0)
    return 1;
  else
    return n * factorial(n-1);
}

get_local 0
i64.eqz
if i64
    i64.const 1
else
    get_local 0
    get_local 0
    i64.const 1
    i64.sub
    call 0
    i64.mul
end

Компилятор внутри браузера использует представление в виде s-выражения, которое содержит больше информации, чем «линейный ассемблерный байт-код». Например:

(module
  (type $FUNCSIG$dd (func (param f64) (result f64)))
  (import "global.Math" "exp" (func $exp (param f64) (result f64)))
  (memory 256 256)
  (export "memory" (memory 0))
  (func $doubleExp (param $0 f64) (result f64)
    (f64.mul
      (call $exp
        (get_local $0)
      )
      (f64.const 2)
    )
  )
  (export "doubleExp" (func $doubleExp))
)

Если вы заинтересованы в работе с WebAssembly, посмотрите документацию на MDN. Также вас может заинтересовать серия постов от Лин Кларк, объясняющая WebAssembly с помощью отличных рисунков.

В Mozilla мы стремимся двигать веб вперед и делать Firefox лучшим браузером. С WebAssembly и Project Quantum мы более чем уверены в будущем веба и Firefox.