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

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

Transcript

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

   View Slide

2. View Slide

3. View Slide

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. 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
    hellsquirrel@evl.ms
    40
    @evilmartians
    @evilmartians_ru
    evilmartians.com
    github.com/HellSquirrel/wasm-talks
    

    View Slide