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
370
Магия декларативны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
Давайте декодируем кодеки
hellsquirrel
0
620
Other Decks in Programming
See All in Programming
AIエージェント時代のコードレビューを設計する
nogu66
6
2.6k
高専キャリア LT 発表内容
crysta1221
6
5.7k
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
h1d3mun3
1
170
iOSDC2026登壇資料.pdf
riofujimon
0
110
PHPプロジェクトの結合バランスを可視化する #php_night
kajitack
0
240
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
danybony
1
240
デプロイ直後のレイテンシスパイクを調べたら、 Railsの仕様にたどり着いた
nhsykym
0
110
RSSとCodexを使ってX投稿自動化してみた
ochtum
0
110
巨大モノリシックアプリ モダン化大作戦
ktcryomm
0
890
Intent as Code
shoppingjaws
6
940
WebMCP Challenge に星空観察アプリで参加した話
okajun35
0
140
Deep dive into the select statement (GopherCon UK)
jespino
0
170
Featured
See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
820
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Language of Interfaces
destraynor
162
27k
Writing Fast Ruby
sferik
630
63k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
250
Optimising Largest Contentful Paint
csswizardry
37
3.9k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
850
A Modern Web Designer's Workflow
chriscoyier
699
190k
A designer walks into a library…
pauljervisheath
211
25k
Six Lessons from altMBA
skipperchong
29
4.5k
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