WebAssembly + JavaScript: як прискорити ваш вебдодаток у кілька разів

WebAssembly відкриває нові можливості для прискорення продуктивності вебдодатків, дозволяючи виконувати код зі швидкістю, близькою до нативної. Цей інноваційний двійковий формат був спеціально розроблений для запуску високопродуктивних програм у сучасних веббраузерах.

Завдяки WebAssembly коди, написані на таких мовах, як C, C++ і Rust, можуть працювати в інтернеті з майже рідною швидкістю. Це значно перевершує традиційний JavaScript, оскільки WebAssembly компілюється у бінарний код, який оптимізується та виконується близько до швидкості мови програмування C/C++.

Як розробники, ми часто стикаємося з обмеженнями JavaScript при створенні складних вебдодатків. Однак WebAssembly дозволяє виконувати складні обчислення, наприклад обробку графіки чи аудіо, значно швидше. Ця технологія вважається головним нововведенням у світі веброзробки та суттєво вплине на розробку вебдодатків у майбутньому.

Тож у цій статті ми розглянемо:

• коли варто використовувати webassembly замість javascript;
• як крок за кроком інтегрувати wasm у ваш проєкт;
• найкращі практики для підвищення продуктивності;
• типові помилки та способи їх уникнення.

Незалежно від вашого досвіду, ви дізнаєтесь, як використовувати потужність WebAssembly для створення швидших та ефективніших вебдодатків.

Не всі завдання однаково ефективно виконуються у JavaScript. Розглянемо ситуації, коли використання WebAssembly дійсно виправдане та надає значні переваги.

Високонавантажені обчислення

WebAssembly демонструє найбільшу перевагу в продуктивності при виконанні складних обчислювальних задач. Завдяки своєму бінарному формату та попередній компіляції, Wasm може виконуватися зі швидкістю, близькою до нативного коду, що особливо важливо для обробки даних.

При малих розмірах вхідних даних WebAssembly випереджає JavaScript майже у всіх тестах (97,6% для дуже малих і 95,1% для малих вхідних даних). Середнє прискорення при цьому складає до 26,99 разів для дуже малих вхідних даних. Однак, важливо зазначити, що для середніх за розміром вхідних даних різниця стає менш вираженою.

WebAssembly найкраще підходить для таких високонавантажених обчислювальних задач:

• матричні операції та лінійна алгебра;
• криптографічні алгоритми (показує прискорення у 2-3 рази порівняно з оптимізованим JavaScript);
• обробка та аналіз великих наборів даних;
• фізичні симуляції та моделювання.

Наприклад, при множенні матриць — операції, поширеній у машинному навчанні та графічному рендерингу — Wasm показує значну перевагу у швидкості. Це пояснюється здатністю WebAssembly ефективно виконувати цикли та оптимізувати роботу з пам'яттю.

Потреба у швидкому рендерингу графіки

Сучасні веббраузери дедалі частіше використовуються для складних графічних застосунків.

WebAssembly особливо корисний, коли йдеться про:

1. Ігри в браузері: WebGL у поєднанні з WebAssembly дозволяють створювати в браузері ігри, які раніше потребували встановлення. Така комбінація забезпечує ефективне рендерення 3D-сцен з освітленням та текстурними ефектами. На мобільних пристроях вебігри з WebAssembly можуть працювати приблизно на 60% швидше.
2. Редагування зображень і відео: WebAssembly дозволяє реалізувати складні фільтри та трансформації безпосередньо в браузері без затримок. Наприклад, конвертація зображення у відтінки сірого через WebAssembly працює значно швидше, ніж аналогічний JavaScript-код.
3. Візуалізація даних: При роботі з великими наборами даних та складними інтерактивними графіками WebAssembly забезпечує плавність анімацій та взаємодії.

Портинг десктопних додатків у браузер

Одна з найцінніших можливостей WebAssembly — це перенесення наявних десктопних програм у браузер без повного переписування коду.

При портуванні додатка в WebAssembly можна зберегти більшу частину вашої кодової бази, що значно пришвидшує розробку та мінімізує ризик появи нових помилок. Згідно з досвідом портування наявних додатків, процес може бути завершений на 70% швидше, ніж повне переписування.

Ключові переваги портування десктопних додатків у Wasm:

