Используйте возможности языка C для повышения производительности вашего веб-приложения.
В течение долгого времени JavaScript был единственным языком программирования, понятным браузеру, и обеспечивающим производительность, необходимую большинству веб-приложений.
Но у него могут быть некоторые проблемы с производительностью, когда мы говорим о более интенсивном использовании, таком как 3D-игры, компьютерное зрение и редактирование изображений.
WebAssembly призван решить эту проблему.
Что такое WebAssembly?
Как пишет официальный сайт:
WebAssembly (сокращенно Wasm ) - это двоичный формат инструкций для виртуальной машины на основе стека. Wasm разработан как переносимая цель компиляции для языков программирования, позволяющая развертывать в Интернете клиентские и серверные приложения.
Но что это значит?
Это означает, что вы можете скомпилировать код, написанный, например, на C или Rust, и выполнить его в браузере с почти нативной скоростью.
Вы можете повторно использовать этот старый код, который у вас есть, и иметь возможность запускать его в своем браузере, как это было веб-приложение.
Код WebAssembly выполняется на виртуальной машине вместе с JavaScript. Это не способ заменить JavaScript. Это способ оптимизировать и позаботиться о критических для производительности компонентах веб-приложения.
Вы не программируете непосредственно в WebAssembly, а используете другие языки высокого уровня, такие как C, C ++, Rust и Go. При компиляции кода вы устанавливаете цель как WebAssembly и используете ее напрямую в браузере.
Обобщить:
- Это быстро и эффективно, используя преимущества общих аппаратных возможностей.
- Он создается с использованием широкого спектра языков высокого уровня, таких как C ++, Rust и Go.
- Он может обращаться к методам JavaScript и может быть доступен с помощью методов JavaScript.
Примечание: принцип работы WebAssembly не рассматривается в этой статье. Если вы хотите узнать о нем побольше, посмотрите эту замечательную статью.
В этой статье мы увидим, как создать приложение WebAssembly с использованием C.
Вы можете найти полный код здесь.
Настройка среды
Чтобы скомпилировать наш код C / C ++ в WebAssembly, нам понадобится набор инструментов. Этот инструмент будет отвечать за перевод кода в формат WebAssembly.
Для этого мы установим набор инструментов Emscripten. Это проект с открытым исходным кодом, который может компилировать любой переносимый код C / C ++ в WebAssembly.
Примечание: это руководство было выполнено на машине с установленной Ubuntu 20.04.
Для его использования в вашей системе должны быть установлены Python, CMake и Java (необязательно). Если у вас его нет, просто запустите команду:
sudo apt install python3 cmake default-jre
Для установки запустите следующий код:
git clone https://github.com/emscripten-core/emsdk.git cd emsdk ./emsdk install latest ./emsdk activate latest
После установки вы можете добавить некоторые переменные среды в PATH
:
source ./emsdk_env.sh
Примечание: вам придется запускать этот код каждый раз, когда вы захотите использовать компилятор. Вы можете добавить его в свой
.bashrc
, чтобы он выполнялся каждый раз, когда вы открываете терминал.
Выполните команду emcc
, чтобы проверить, все ли работает. У вас должен быть результат, подобный этому:
> emcc --version emcc (Emscripten gcc/clang-like replacement) 2.0.8 (d059fd603d0b45b584f634dc2365bc9e9a6ec1dd) Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt) This is free and open source software under the MIT license. There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Привет, мир!
В качестве первого теста давайте создадим простую программу.
Теперь нам нужно его скомпилировать:
emcc hello.c -o hello.html
Команда emcc
используется для компиляции нашего файла hello.c
в WebAssembly. После запуска вы увидите три файла:
hello.wasm
: это скомпилированный код WebAssembly.hello.js
: это связующий код, необходимый для загрузки двоичного файла WebAssembly. Он будет обрабатывать некоторые ошибки (например, деление на ноль) или устанавливать доступ к функциям вывода. Подробнее об этом вы можете узнать здесь.hello.html
: страница шаблона, которая загружает WebAssembly и связующий код. Вы можете изменить шаблон с помощью опции--shell-file <<path>>
. Вы можете отключить этот вывод, передав цель.js
параметру-o
.
С этими файлами у вас есть полный пример. Теперь вы можете обслуживать его и проверять в своем браузере. Вы должны увидеть такой вывод:
Примечание: если в вашей системе установлено
node
, вы можете использовать пакетhttp-server
для обслуживания файлов. Для установки просто запустите командуnpm install -g http-server
и запуститеhttp-server
.
Экспорт функции
Предыдущий пример был прост. Но что, если у нас есть функция и мы хотим использовать ее в нашем коде JavaScript? Посмотрим, как это сделать.
Создайте файл с именем add.c
и поместите следующий код:
Функция add
получит два целых числа и вернет сумму. Ничего фантастического. Флаг EMSCRIPTEN_KEEPALIVE
гарантирует, что компилятор не удалит функцию из окончательного двоичного файла.
Этот флаг также экспортирует функцию. Перед именем функции будет помещен _
. Итак, мы должны вызвать _add
из кода JavaScript.
Компилировать:
emcc add.c -o add.js
Будет сгенерирован только связующий код JavaScript и двоичный файл wasm.
Теперь нам нужно создать файл html
, который загрузит оба файла и будет использовать созданную функцию. Создайте файл add.html
и поместите в него следующее содержимое:
Чтобы использовать нашу функцию, мы должны импортировать файл add.js
. Это делают:
<script src="add.js"></script>
Этот связующий код (сгенерированный компилятором Emscripten) загрузит файл add.wasm
и создаст необходимые привязки.
Все экспортированные функции будут доступны в глобальном объекте с именем Module
. Вы можете создать свою собственную реализацию этого кода, если хотите.
Примечание: код WebAssembly загружается асинхронно, поэтому вам придется немного подождать, пока функции станут доступны.
Эта страница проста. Имеет два входа и кнопку. Когда вы щелкаете по кнопке, она вызывает run_ws
, который вызывает функцию wasm
с аргументами из поля ввода.
Примечание: в этом коде нет обработки ошибок, чтобы упростить его.
Теперь откройте браузер, и вы увидите следующую страницу:
Заключение
Благодаря компилятору Emscripten создание приложения WebAssembly на C не является сложной задачей.
Это также способ повторно использовать старый код, написанный на другом языке программирования, без необходимости переводить его на JavaScript.
В этом руководстве мы увидели, как создать простое приложение WebAssembly с использованием C.
Полный код доступен здесь.