Lindevo

Tīmekļa veiktspējas paātrināšana ar WebAssembly un C++

2 min read
321 views
19 likes
Tīmekļa veiktspējas paātrināšana ar WebAssembly un C++

Kad JavaScript nav pietiekami ātrs

JavaScript dinamiskai valodai ir ievērojami ātrs. Taču aprēķinu intensīviem uzdevumiem — attēlu apstrādei, fizikas simulācijām, datu saspiešanai, kriptogrāfiskām operācijām — tas nonāk pie griestiem. Tieši tur parādās WebAssembly (WASM).

WASM ir binārs instrukciju formāts, kas pārlūkprogrammā darbojas gandrīz dabīgā ātrumā. Ja Jūs jau pārzināt C++, savu esošo kodu varat kompilēt tieši WASM formātā.

Kompilēšanas konveijers

# Install Emscripten
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk && ./emsdk install latest && ./emsdk activate latest

# Compile C++ to WASM
emcc src/processor.cpp -o dist/processor.js \
  -s WASM=1 \
  -s EXPORTED_FUNCTIONS='["_processImage"]' \
  -O3

Rezultātā tiek iegūts .wasm binārais fails un JavaScript piesaistes fails, kas apstrādā ielādi un atmiņas pārvaldību.

WASM izsaukšana no JavaScript

const Module = await loadWasmModule("processor.wasm");

// Call the C++ function directly
const result = Module._processImage(imageData, width, height);

Robeža starp JavaScript un WASM ir vienmērīga. Jūs nododat datus, saņemat rezultātus, bet pārējo apstrādā pārlūkprogramma.

Reāli veiktspējas ieguvumi

Mūsu salīdzinošajos testos attēlu apstrādes uzdevumiem:

OperācijaJavaScriptWASM (C++)Paātrinājums
4K attēla mēroga maiņa340 ms45 ms7,5×
Izpludināšanas filtra pielietošana280 ms32 ms8,7×
JSON parsēšana (liels)120 ms18 ms6,6×

Šie nav sintētiski testi — tie nāk no reālām ražošanas darba slodzēm.

Kad izmantot WASM

WASM izceļas šādos uzdevumos:

  • CPU intensīvi algoritmi — kārtošana, meklēšana, saspiešana
  • Skaitliskie aprēķini — finanšu aprēķini, zinātniskā modelēšana
  • Mediju apstrāde — attēlu manipulācijas, audio kodēšana
  • Esošu C/C++ bibliotēku pārnešana uz tīmekli

WASM nav ideāls DOM manipulācijām vai vienkāršiem API izsaukumiem — to JavaScript paveic tikpat labi.

CMake integrācija

Lielākiem C++ projektiem mēs izmantojam CMake kopā ar Emscripten:

cmake_minimum_required(VERSION 3.20)
project(wasm_module)

set(CMAKE_CXX_STANDARD 20)
add_executable(module src/main.cpp src/processor.cpp)

Info

Profesionāls padoms: sāciet ar mazu, izolētu funkciju. Kompilējiet to WASM formātā, salīdziniet ar JavaScript ekvivalentu un paplašinieties no turienes. Necentieties pārcelt visu koda bāzi uzreiz.

Nākotne

Ar WASI (WebAssembly System Interface) un komponentu modeļa priekšlikumiem WASM paplašinās ārpus pārlūkprogrammas. Tas pats C++ kods, kas šodien darbojas Jūsu tīmekļa lietotnē, rīt varētu darboties serveros, malas funkcijās un IoT ierīcēs.

C++WebAssemblyCMakeJavaScript