Slide 1

Slide 1 text

WebAssembly: Приручи дракона

Slide 2

Slide 2 text

2

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

WebAssembly: Приручи дракона

Slide 6

Slide 6 text

6 Это доклад об очевидных вещах И немного о WebAssembly

Slide 7

Slide 7 text

7 Фронтенд — это песочница

Slide 8

Slide 8 text

8 Особенная песочница :)

Slide 9

Slide 9 text

9 Performance ∝ 1 ExecutionTime

Slide 10

Slide 10 text

10 Процессоры не понимают этот код function div() { return Math.random() / 2; } const arr = []; for (let i = 0; i < 11088; i++) { arr[i] = div(); }

Slide 11

Slide 11 text

11 Зато понимают вот этот

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

13 Как сгенерировать код? function div(){…}

Slide 14

Slide 14 text

14 Compiler

Slide 15

Slide 15 text

15 Можно генерировать что угодно

Slide 16

Slide 16 text

16 Frontend Backend

Slide 17

Slide 17 text

17 Можно комбинировать frontend- и backend- части компиляторов

Slide 18

Slide 18 text

18 Цепочка IR может быть длинной

Slide 19

Slide 19 text

19 В промежуточное представление можно зашить оптимизации

Slide 20

Slide 20 text

20 #include 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 }

Slide 21

Slide 21 text

21 Магия компиляторов Function inlining Common subexpression elimination Constant propagations Code motion Strength reduction Branch offset optimization Register allocation

Slide 22

Slide 22 text

22 IR, идеальное для Web Легко превратить в машинный код Не зависит от архитектуры системы Компактное Легко парсить

Slide 23

Slide 23 text

23 WebAssembly is a binary instruction format for a stack-based virtual machine. WebAssembly is a virtual ISA

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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"))

Slide 26

Slide 26 text

26 JavaScript pipeline

Slide 27

Slide 27 text

Готовим 27

Slide 28

Slide 28 text

28 Оптимизации занимают время, поэтому мы не можем оптимизировать весь код

Slide 29

Slide 29 text

29 Hot functions function div() { return Math.random() / 2; } const arr = []; for (let i = 0; i < 11088; i++) { arr[i] = div(); }

Slide 30

Slide 30 text

30 V8

Slide 31

Slide 31 text

31 Performance ∝ 1 ExecutionTime

Slide 32

Slide 32 text

32 WebAssembly pipeline

Slide 33

Slide 33 text

Готовим 33

Slide 34

Slide 34 text

34 Выполняем (V8)

Slide 35

Slide 35 text

35 Performance ∝ 1 ExecutionTime

Slide 36

Slide 36 text

36 +Кэширование Кэшируется прямо скомпилированный код! Если размер > 128 Кб

Slide 37

Slide 37 text

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) ); });

Slide 38

Slide 38 text

38 Не то чтобы минусы… но все же Большие размеры .wasm-файликов Отдельный этап подготовки Все медленно для языков с GC Нет SIMD (Single Instruction Multiple Data) Нет потоков MVP

Slide 39

Slide 39 text

39 WebAssembly в моем проекте Хочу портировать существующий код не на JS Там т-а-а-а-кие бенчмарки! WebAssembly это модно! Большая часть нашей системы должна быть быстрой, мы уже оптимизировали все что могли

Slide 40

Slide 40 text

40 Спасибо! @polina_gurtovaya @pgurtovaya [email protected] 40 @evilmartians @evilmartians_ru evilmartians.com github.com/HellSquirrel/wasm-talks