• збереження перевіреної часом кодової бази та функціональності;
• скорочення часу виходу на ринок нових продуктів;
• усунення необхідності в установці та оновленні програмного забезпечення.

Найкраще для портування підходять програми:

• з активним обчислювальним ядром (CAD-системи, наукові обчислення);
• редактори з тривимірною графікою;
• спеціалізоване програмне забезпечення з великим об'ємом коду на C++ або Rust.

Проте варто пам'ятати, що портування — це не просто перекомпіляція коду. Необхідно адаптувати системні виклики та взаємодію з операційною системою до середовища браузера. Саме тому важливо чітко розділяти бізнес-логіку додатка від компонентів інтерфейсу користувача для найбільш ефективного портування.

Інтеграція WebAssembly у проєкт не така складна, як може здаватися на перший погляд. Розглянемо поетапний процес від вибору мови до виклику функцій у вебдодатку.

1. Вибір мови: C++, Rust або AssemblyScript

Перший крок — вибір мови програмування, в якій ви писатимете код для WebAssembly.

Наразі три основні варіанти:

1. C/C++ з Emscripten: Класичний підхід для тих, хто має наявний код на C++ або досвід роботи з цими мовами. Згідно з опитуванням розробників, приблизно 51% розробників WebAssembly використовують C++ з Emscripten.
2. Rust з wasm-pack: Найпопулярніший вибір серед сучасних розробників — 69% мають досвід використання Rust для розробки WebAssembly. Ба більше, 60% планують активно використовувати його в майбутньому.
3. AssemblyScript: Цікава альтернатива для JavaScript-розробників, оскільки синтаксис схожий на TypeScript. Близько 35% розробників WebAssembly використовують AssemblyScript, а 56% планують працювати з ним у майбутньому.

Порівняльні тести показують, що Rust зазвичай демонструє найкращу продуктивність, AssemblyScript — на другому місці, а Go/TinyGo — на третьому. Наприклад, в одному з тестів Rust-версія виконувалась за 2,982 мс у Chrome, в той час, як Go-версія — за 9,717 мс.

2. Компіляція у .wasm за допомогою Emscripten або wasm-pack

Після написання коду необхідно скомпілювати його у формат WebAssembly (.wasm):

Для C/C++ використовується Emscripten:

# Встановлення Emscripten

git clone https://github.com/emscripten-core/emsdk.git

cd emsdk

./emsdk install latest

./emsdk activate latest

source ./emsdk_env.sh

# Компіляція

emcc файл.c -O3 -s WASM=1 -o файл.js

Для Rust використовується wasm-pack:

# Встановлення wasm-pack

cargo install wasm-pack

# Компіляція

wasm-pack build --target web

Для AssemblyScript:

# Встановлення

npm install --save-dev assemblyscript

# Компіляція

npx asc index.ts --outFile index.wasm --optimize

Зверніть увагу на прапорець -O3 для Emscripten — він забезпечує оптимізацію коду, яка критично важлива для продуктивності.

3. Завантаження модуля у браузері через fetch()

Оптимальний спосіб завантажити WebAssembly-модуль — використання streaming API. Цей метод дозволяє браузеру почати компіляцію модуля ще до завершення завантаження:

Важливо: ваш сервер повинен подавати .wasm файли з MIME-типом application/wasm, інакше streaming-метод не працюватиме коректно.

4. Виклик функцій WASM з JavaScript

Після завантаження та інстанціювання модуля, ви можете викликати його експортовані функції через властивість exports:

WebAssembly та JavaScript обмінюються даними через лінійну пам'ять — спільний ArrayBuffer, доступний обом середовищам. Для передачі складних даних (наприклад, рядків чи об'єктів) потрібно писати додатковий код для серіалізації/десеріалізації.

Проте для чисел все просто — вони передаються безпосередньо. Наприклад, якщо у вашому WASM-модулі є функція:

// C

EMSCRIPTEN_KEEPALIVE

int множення(int a, int b) {

  return a * b;

}

Її можна викликати з JavaScript так:

const результат = модуль.exports.множення(4, 5); // 20

Отже, інтеграція WebAssembly у JavaScript-проєкт — це послідовний процес, який починається з вибору мови програмування та закінчується викликом експортованих функцій з вашого JavaScript-коду.

