Как мы все знаем, Javascript — это выдающаяся основная опция, которую разработчики используют для создания интерактивных веб-страниц. Но вот появляется новая вещь под названием Web Assembly, которая определенно поразит вас и появится в качестве опции в ближайшем будущем.

Что такое веб-сборка?

WebAssembly (сокращенно wasm) — это двоичный формат инструкций, позволяющий запускать высокопроизводительный код в веб-браузерах. WebAssembly поддерживается всеми основными веб-браузерами, включая Chrome, Firefox, Safari и Edge. Он предназначен для предварительной компиляции языка, который сообщает пользователям, что они могут ожидать более быструю загрузку.

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

Как WebAssembly работает в веб-браузере?

Этап компиляции: специальный компилятор, такой как Emscripten, используется для компиляции исходного кода языков высокого уровня, таких как C, C++, Rust, в код WebAssembly.

Стадия загрузки: веб-приложение, которое хочет использовать WebAssembly, имеет тег ‹script› с атрибутом type, установленным на «модуль». Атрибут src в теге ‹script› указывает на расположение файла .wasm. Файл wasm загружается, когда браузер сталкивается с этим скриптом.

Этап синтаксического анализа. Механизм webAssembly браузера анализирует загруженный файл wasm, чтобы проверить его формат и убедиться, что он правильный. Затем код wasm переводится в низкоуровневый кроссплатформенный формат, известный как «машинный код». По сравнению с парсингом JavaScript, WebAssembly может быть представлен компактнее и обрабатываться быстрее благодаря своему двоичному формату. Высокопроизводительное выполнение также стало возможным благодаря низкоуровневому выполнению машинного кода.

Этап выполнения. После завершения анализа и компиляции машинный код готов к выполнению. Между тем, API JavaScript WebAssembly используется для взаимодействия между механизмом Javascript и модулем WebAssembly. Этот API предлагает методы для запуска экспортированных функций модуля, доступа к его памяти и его создания.

Общий доступ к памяти и ресурсам. WebAssembly имеет собственную линейную память, которая может совместно использоваться и использоваться как WebAssembly, так и Javascript. Кроме того, WebAssembly взаимодействует с Javascript для использования веб-API.

Попробуйте WebAssembly Studio

WebAssembly Studio — это онлайн-инструмент IDE, разработанный Mozilla, который можно использовать для компиляции кода C/C++ и Rust в WebAssembly (WASM). WebAssembly Studio была создана на основе WasmExplorer и WasmFiddle. В настоящее время IDE поддерживает C/C++ и Rust, но архитектура инструмента будет полностью совместима с другими языками, такими как Kotlin.

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

Есть что-то под названием "Инструмент Emscripten"

Инструмент Emscripten может преобразовать почти любой исходный код C/C++ в модуль .wasm вместе с необходимым «связующим» кодом JavaScript для загрузки и запуска модуля и HTML-документом для отображения вывода кода.

Проще говоря, процедура выглядит так:

  1. C/C++ изначально передается Emscripten в Clang и LLVM, установленную цепочку инструментов компилятора C/C++ с открытым исходным кодом, которая, например, включена в XCode на OS X.
  2. Скомпилированный вывод Clang и LLVM преобразуется Emscripten в двоичный файл .wasm.
  3. В настоящее время WebAssembly может вызывать только JavaScript и передавать примитивные типы данных в виде целых чисел и чисел с плавающей запятой. Он не может получить прямой доступ к DOM самостоятельно. В результате, чтобы использовать любой веб-API, WebAssembly должен выполнить вызов JavaScript, который затем использует веб-API. В результате Emscripten создает необходимый связующий код HTML и JavaScript.

Такие приложения, как Figma, Microsoft Blazor, CloudFlare, используют WebAssembly, где они говорят, что WebAssembly более компактен, и браузер может легко анализировать его по сравнению с Javascript, который подвергается множеству оптимизаций для повышения скорости.

Небольшой практический урок

Это демонстрация, позволяющая Emscripten сгенерировать все для запуска вашего кода C/C++ в WebAssembly.

  • Установите Emscripten на свой компьютер
  • Создайте папку на локальном диске и создайте в ней файл с именем demo.c и пример кода, как показано ниже.
#include <stdio.h>

