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

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

Производительность, V8, дракончики

C27317d1ebe4e4a01504acab9d87fe61?s=128

Polina Gurtovaya

June 27, 2020
Tweet

Transcript

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

  2. 2

  3. 3

  4. 4

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

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

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

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

  9. 9 Performance ∝ 1 ExecutionTime

  10. 10 Процессоры не понимают этот код function div() { return

    Math.random() / 2; } const arr = []; for (let i = 0; i < 11088; i++) { arr[i] = div(); }
  11. 11 Зато понимают вот этот

  12. 12

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

  14. 14 Compiler

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

  16. 16 Frontend Backend

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

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

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

  20. 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. 21 Магия компиляторов Function inlining Common subexpression elimination Constant propagations

    Code motion Strength reduction Branch offset optimization Register allocation
  22. 22 IR, идеальное для Web Легко превратить в машинный код

    Не зависит от архитектуры системы Компактное Легко парсить
  23. 23 WebAssembly is a binary instruction format for a stack-based

    virtual machine. WebAssembly is a virtual ISA
  24. 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. 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. 26 JavaScript pipeline

  27. Готовим 27

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

    код
  29. 29 Hot functions function div() { return Math.random() / 2;

    } const arr = []; for (let i = 0; i < 11088; i++) { arr[i] = div(); }
  30. 30 V8

  31. 31 Performance ∝ 1 ExecutionTime

  32. 32 WebAssembly pipeline

  33. Готовим 33

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

  35. 35 Performance ∝ 1 ExecutionTime

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

    Кб
  37. 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. 38 Не то чтобы минусы… но все же Большие размеры

    .wasm-файликов Отдельный этап подготовки Все медленно для языков с GC Нет SIMD (Single Instruction Multiple Data) Нет потоков MVP
  39. 39 WebAssembly в моем проекте Хочу портировать существующий код не

    на JS Там т-а-а-а-кие бенчмарки! WebAssembly это модно! Большая часть нашей системы должна быть быстрой, мы уже оптимизировали все что могли
  40. 40 Спасибо! @polina_gurtovaya @pgurtovaya hellsquirrel@evl.ms 40 @evilmartians @evilmartians_ru evilmartians.com github.com/HellSquirrel/wasm-talks