Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Wasmысле?
Search
Polina Gurtovaya
December 06, 2022
Programming
280
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
1.1k
Давайте все заблокируем
hellsquirrel
0
380
Магия декларативныx схем.
hellsquirrel
0
400
ML for HolyJS
hellsquirrel
0
210
Идеальный способ заблюрить белочку
hellsquirrel
0
200
ML/DL на фронте
hellsquirrel
0
250
InsertableStreams
hellsquirrel
0
120
WebRTC-404
hellsquirrel
0
590
Давайте декодируем кодеки
hellsquirrel
0
620
Other Decks in Programming
See All in Programming
GraphQL の onError と Nullability のこれから
quramy
0
190
プロジェクトコードをキレイキレイしよう!暗黙的な参照を読み解く静的解析
ostk0069
0
150
Groovy as a human and AI friendly programming language
paulk
0
130
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
kasacchiful
PRO
0
230
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
0
170
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
160
AmebaブログはKMPから卒業します
kmars0605
0
290
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる~既存の運用と新しい可能性をつなぎ合わせてきたCREの話~
tosite
0
110
AI時代のFlutter品質設計 — アプリ品質を守るQuality Layers
omatty198
0
260
私なりのハーネスエンジニアリング ~独自の言語処理系の開発を通して~
seosoft
0
120
Next.js: The final boss of Web Performance
guaca
0
350
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
l2hyunwoo
0
230
Featured
See All Featured
30 Presentation Tips
portentint
PRO
1
440
Rails Girls Zürich Keynote
gr2m
96
14k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
490
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
510
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
300
Building AI with AI
inesmontani
PRO
1
1.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
720
Rebuilding a faster, lazier Slack
samanthasiow
85
9.7k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
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