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
WebAssembly: Приручи дракона
Search
Polina Gurtovaya
June 27, 2020
Programming
2
480
WebAssembly: Приручи дракона
Производительность, V8, дракончики
Polina Gurtovaya
June 27, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
980
Давайте все заблокируем
hellsquirrel
0
310
Wasmысле?
hellsquirrel
0
230
Магия декларативныx схем.
hellsquirrel
0
350
ML for HolyJS
hellsquirrel
0
150
Идеальный способ заблюрить белочку
hellsquirrel
0
160
ML/DL на фронте
hellsquirrel
0
200
InsertableStreams
hellsquirrel
0
92
WebRTC-404
hellsquirrel
0
520
Other Decks in Programming
See All in Programming
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
130
AIコーディングAgentとの向き合い方
eycjur
0
250
TDD 実践ミニトーク
contour_gara
1
270
Kiroで始めるAI-DLC
kaonash
2
500
Amazon Nova Canvasの新機能Virtual try-onで実装するプリクラ風アプリ
hideg
0
100
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
130
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
2
980
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
800
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Done Done
chrislema
185
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Fireside Chat
paigeccino
39
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
WebAssembly: Приручи дракона
2
3
4
WebAssembly: Приручи дракона
6 Это доклад об очевидных вещах И немного о WebAssembly
7 Фронтенд — это песочница
8 Особенная песочница :)
9 Performance ∝ 1 ExecutionTime
10 Процессоры не понимают этот код function div() { return
Math.random() / 2; } const arr = []; for (let i = 0; i < 11088; i++) { arr[i] = div(); }
11 Зато понимают вот этот
12
13 Как сгенерировать код? function div(){…}
14 Compiler
15 Можно генерировать что угодно
16 Frontend Backend
17 Можно комбинировать frontend- и backend- части компиляторов
18 Цепочка IR может быть длинной
19 В промежуточное представление можно зашить оптимизации
20 #include <stdio.h> int main() { int result = 0;
for (int i = 0; i < 100; ++i) { if (i > 10) { result += i * 2; } else { result += i * 11; } } printf("%d\n", result); return 0; } define hidden i32 @main() local_unnamed_addr #0 { entry: %0 = tail call i32 (i8*, ...) @iprintf(…), i32 10395) ret i32 0 }
21 Магия компиляторов Function inlining Common subexpression elimination Constant propagations
Code motion Strength reduction Branch offset optimization Register allocation
22 IR, идеальное для Web Легко превратить в машинный код
Не зависит от архитектуры системы Компактное Легко парсить
23 WebAssembly is a binary instruction format for a stack-based
virtual machine. WebAssembly is a virtual ISA
24 (func (export "add") (param i32) (param i32) (result i32)
local.get 0 local.get 1 i32.add) add(1, 2) Module Memory Function Instruction Table
25 (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"))
26 JavaScript pipeline
Готовим 27
28 Оптимизации занимают время, поэтому мы не можем оптимизировать весь
код
29 Hot functions function div() { return Math.random() / 2;
} const arr = []; for (let i = 0; i < 11088; i++) { arr[i] = div(); }
30 V8
31 Performance ∝ 1 ExecutionTime
32 WebAssembly pipeline
Готовим 33
34 Выполняем (V8)
35 Performance ∝ 1 ExecutionTime
36 +Кэширование Кэшируется прямо скомпилированный код! Если размер > 128
Кб
WebAssembly + JS 37 (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) "dragon")) const importedMemory = new WebAssembly.Memory({ initial: 1, maximum: 10 }); WebAssembly.instantiateStreaming(fetch("simple.wasm"), { imports: { logger: function(arg) { console.log("first function call", arg); }, importedMemory } }).then(obj => { obj.instance.exports.exportedFunc(); const three = obj.instance.exports.add(1, 2); console.log("1 + 2 =", three); var memoryArray = new Uint32Array(importedMemory.buffer, 0, 10); console.log( "reading from memory", new TextDecoder("utf8").decode(memoryArray) ); });
38 Не то чтобы минусы… но все же Большие размеры
.wasm-файликов Отдельный этап подготовки Все медленно для языков с GC Нет SIMD (Single Instruction Multiple Data) Нет потоков MVP
39 WebAssembly в моем проекте Хочу портировать существующий код не
на JS Там т-а-а-а-кие бенчмарки! WebAssembly это модно! Большая часть нашей системы должна быть быстрой, мы уже оптимизировали все что могли
40 Спасибо! @polina_gurtovaya @pgurtovaya
[email protected]
40 @evilmartians @evilmartians_ru evilmartians.com github.com/HellSquirrel/wasm-talks