Після інтеграції WebAssembly у проєкт, наступним кроком стає оптимізація коду для досягнення максимальної продуктивності. Ефективно написаний WASM-модуль може працювати у кілька разів швидше за звичайний JavaScript-код.

Оптимізація циклів і структур даних

При розробці WebAssembly-модулів з низькорівневими мовами (Rust, C++, C) слід дотримуватися таких принципів оптимізації:

• уникайте частих операцій виділення пам'яті, оскільки вони суттєво сповільнюють виконання;
• розміщуйте дані, що часто використовуються разом, послідовно в пам'яті для підвищення швидкості доступу;
• мінімізуйте глибоко вкладені цикли, які можуть значно знизити продуктивність.

При правильній оптимізації структур даних можна досягти збільшення продуктивності до 40 разів порівняно з JavaScript. Наприклад, використання векторів із попередньо виділеною місткістю замість динамічного змінення розміру суттєво знижує кількість операцій з пам'яттю.

Також важливо використовувати компіляторні оптимізації. При компіляції з Emscripten прапорець -O3 максимізує швидкодію, а -Os або -Oz оптимізує розмір файлу. Крім того, Link Time Optimization (LTO) дозволяє компілятору проводити оптимізацію всієї програми, включаючи вбудовування функцій із системних бібліотек.

Мінімізація кількості викликів між JS і WASM

Виклики між JavaScript та WebAssembly створюють додаткові накладні витрати, хоча браузери постійно вдосконалюють їхню оптимізацію.

Для зменшення цих витрат варто:

• групувати операції в більші пакети замість частого викликання окремих функцій;
• передавати дані через спільну пам'ять замість їх копіювання між середовищами;
• використовувати мономорфні виклики — викликати ту саму функцію з однаковими типами аргументів щоразу.

При мономорфних викликах JavaScript може заздалегідь підготувати аргументи у форматі, потрібному WebAssembly, без додаткового розпакування. А при роботі з великими обсягами даних краще використовувати SharedArrayBuffer або блоки лінійної пам'яті, до яких мають доступ обидва середовища, що дозволяє уникнути дублювання даних.

Використання Web Workers для паралельності

WebAssembly сам по собі не забезпечує паралельне виконання, проте його поєднання з Web Workers відкриває доступ до багатоядерної продуктивності:

• використовуйте Web Workers як контейнери для завдань, що потребують інтенсивних обчислень;
• основний потік залишайте вільним для взаємодії з користувачем;
• створіть пул Workers заздалегідь, перед запуском програми, щоб зменшити затримки.

При використанні C++ з Emscripten можна задати розмір пулу потоків через параметр -s PTHREAD_POOL_SIZE=..., вказавши фіксоване число або вираз navigator.hardwareConcurrency для створення стільки потоків, скільки ядер у процесорі.

Для роботи з потоками у Rust найпопулярнішою бібліотекою є Rayon, яка дозволяє паралельно виконувати операції над ітераторами, розподіляючи навантаження між усіма доступними ядрами. Водночас для мов на зразок Go, що підтримують WebAssembly, важливо пам'ятати, що хоча горутини можуть запускатися у WASM-модулях, вони не продовжать виконання після повернення експортованої функції.

Такий підхід особливо ефективний для вебгенерування, обробки зображень, фізичних симуляцій та інших ресурсомістких завдань. Наприклад, онлайн-редактор САПР, що виконує геометричні обчислення у WebAssembly всередині Workers, зберігає інтерфейс відчутно чутливішим навіть під час рендерингу 3D-моделей з мільйонами полігонів.

При роботі з WebAssembly розробники часто припускаються помилок, які можуть знизити продуктивність або навіть спричинити серйозні проблеми. Розуміння цих підводних каменів допоможе уникнути типових пасток при розробці.

Неправильне управління пам'яттю

На відміну від JavaScript, статичні мови, що компілюються в WebAssembly, не мають автоматичного прибирання сміття. Необхідно явно виділяти та звільняти пам'ять, щоб уникнути витоків. Неправильне управління пам'яттю – одна з найпоширеніших причин проблем у WASM-додатках.

Найчастіші проблеми з пам'яттю включають:

