Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Polina Gurtovaya

June 27, 2020
Tweet

More Decks by Polina Gurtovaya

Other Decks in Programming

Transcript

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

    View Slide

  2. 2

    View Slide

  3. 3

    View Slide

  4. 4

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. 9
    Performance ∝
    1
    ExecutionTime

    View Slide

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

    View Slide

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

    View Slide

  12. 12

    View Slide

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

    View Slide

  14. 14
    Compiler

    View Slide

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

    View Slide

  16. 16
    Frontend Backend

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 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
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  26. 26
    JavaScript pipeline

    View Slide

  27. Готовим
    27

    View Slide

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

    View Slide

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

    View Slide

  30. 30
    V8

    View Slide

  31. 31
    Performance ∝
    1
    ExecutionTime

    View Slide

  32. 32
    WebAssembly
    pipeline

    View Slide

  33. Готовим
    33

    View Slide

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

    View Slide

  35. 35
    Performance ∝
    1
    ExecutionTime

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide