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
2
190
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
890
Давайте все заблокируем
hellsquirrel
0
280
Wasmысле?
hellsquirrel
0
200
Магия декларативныx схем.
hellsquirrel
0
320
ML for HolyJS
hellsquirrel
0
120
Идеальный способ заблюрить белочку
hellsquirrel
0
140
ML/DL на фронте
hellsquirrel
0
170
InsertableStreams
hellsquirrel
0
77
WebRTC-404
hellsquirrel
0
490
Other Decks in Programming
See All in Programming
Optimizing JRuby 10
headius
0
570
ComposeでWebアプリを作る技術
tbsten
0
130
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
110
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
130
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
540
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
240
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
2
970
note の Elasticsearch 更新系を支える技術
tchov
9
3.5k
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
2
1.9k
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
Носок на сок
bo0om
0
1.2k
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
160
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
6k
Visualization
eitanlees
146
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A designer walks into a library…
pauljervisheath
205
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
560
Building an army of robots
kneath
305
45k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
Docker and Python
trallard
44
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Language of Interfaces
destraynor
158
25k
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