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
December 06, 2022
Programming
270
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Wasmысле?
Еще один докладик о Wasm
Polina Gurtovaya
December 06, 2022
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
1k
Давайте все заблокируем
hellsquirrel
0
360
Магия декларативныx схем.
hellsquirrel
0
390
ML for HolyJS
hellsquirrel
0
190
Идеальный способ заблюрить белочку
hellsquirrel
0
190
ML/DL на фронте
hellsquirrel
0
240
InsertableStreams
hellsquirrel
0
120
WebRTC-404
hellsquirrel
0
570
Давайте декодируем кодеки
hellsquirrel
0
620
Other Decks in Programming
See All in Programming
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
230
Modding RubyKaigi for Myself
yui_knk
0
910
The ROI of Quarkus for Spring Boot Applications
hollycummins
0
100
さぁV100、メモリをお食べ・・・
nilpe
0
130
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
1
640
Lessons from Spec-Driven Development
simas
PRO
0
150
TAKTでAI駆動開発の品質を設計する
j5ik2o
6
1.1k
dRuby over BLE
makicamel
2
330
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
230
Old Dog, New Tricks: The Java 25 Reinvention - JNation
bazlur_rahman
0
150
JavaDoc 再入門
nagise
0
310
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
150
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Documentation Writing (for coders)
carmenintech
77
5.4k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
280
A better future with KSS
kneath
240
18k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
140
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
210
The Art of Programming - Codeland 2020
erikaheidi
57
14k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
480
Paper Plane
katiecoart
PRO
1
51k
Designing Experiences People Love
moore
143
24k
Transcript
None
Wasmысле?
Пишем код и вжух!
Как происходит вжух?
Нечто превращает текст написаный человечком (source) в что-то понятное вашему
компьютеру (target) Это нечто называют интерпретатором или компилятором
Интерпретатор сразу выполняет исходный код Компилятор превращает исходный код в
другой код (более удобный для выполнения и более низкоуровневый)
class Box { constructor(a) { this._value = a; } fmap(f)
{ return new Box(f(this._value)); } } console.log(new Box(41).fmap((x) => x + 1)); 0xc700025a8ba @ 0 : 16 02 LdaCurrentContextSlot [2] 0xc700025a8bc @ 2 : aa 00 ThrowReferenceErrorIfHole [0] 0xc700025a8be @ 4 : c4 Star0 0xc700025a8bf @ 5 : 2d 02 01 00 GetNamedProperty <this>, [1], [0] 0xc700025a8c3 @ 9 : c2 Star2 0xc700025a8c4 @ 10 : 62 03 f8 02 CallUndefinedReceiver1 a0, r2, [2] 0xc700025a8c8 @ 14 : c3 Star1 0xc700025a8c9 @ 15 : 0b fa Ldar r0 0xc700025a8cb @ 17 : 69 fa f9 01 04 Construct r0, r1-r1, [4] 0xc700025a8d0 @ 22 : a9 Return
Парсим Оптимизируем Кодогенерируем Вжух на самом дела вжух-вжух-вжух
None
CreateFunctionContext [0], [1] PushContext r2 CreateClosure [1], [0], #2 Star1
LdaZero Star0 StaCurrentContextSlot [2] CallUndefinedReceiver0 r1, [0] LdaCurrentContextSlot [2] Return Полюбуйтесь на V8 байт-код
Было бы круто не сочинять компилятор для каждого языка, а
переиспользовать готовые кусочки Цепочки IR
12
При должной сноровке можно скомпилировать все во все :) Но
мы не хотим “все” мы хотим удобное промежуточное представление И как только оно у нас будет, нужно научить браузеры его выполнять
WebAssembly это то самое промежуточное представление Компактное и низкоуровневое
Пойдемте экспериментировать!
.wasm и .wat это текстовый и бинарный форматы Wasm
17 (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"))
func (export "add") (param i32 i32) (result i32) local.get 0
local.get 1 i32.add) Module Memory Function Instruction Table add(1,2)
Wasm интегрируется в host- окружение by design
Помните что Wasm это IR? И это IR никак не
связано с окружением
Portability
None
Wasm – изолированная песочница
Чтобы Wasm подружилась с окружением нужно описать какие API будет
предоставлять хост
И тут бы рассказать про WASI…
Но мы лучше заблюрим белочку :)
Магия заблюривания [[ 0 0 0 0 0 0 255
150 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 0 0 255 0 232 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 255 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 0 255 0 0 101 0 0 0 0 0 0 0 0 0 0 0 254 255 255 255 148 0 0 0] [ 0 0 0 0 0 255 0 0 0 0 0 0 0 0 0 0 189 255 166 0 0 0 0 255 0 0 0] [ 0 0 0 0 0 0 255 0 255 0 0 0 0 255 247 0 0 0 0 0 0 0 0 255 0 0 0] [ 0 0 0 0 0 0 84 0 250 0 0 0 255 0 0 0 0 0 0 0 0 0 139 242 0 0 0] [ 0 0 0 0 0 0 0 255 0 255 0 104 0 0 0 0 0 0 0 0 0 26 25 0 237 0 0] [ 0 0 0 0 0 0 0 186 0 0 114 0 0 0 0 0 0 0 0 0 181 253 0 0 255 0 0] [ 0 0 0 0 0 0 0 0 255 0 3 255 0 0 0 0 0 0 0 255 0 0 0 0 255 68 3] [ 0 0 0 0 0 0 254 0 0 216 0 0 94 0 0 0 0 255 183 0 0 0 0 0 197 0 0] [ 0 0 0 0 0 255 0 0 0 255 251 255 0 0 0 0 248 0 0 0 0 0 0 0 58 0 0] [ 0 0 0 0 255 0 0 0 0 103 0 0 0 0 251 155 0 0 2 4 255 255 252 250 252 254 254] [ 0 0 0 255 0 0 0 0 0 0 0 0 1 255 3 0 0 0 226 255 0 0 0 0 0 0 0] [ 0 0 231 0 0 0 0 0 0 0 41 255 0 0 0 0 0 0 0 0 225 255 0 0 0 0 0] [ 0 0 255 0 0 0 0 0 0 250 199 0 0 0 0 0 0 0 0 0 0 0 177 255 0 0 0] [ 0 255 0 0 0 0 0 233 44 0 0 0 0 0 0 0 0 0 0 0 0 142 22 0 0 0 0] [134 34 0 0 0 217 255 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0] [255 0 195 255 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 254 0 0 0 0 0 0] [ 84 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 255 0 0 0] [255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 252 245 0 0 0] [ 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 163 0 0 0 0 0] [ 0 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0 0 13 255 253] [ 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 25 0 0 0 0 0] [ 0 0 0 224 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 255 12 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 0 0 243 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 0 0 0 3 122 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 27] [ 0 0 0 0 0 0 0 0 255 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255] [ 0 0 0 0 0 0 0 0 0 5 252 45 0 0 0 0 0 0 0 0 0 0 0 0 0 0 243] [ 0 0 0 0 0 0 0 0 0 0 0 23 255 0 0 0 0 0 0 0 0 0 0 0 0 255 0] [ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 255 60 0 0 0 0 0 0 255 0 0] [ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 74 255 255 255 255 255 255 0 0 0]] [[ 0 15 31 47 79 118 124 54 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 31 79 79 47 68 105 52 0 0 0 0 0 0 0 0 0 15 47 63 63 57 34 9 0] [ 0 15 63 95 63 44 57 28 0 0 0 0 0 0 11 39 54 68 105 127 127 130 100 34 0] [ 0 0 15 63 95 70 44 38 15 0 0 15 47 46 39 79 108 89 68 63 63 105 130 57 0] [ 0 0 0 15 69 90 84 95 47 0 15 63 110 93 42 39 54 36 10 0 8 80 134 63 0] [ 0 0 0 0 26 68 105 126 79 22 44 86 79 46 15 0 0 0 0 1 22 85 126 75 14] [ 0 0 0 0 5 54 108 106 86 59 49 44 15 0 0 0 0 0 11 41 61 57 87 106 45] [ 0 0 0 0 0 39 94 87 62 67 59 22 0 0 0 0 0 15 54 94 90 36 64 129 71] [ 0 0 0 0 15 43 71 89 66 60 77 43 5 0 0 15 43 70 86 70 43 15 60 129 77] [ 0 0 0 15 63 79 47 74 117 106 91 55 11 0 15 62 102 93 54 15 0 0 44 92 52] [ 0 0 15 63 95 63 15 51 135 146 101 43 21 41 66 87 74 39 28 48 63 63 82 102 83] [ 0 15 63 95 63 15 0 28 73 76 47 32 63 98 85 50 29 45 79 112 127 126 129 133 130] [ 14 60 94 63 15 0 0 6 15 27 34 48 80 73 35 9 28 89 122 124 109 79 62 63 63] [ 44 105 76 15 0 0 0 15 48 82 81 48 32 16 0 0 14 44 74 104 103 70 43 15 0] [ 78 108 46 0 0 14 31 51 92 102 59 15 0 0 0 0 0 0 14 53 87 103 87 31 0] [ 92 66 15 13 43 74 79 55 49 40 12 0 0 0 0 0 0 0 15 49 65 61 45 15 0] [ 85 60 60 75 102 105 63 20 2 0 0 0 0 0 0 0 0 0 48 104 67 11 1 0 0] [ 74 82 120 109 75 45 15 0 0 0 0 0 0 0 0 0 0 0 48 96 63 47 47 15 0] [ 54 40 60 47 15 0 0 0 0 0 0 0 0 0 0 0 0 0 16 32 63 142 142 47 0] [ 69 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 67 151 140 46 0] [ 81 32 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 36 88 83 47 32 48] [ 51 49 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 43 87 43 1 35 97] [ 33 78 59 14 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19 38 19 0 17 48] [ 15 75 104 45 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 3 1 0 0 0] [ 0 45 109 80 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 15 64 96 63 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 15 62 92 62 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] [ 0 0 0 15 62 87 47 7 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1] [ 0 0 0 0 16 47 62 47 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19] [ 0 0 0 0 0 8 47 72 49 35 21 2 0 0 0 0 0 0 0 0 0 0 0 0 48] [ 0 0 0 0 0 0 15 32 49 71 61 39 15 0 0 0 0 0 0 0 0 0 0 15 78] [ 0 0 0 0 0 0 0 0 16 37 59 69 31 15 47 51 23 3 0 0 0 0 15 63 95] [ 0 0 0 0 0 0 0 0 0 1 18 33 15 31 95 107 72 60 63 63 63 63 79 95 63]] [[0.0625 0.125 0.0625] [0.125 0.25 0.125 ] [0.0625 0.125 0.0625]] 0.0625 0.125 0.0625 0.125 0.25 0.125 0.0625 0.125 0.0625
Пойдемте скорее блюрить
Код на Wasm более низкоуровневый Вы знаете все типы заранее
Вы никогда не столкнетесь с деоптимизациями Почему получается быстрее?
Когда Wasm это не так быстро и удобно ? :)
None
Эмулируем передачу данных по ссылке Создаем JS объект Кладем туда
что нам нужно Передаем ключик в Wasm Если есть только числа, как же быть?
Но недавно завезли Wasm Reference types И все стало куда
проще :)
Давайте посмотрим на то, как на самом деле Wasm модуль
попадает в браузер
GC: хорошо или плохо?)
Ваша программка выполняется Данные заботливо складываются на кучу Память закончилась
И тут…
None
В WebAssembly нет никакой сборки мусора (пока :)
А что насчет многопоточности ?
Позволяет блюрить белочек Итак, основная польза Wasm В.десять.раз.быстрее
Спасибо!
Бинарный формат: • Эффективно парсить • Эффективно загружать Кое-что еще…
Низкоуровневое представление • Быстрее компилировать • Больше оптимизаций Кое-что еще…
Изоляция из коробки Кое-что еще…
Многие языки можно скомпилировать в Wasm Кое-что еще…
Не зависит от окружения Кое-что еще…
Круто подходит для написания плагинов
Сидит на эджах
Дружит с блокчейнами
Еще раз спасибо :) bit.ly/wasm-blur