• використання пам'яті після її звільнення (use-after-free) – особливо небезпечне, адже санітайзери не можуть виявити такі помилки на стороні JavaScript;
• неявне розділення стану між викликами через глобальні змінні;
• фрагментація пам'яті через часті операції malloc/free без розумної стратегії.

Коли typed_memory_view в Emscripten повертає JavaScript Uint8Array, що посилається на буфер пам'яті WebAssembly, виклик free() може призвести до неочікуваних результатів, якщо JavaScript продовжує використовувати цей масив. Щоб уникнути цього, клонуйте дані перед звільненням пам'яті: new Uint8ClampedArray(result.view).

Також пам'ятайте, що при збільшенні розміру WebAssembly.Memory, існуючий ArrayBuffer стає недійсним, як і всі представлення, що його використовують.

Невідповідність типів між JS і WASM

Проблеми з типами виникають через фундаментальні відмінності між системами типів JavaScript і WebAssembly. Типова помилка – плутанина між об'єктами WasmObject та JSObject, що може призвести до вразливостей типу CVE-2024-5158 та CVE-2024-7550.

Часто розробники не враховують, що у WebAssembly всі шляхи виконання функції повинні відповідати оголошеному типу повернення. Наприклад, якщо функція повертає i32, але не всі шляхи виконання повертають значення, компілятор видасть помилку: «type mismatch in implicit return, expected [i32] but got []». У таких випадках використовуйте інструкцію unreachable після розгалужень, що повертають значення.

Використання великих .wasm файлів без оптимізації

Розмір WebAssembly-модуля безпосередньо впливає на швидкість завантаження та продуктивність. При правильній оптимізації можна зменшити розмір бінарного файлу у десять разів.

Стандартні прапорці компіляції (-O3 для швидкодії, -Os або -Oz для розміру) вже дають значне покращення, проте для максимальної оптимізації використовуйте спеціалізовані інструменти, наприклад, wasm-opt з проєкту Binaryen:

wasm-opt -Oz input.wasm -o optimized.wasm

Крім того, використання Link Time Optimization (LTO) під час компіляції Rust-проєктів може зменшити розмір з 84 МБ до 7 МБ у режимі --release. А подальша оптимізація через wasm-opt може зменшити файл ще на 50%.

Однак, пам'ятайте, що оптимізація – це баланс. Ahead-of-time компіляція (AOT) дає найкращу продуктивність, але робить ваш код залежним від конкретної архітектури.

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

Підтримка потоків і багатопоточності

Мультипоточність – одне з найважливіших доповнень до продуктивності WebAssembly. Вона дозволяє виконувати частини коду паралельно на окремих ядрах процесора, значно скорочуючи загальний час виконання.

Хоча WebAssembly спочатку проєктувався як однопотокове середовище, сучасні випадки використання в іграх, наукових обчисленнях та машинному навчанні потребують паралельного виконання для повноцінного використання сучасних процесорів.

Наразі WebAssembly підтримує багатопоточність через:

• вебворкери та SharedArrayBuffer для паралельного виконання на декількох ядрах;
• атомарні операції для безпечного доступу до спільних даних;
• інструкції «wait» та «notify» для синхронізації потоків.

Garbage Collection для високорівневих мов

Пропозиція щодо впровадження збирання сміття у WebAssembly (WasmGC) тепер доступна у всіх браузерах. Це критично важливе доповнення для підтримки високорівневих мов.

WasmGC додає типи struct і array для нелінійного розміщення в пам'яті. Замість того щоб включати власний збирач сміття до кожного порту мови програмування, розробники можуть інтегруватися з наявним збирачем сміття у віртуальній машині хоста.

Ефект від впровадження WasmGC вражає – бінарні файли Java з WasmGC можуть бути втричі меншими (2,3 КБ) порівняно з C або Rust (6,1-9,6 КБ) для ідентичного бенчмарка.

Інтеграція з блокчейном і IoT

WebAssembly стрімко розширюється за межі браузерів. WASI (WebAssembly System Interface) дозволяє виконувати Wasm на серверах, IoT-пристроях та блокчейн-платформах.

Очікується, що WASI 0.3 (раніше Preview 3) з'явиться в першій половині 2025 року. Мета цього релізу – включити нативну асинхронність із Component Model та адаптувати наявні інтерфейси WASI 0.2 для використання нових асинхронних можливостей.

