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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
190
Идеальный способ заблюрить белочку
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
ソフトウェアラスタライザ
fadis
1
780
新卒PdEのリアル
ryu1013
1
230
MySQLとPostgreSQLって何が違うの?
akagami
PRO
0
160
週末にAI-DLCを本気で回したら$1,600溶けた
hbashimizu
0
120
LLMは4年分のCompose移行を再現できるのか?実プロダクト279件のXMLで探る自動化の境界線
makun
0
350
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
slashnephy
0
200
Seeing Through Serverless: Observability for AWS Lambda with ADOT and CloudWatch Application Signals
seike460
PRO
1
110
My Marp Sample
sinoue0108
0
140
承認済みなのに差戻しできてしまうバグ、型で潰せます
shinchit
0
130
What We Talk About When We Talk About XP
m_seki
2
320
{ Android | Kotlin } Gradle Plugin in 2026
ryunen344
1
270
T3DD26: From RAGs to Riches
martinhelmich
0
140
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
10k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
840
Evolving SEO for Evolving Search Engines
ryanjones
0
280
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
260
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
300
BBQ
matthewcrist
89
10k
A designer walks into a library…
pauljervisheath
211
24k
Optimising Largest Contentful Paint
csswizardry
37
3.9k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
220
Site-Speed That Sticks
csswizardry
13
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.7k
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