Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WASM
Search
Polina Gurtovaya
January 22, 2020
Programming
250
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
1.1k
Давайте все заблокируем
hellsquirrel
0
370
Wasmысле?
hellsquirrel
0
280
Магия декларативныx схем.
hellsquirrel
0
400
ML for HolyJS
hellsquirrel
0
200
Идеальный способ заблюрить белочку
hellsquirrel
0
190
ML/DL на фронте
hellsquirrel
0
250
InsertableStreams
hellsquirrel
0
120
WebRTC-404
hellsquirrel
0
580
Other Decks in Programming
See All in Programming
アクセシビリティから考える情報設計
high_g_engineer
0
250
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
210
自分的「カンファレンスの楽しみ方」
syumai
0
190
Oxlintはいいぞ(続)
yug1224
1
550
異なる設計思想のフレームワークを経験して得た学び
amekuhideki
2
1.5k
Gmail/Google DriveをトリガーにAIエージェントを動かそう! / Run AI agents with Gmail/Google Drive as triggers!
har1101
3
470
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
furukawayasuto
0
110
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
wat
0
670
まだ間に合う!今年の夏こそSchemeのマクロ展開器を完全理解!
omasanori
0
630
AIの中の人になってみる
htkym
0
170
書籍「プロフェッショナルAI駆動開発」紹介スライド
juntaromatsumoto
0
990
Hono + Inertia + React で LP を構築した話
oukayuka
2
210
Featured
See All Featured
Amusing Abliteration
ianozsvald
1
290
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
How GitHub (no longer) Works
holman
316
150k
The SEO identity crisis: Don't let AI make you average
varn
0
550
Paper Plane
katiecoart
PRO
2
53k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
310
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
820
Transcript
WASM
Давным-давно, когда кода на С++ было много, а на JS
мало 2 Появился emscripten
3
И зачем тогда изобретать велосипед? 4 Потому что JS слишком
долго парсить. Говорят что WASM в 20 раз быстрее Кое-что, связанное со скоростью, но об этом позже
Опыт “портирования” позволил быстро запилить `emcc WASM=1` 5
Смотрим демку 6
На самом деле все примерно так 7 "emcc -O3 -s
WASM=1 -s ENVIRONMENT=\"web\" -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s MODULARIZE=1 -s ‘EXPORT_NAME=\”blah-blah\"' -I src/wasm/ libwebp src/wasm/libwebp/src/ {dec,dsp,demux,enc,mux,utils}/*.c -I src/wasm/zlib src/ wasm/zlib/inf*.c src/wasm/zlib/ {zutil.c,adler32.c,crc32.c} -o src/wasm/encoders.js src/ wasm/encoders.c"
А что насчет RUST? 8 https://rustwasm.github.io/wasm-pack/installer/ https://rustwasm.github.io/docs/book/game-of-life/setup.html
AssemblyScript — почти как typescript, но компилируется в WASM 9
10 Это была история про portability
А теперь начинается история про WASM 11
WASM — binary instruction format for a stack-based virtual machine
12
WASM для WEB ? 13
Принципы: • Модульность из коробки • Живет в песочнице •
Работает быстро • Не ломает Web
У WASM есть спека (даже не одна) И там ни
слова о web :) 15 A WebAssembly implementation will typically be embedded into a host environment. An embedder implements the connection between such a host environment and the WebAssembly semantics.
У WASM 2 формата 16
Так как бинарники особо не поразбираешь, давайте поговорим про текстовый
формат 17
Выглядит он вот так: 18 (module (func $i (import "imports"
"logger") (param i32)) (memory (import "imports" "importedMemory") 1) (func (export "exportedFunc") i32.const 42 call $i) (func (export "add") (param i32 i32) (result i32) local.get 0 local.get 1 i32.add) (data (i32.const 0) "Fifty"))
Демка wat2wasm 19
Локальная демка 20
Окей, что насчет скорости? 21
Как работает JS в браузере на примере V8 22 V8
это движок, написаный на C++. Он используется с Chromium и NodeJS. V8 заставляет код работать. Раньше это был только JS код. Теперь это JS и WASM
23
Как работает компилятор? :) 24 Сложно он работает :)
25
В общем: 26 Как быстро произойдет “interactive” предсказать сложно Скорость
*не* определяется размером бандла (хотя это афектит) На мобилках все может быть в 5 раз медленнее
27
Помните вот это? 28 WebAssembly.instantiateStreaming WASM можно компилировать еще *до*
загрузки
WASM = predictable performance 29
Статус WASM: MVP 30 Пока лучше всего поддерживается компиляция из
С/C++ Работает в V8 примерно с февраля 2017 LLVM based-projects Все достаточно “сыро”
WASM дополняет JavaScript а не заменяет 31
32 Примерчики с MDN