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
490
WebAssembly: Приручи дракона
Производительность, V8, дракончики
Polina Gurtovaya
June 27, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
990
Давайте все заблокируем
hellsquirrel
0
320
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
94
WebRTC-404
hellsquirrel
0
530
Other Decks in Programming
See All in Programming
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
560
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.2k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.6k
CSC305 Lecture 06
javiergs
PRO
0
210
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
210
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.1k
止められない医療アプリ、そっと Swift 6 へ
medley
1
130
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
CSC305 Lecture 01
javiergs
PRO
1
400
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
チームの境界をブチ抜いていけ
tokai235
0
100
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Designing for humans not robots
tammielis
254
26k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing Experiences People Love
moore
142
24k
Faster Mobile Websites
deanohume
310
31k
Visualization
eitanlees
148
16k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
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