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

Wasmысле?

 Wasmысле?

Еще один докладик о Wasm

Polina Gurtovaya

December 06, 2022
Tweet

More Decks by Polina Gurtovaya

Other Decks in Programming

Transcript

  1. Wasmысле?

    View full-size slide

  2. Пишем код и вжух!

    View full-size slide

  3. Как происходит вжух?

    View full-size slide

  4. Нечто превращает текст написаный человечком
    (source) в что-то понятное вашему компьютеру
    (target)


    Это нечто называют интерпретатором или
    компилятором

    View full-size slide

  5. Интерпретатор сразу выполняет исходный код


    Компилятор превращает исходный код в другой код
    (более удобный для выполнения и более
    низкоуровневый)

    View full-size slide

  6. class Box {


    constructor(a) {


    this._value = a;


    }


    fmap(f) {


    return new Box(f(this._value));


    }


    }


    console.log(new Box(41).fmap((x) => x + 1));


    0xc700025a8ba @ 0 : 16 02 LdaCurrentContextSlot [2]


    0xc700025a8bc @ 2 : aa 00 ThrowReferenceErrorIfHole [0]


    0xc700025a8be @ 4 : c4 Star0


    0xc700025a8bf @ 5 : 2d 02 01 00 GetNamedProperty , [1], [0]


    0xc700025a8c3 @ 9 : c2 Star2


    0xc700025a8c4 @ 10 : 62 03 f8 02 CallUndefinedReceiver1 a0, r2, [2]


    0xc700025a8c8 @ 14 : c3 Star1


    0xc700025a8c9 @ 15 : 0b fa Ldar r0


    0xc700025a8cb @ 17 : 69 fa f9 01 04 Construct r0, r1-r1, [4]


    0xc700025a8d0 @ 22 : a9 Return

    View full-size slide

  7. Парсим


    Оптимизируем


    Кодогенерируем
    Вжух на самом дела вжух-вжух-вжух

    View full-size slide

  8. CreateFunctionContext [0], [1]
    PushContext r2
    CreateClosure [1], [0], #2
    Star1
    LdaZero
    Star0
    StaCurrentContextSlot [2]
    CallUndefinedReceiver0 r1, [0]
    LdaCurrentContextSlot [2]
    Return
    Полюбуйтесь на V8 байт-код

    View full-size slide

  9. Было бы круто не сочинять
    компилятор для каждого языка, а
    переиспользовать готовые кусочки
    Цепочки IR

    View full-size slide

  10. При должной сноровке можно скомпилировать
    все во все :)


    Но мы не хотим “все” мы хотим удобное
    промежуточное представление


    И как только оно у нас будет, нужно
    научить браузеры его выполнять

    View full-size slide

  11. WebAssembly это то самое промежуточное
    представление


    Компактное и низкоуровневое

    View full-size slide

  12. Пойдемте экспериментировать!

    View full-size slide

  13. .wasm и .wat это текстовый и бинарный
    форматы Wasm

    View full-size slide

  14. 17
    (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 full-size slide

  15. func (export "add")
    (param i32 i32)
    (result i32)


    local.get 0


    local.get 1


    i32.add)


    Module


    Memory


    Function


    Instruction


    Table
    add(1,2)

    View full-size slide

  16. Wasm интегрируется в host-
    окружение by design

    View full-size slide

  17. Помните что Wasm это IR?


    И это IR никак не связано с
    окружением

    View full-size slide

  18. Wasm – изолированная песочница

    View full-size slide

  19. Чтобы Wasm подружилась с
    окружением нужно описать какие
    API будет предоставлять хост

    View full-size slide

  20. И тут бы рассказать про
    WASI…

    View full-size slide

  21. Но мы лучше заблюрим
    белочку :)

    View full-size slide

  22. Магия заблюривания
    [[ 0 0 0 0 0 0 255 150 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 0 0 255 0 232 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 255 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 0 255 0 0 101 0 0 0 0 0 0 0 0 0 0 0 254 255 255 255 148 0 0 0]


    [ 0 0 0 0 0 255 0 0 0 0 0 0 0 0 0 0 189 255 166 0 0 0 0 255 0 0 0]


    [ 0 0 0 0 0 0 255 0 255 0 0 0 0 255 247 0 0 0 0 0 0 0 0 255 0 0 0]


    [ 0 0 0 0 0 0 84 0 250 0 0 0 255 0 0 0 0 0 0 0 0 0 139 242 0 0 0]


    [ 0 0 0 0 0 0 0 255 0 255 0 104 0 0 0 0 0 0 0 0 0 26 25 0 237 0 0]


    [ 0 0 0 0 0 0 0 186 0 0 114 0 0 0 0 0 0 0 0 0 181 253 0 0 255 0 0]


    [ 0 0 0 0 0 0 0 0 255 0 3 255 0 0 0 0 0 0 0 255 0 0 0 0 255 68 3]


    [ 0 0 0 0 0 0 254 0 0 216 0 0 94 0 0 0 0 255 183 0 0 0 0 0 197 0 0]


    [ 0 0 0 0 0 255 0 0 0 255 251 255 0 0 0 0 248 0 0 0 0 0 0 0 58 0 0]


    [ 0 0 0 0 255 0 0 0 0 103 0 0 0 0 251 155 0 0 2 4 255 255 252 250 252 254 254]


    [ 0 0 0 255 0 0 0 0 0 0 0 0 1 255 3 0 0 0 226 255 0 0 0 0 0 0 0]


    [ 0 0 231 0 0 0 0 0 0 0 41 255 0 0 0 0 0 0 0 0 225 255 0 0 0 0 0]


    [ 0 0 255 0 0 0 0 0 0 250 199 0 0 0 0 0 0 0 0 0 0 0 177 255 0 0 0]


    [ 0 255 0 0 0 0 0 233 44 0 0 0 0 0 0 0 0 0 0 0 0 142 22 0 0 0 0]


    [134 34 0 0 0 217 255 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0]


    [255 0 195 255 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 254 0 0 0 0 0 0]


    [ 84 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 255 0 0 0]


    [255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 252 245 0 0 0]


    [ 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 163 0 0 0 0 0]


    [ 0 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0 0 13 255 253]


    [ 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 25 0 0 0 0 0]


    [ 0 0 0 224 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 255 12 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 0 0 243 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 0 0 0 3 122 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 27]


    [ 0 0 0 0 0 0 0 0 255 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255]


    [ 0 0 0 0 0 0 0 0 0 5 252 45 0 0 0 0 0 0 0 0 0 0 0 0 0 0 243]


    [ 0 0 0 0 0 0 0 0 0 0 0 23 255 0 0 0 0 0 0 0 0 0 0 0 0 255 0]


    [ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 255 60 0 0 0 0 0 0 255 0 0]


    [ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 74 255 255 255 255 255 255 0 0 0]]
    [[ 0 15 31 47 79 118 124 54 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 31 79 79 47 68 105 52 0 0 0 0 0 0 0 0 0 15 47 63 63 57 34 9 0]


    [ 0 15 63 95 63 44 57 28 0 0 0 0 0 0 11 39 54 68 105 127 127 130 100 34 0]


    [ 0 0 15 63 95 70 44 38 15 0 0 15 47 46 39 79 108 89 68 63 63 105 130 57 0]


    [ 0 0 0 15 69 90 84 95 47 0 15 63 110 93 42 39 54 36 10 0 8 80 134 63 0]


    [ 0 0 0 0 26 68 105 126 79 22 44 86 79 46 15 0 0 0 0 1 22 85 126 75 14]


    [ 0 0 0 0 5 54 108 106 86 59 49 44 15 0 0 0 0 0 11 41 61 57 87 106 45]


    [ 0 0 0 0 0 39 94 87 62 67 59 22 0 0 0 0 0 15 54 94 90 36 64 129 71]


    [ 0 0 0 0 15 43 71 89 66 60 77 43 5 0 0 15 43 70 86 70 43 15 60 129 77]


    [ 0 0 0 15 63 79 47 74 117 106 91 55 11 0 15 62 102 93 54 15 0 0 44 92 52]


    [ 0 0 15 63 95 63 15 51 135 146 101 43 21 41 66 87 74 39 28 48 63 63 82 102 83]


    [ 0 15 63 95 63 15 0 28 73 76 47 32 63 98 85 50 29 45 79 112 127 126 129 133 130]


    [ 14 60 94 63 15 0 0 6 15 27 34 48 80 73 35 9 28 89 122 124 109 79 62 63 63]


    [ 44 105 76 15 0 0 0 15 48 82 81 48 32 16 0 0 14 44 74 104 103 70 43 15 0]


    [ 78 108 46 0 0 14 31 51 92 102 59 15 0 0 0 0 0 0 14 53 87 103 87 31 0]


    [ 92 66 15 13 43 74 79 55 49 40 12 0 0 0 0 0 0 0 15 49 65 61 45 15 0]


    [ 85 60 60 75 102 105 63 20 2 0 0 0 0 0 0 0 0 0 48 104 67 11 1 0 0]


    [ 74 82 120 109 75 45 15 0 0 0 0 0 0 0 0 0 0 0 48 96 63 47 47 15 0]


    [ 54 40 60 47 15 0 0 0 0 0 0 0 0 0 0 0 0 0 16 32 63 142 142 47 0]


    [ 69 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 67 151 140 46 0]


    [ 81 32 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 36 88 83 47 32 48]


    [ 51 49 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 43 87 43 1 35 97]


    [ 33 78 59 14 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19 38 19 0 17 48]


    [ 15 75 104 45 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 3 1 0 0 0]


    [ 0 45 109 80 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 15 64 96 63 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 15 62 92 62 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0]


    [ 0 0 0 15 62 87 47 7 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1]


    [ 0 0 0 0 16 47 62 47 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19]


    [ 0 0 0 0 0 8 47 72 49 35 21 2 0 0 0 0 0 0 0 0 0 0 0 0 48]


    [ 0 0 0 0 0 0 15 32 49 71 61 39 15 0 0 0 0 0 0 0 0 0 0 15 78]


    [ 0 0 0 0 0 0 0 0 16 37 59 69 31 15 47 51 23 3 0 0 0 0 15 63 95]


    [ 0 0 0 0 0 0 0 0 0 1 18 33 15 31 95 107 72 60 63 63 63 63 79 95 63]]
    [[0.0625 0.125 0.0625]


    [0.125 0.25 0.125 ]


    [0.0625 0.125 0.0625]]
    0.0625 0.125 0.0625 0.125 0.25 0.125 0.0625 0.125 0.0625

    View full-size slide

  23. Пойдемте скорее блюрить

    View full-size slide

  24. Код на Wasm более
    низкоуровневый


    Вы знаете все типы заранее


    Вы никогда не столкнетесь с
    деоптимизациями
    Почему получается быстрее?

    View full-size slide

  25. Когда Wasm это не так
    быстро и удобно ? :)

    View full-size slide

  26. Эмулируем передачу данных по ссылке


    Создаем JS объект


    Кладем туда что нам нужно


    Передаем ключик в Wasm
    Если есть только числа, как же быть?

    View full-size slide

  27. Но недавно завезли


    Wasm Reference types


    И все стало куда проще :)

    View full-size slide

  28. Давайте посмотрим на то, как
    на самом деле Wasm модуль
    попадает в браузер

    View full-size slide

  29. GC: хорошо или плохо?)

    View full-size slide

  30. Ваша программка выполняется


    Данные заботливо складываются на кучу


    Память закончилась


    И тут…

    View full-size slide

  31. В WebAssembly нет никакой сборки
    мусора (пока :)

    View full-size slide

  32. А что насчет многопоточности ?

    View full-size slide

  33. Позволяет блюрить белочек
    Итак, основная польза Wasm
    В.десять.раз.быстрее

    View full-size slide

  34. Спасибо!

    View full-size slide

  35. Бинарный формат:


    • Эффективно парсить


    • Эффективно загружать
    Кое-что еще…

    View full-size slide

  36. Низкоуровневое представление


    • Быстрее компилировать


    • Больше оптимизаций
    Кое-что еще…

    View full-size slide

  37. Изоляция из коробки
    Кое-что еще…

    View full-size slide

  38. Многие языки можно скомпилировать в Wasm
    Кое-что еще…

    View full-size slide

  39. Не зависит от окружения
    Кое-что еще…

    View full-size slide

  40. Круто подходит для написания плагинов


    View full-size slide

  41. Сидит на эджах

    View full-size slide

  42. Дружит с блокчейнами

    View full-size slide

  43. Еще раз спасибо :)
    bit.ly/wasm-blur


    View full-size slide