int main() {
    printf("Hi from Emscripten...!\n");
    return 0;
}
  • Теперь, используя окно терминала, которое вы использовали для входа в среду компилятора Emscripten, перейдите в тот же каталог, что и ваш файл demo.c, и выполните следующую команду:
emcc demo.c -o demo.html

Параметры, которые были переданы с командой, следующие:

  • -o demo.html — объявляет, что мы хотим, чтобы модуль wasm и связующий код JavaScript были сгенерированы Emscripten для создания и создания экземпляра wasm, чтобы его можно было использовать в веб-среде, а также на HTML-странице. для выполнения нашего кода (и имя файла для использования).

На данный момент в исходном каталоге у вас должно быть:

  • Код бинарного модуля wasm (demo.wasm)
  • Файл JavaScript, содержащий связующий код для перевода между собственными функциями C и JavaScript/wasm (demo.js).
  • HTML-файл для загрузки, компиляции и создания экземпляра кода wasm и отображения его вывода в браузере (demo.html).
  • Теперь откройте файл demo.html в своем браузере, который поддерживает WebAssembly.

Javascript против WebAssembly

Раньше виртуальная машина могла загружать только JavaScript. Это хорошо сработало для нас, потому что JavaScript способен справиться с большинством проблем, с которыми сегодня сталкиваются потребители при использовании Интернета. Однако при попытке использовать JavaScript для более требовательных сценариев использования, таких как 3D-игры, виртуальная и дополненная реальность, компьютерное зрение, редактирование изображений/видео и множество других областей, требующих собственной скорости, мы столкнулись с проблемами производительности.

WebAssembly — это язык, отличный от JavaScript, но он не предназначен для замены. Вместо этого он предназначен для дополнения и работы вместе с JavaScript, позволяя веб-разработчикам использовать сильные стороны обоих языков:

  • JavaScript — это язык высокого уровня, гибкий и достаточно выразительный для написания веб-приложений. У него много преимуществ — он динамически типизируется, не требует этапа компиляции и имеет огромную экосистему, которая предоставляет мощные фреймворки, библиотеки и другие инструменты.
  • WebAssembly — это низкоуровневый язык, похожий на ассемблер, с компактным двоичным форматом, который работает почти с исходной производительностью и предоставляет языкам с низкоуровневыми моделями памяти, таким как C++ и Rust, цель компиляции, чтобы они могли работать в Интернете.

WebAssembly ставит перед собой цель высокого уровня поддержки языков с моделями памяти со сборкой мусора в будущем.

Ниже приведены ключевые факторы, которые могут помочь нам понять различия между JS и WASM.

Скорость выполнения

Из-за того, что JS является интерпретируемым языком, может пройти некоторое время, прежде чем браузер полностью поймет, что он собирается делать.

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

Время загрузки

JS подходит для небольших задач.

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

Использование памяти

Сборка мусора JS автоматически обрабатывает использование памяти.

В WASM использование памяти довольно сложно. Разработчикам предоставляется линейное распределение памяти, которым они должны управлять вручную.

Сборка мусора

Для управления памятью JavaScript предоставляет надежную процедуру сборки мусора, тогда как WASM использует JS.

Переносимость

Разработчики могут использовать JavaScript на разных платформах и в самых разных случаях, тогда как WASM разработан с учетом переносимости, поэтому разработчики могут использовать его и на платформах, отличных от браузеров.

Доступ к веб-API

С помощью Javascript вы можете получить доступ к многочисленным API-интерфейсам платформы. Но прямого доступа к API для WASM нет. Единственный способ манипулировать DOM с помощью WASM — через JS.

Многопоточность

Javascript — это однопоточный язык, который использует веб-воркеры для обеспечения одновременного выполнения.

В настоящее время WASM не поддерживает многопоточность. Однако вы можете использовать альтернативные низкоуровневые языки, поддерживающие многопоточность.

Отладка

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

WebAssembly как компилируемый язык, перед компиляцией происходит отладка, то есть код не компилируется, если обнаружены ошибки.

Заключение

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

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

Разумнее думать, что оба языка взаимодействуют друг с другом для продвижения и продвижения браузерных приложений. Предпочтительным языком для интерактивных мобильных и веб-приложений по-прежнему будет JavaScript, в то время как разработчики, стремящиеся к крупномасштабным проектам с предсказуемой и быстрой производительностью, предпочтут WASM. Спасибо за внимание. Продолжайте кодировать! 😉