Потенціал WebAssembly для IoT полягає в його компактності, швидкодії та безпеці виконання, що робить його ідеальним для пристроїв з обмеженими ресурсами.

Отже, майбутнє WebAssembly виглядає надзвичайно перспективним, з ключовими доповненнями, які зроблять цю технологію ще потужнішою та універсальнішою для різноманітних випадків використання.

Використання WebAssembly у виробничих проєктах демонструє його практичну цінність та широкі можливості. Розглянемо кілька цікавих прикладів, які показують різноманіття застосувань WASM:

Графічні редактори та інтерактивні додатки

• Egui — веб демо/документація egui, бібліотеки для графічних інтерфейсів у Rust, портована у веб за допомогою WebAssembly
• MakePad — потужний графічний редактор, написаний на Rust і портований у браузер
• Figma — популярний інструмент для дизайну інтерфейсів, який використовує WebAssembly для складних операцій маніпуляції векторною графікою
• Adobe Photoshop Web — браузерна версія, що використовує WASM для обробки зображень з продуктивністю, наближеною до десктопної

Ігри та розваги

• Google Earth — використовує WebAssembly для обробки великих обсягів геопросторових даних безпосередньо в браузері
• AutoCAD Web — комплексне CAD-рішення, що використовує WASM для складних обчислень
• Unity WebGL з WebAssembly — популярний ігровий рушій, який компілює ігри в WebAssembly для запуску в браузері

Наукові та спеціалізовані додатки

• Pyodide — повноцінне Python середовище для наукових обчислень у браузері
• TensorFlow.js з WebAssembly — бібліотека для машинного навчання, що використовує WASM для прискорення обчислень
• QEMU у браузері — емуляція різних архітектур процесорів безпосередньо в браузері

Продуктивні інструменти

• Zoom Web Client — використовує WebAssembly для обробки аудіо та відео в реальному часі
• Office 365 Web — для складних обчислень у таблицях та обробки документів
• AutoDesk Viewer — для візуалізації та маніпуляції 3D-моделями без необхідності встановлення спеціалізованого ПЗ

Ці приклади ілюструють, що WebAssembly стає незамінним інструментом для розробників, які прагнуть створювати високопродуктивні вебдодатки з функціональністю, раніше доступною тільки в нативних програмах. Особливо вражає, що багато компаній світового рівня вже активно використовують цю технологію у своїх основних продуктах.

Отже, WebAssembly безперечно відкриває нові горизонти для веброзробників, дозволяючи значно прискорити продуктивність додатків та розширити функціональні можливості вебсередовища. Завдяки своєму бінарному формату та компіляції, WASM забезпечує швидкість виконання, близьку до нативної, що особливо помітно при високонавантажених обчисленнях, складному рендерингу графіки та портуванні десктопних додатків.

Водночас важливо пам'ятати, що WebAssembly – це не заміна JavaScript, а потужний інструмент, який доповнює його. Найкращі результати досягаються при стратегічному використанні обох технологій: JavaScript для інтерфейсу та взаємодії з користувачем, а WASM – для обчислювально складних операцій.

При інтеграції WebAssembly у вебпроєкти необхідно дотримуватися кількох ключових принципів:

• правильно обирати мову програмування для конкретного завдання;
• оптимізувати структури даних та цикли для максимальної продуктивності;
• мінімізувати кількість викликів між JavaScript та WASM;
• уважно керувати пам'яттю для уникнення витоків.

Зрештою, майбутнє цієї технології виглядає надзвичайно перспективним. Підтримка багатопоточності, покращене керування пам'яттю через WasmGC та поширення за межі браузера через WASI відкривають нові можливості використання WebAssembly не лише у веброзробці, але й у IoT, блокчейні та серверних застосунках.

Безумовно, опанування WebAssembly потребує часу та зусиль, особливо для розробників, які звикли працювати виключно з JavaScript. Однак потенційне підвищення продуктивності у кілька, а іноді й десятки разів, безперечно варте інвестицій у вивчення цієї технології. З кожним оновленням браузерів та покращенням інструментів розробки, використання WebAssembly стає дедалі простішим та ефективнішим, що робить його невіддільним складником майбутнього вебу.