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

Давайте все заблокируем

Давайте все заблокируем

Очевидности про потоки :)

Polina Gurtovaya

June 16, 2023
Tweet

More Decks by Polina Gurtovaya

Other Decks in Programming

Transcript

  1. Как


    заблокировать
    все?

    View full-size slide

  2. Очень плохо блокировать основной поток!
    • Все анимации замирают


    • Кнопочки не нажимаются


    • Запросы не уходят 🙀
    2

    View full-size slide

  3. Но если все выполняется в основном
    потоке…


    Вы всегда блокируете основной поток
    3

    View full-size slide

  4. Покапитаним
    • CPU выполняет инструкции


    • Может чуть-чуть параллелить
    6

    View full-size slide

  5. Ядер CPU значительно меньше чем
    программок на вашем компьютере
    7

    View full-size slide

  6. 8
    Concurrency – есть несколько задач, они
    выполняются


    Parallelism – есть несколько задач, они
    одновременно выполняются

    View full-size slide

  7. Concurrency обеспечивает runtime & OS
    9

    View full-size slide

  8. Потоки и процессы
    • ОS ставит таймер


    • Срабатывает таймер - генерируется прерывание


    • Выполняются другие команды


    • Что выполняется решает планировщик OS


    • IO – тоже прерывание
    10

    View full-size slide

  9. Процессы
    • Свое адресное пространство


    • Свое состояние (регистры)


    • Свои ресурсы
    11

    View full-size slide

  10. Как общаются процессы?
    • Пошарить ресурс


    • Пошарить память


    • Послать сигнал


    • Естественно это все обернуто в 10 оберток :)
    12

    View full-size slide

  11. Процессы все помнят :)
    13

    View full-size slide

  12. Потоки
    • В каждом процессе есть поток


    • Нет иерархии


    • Свой стек


    • Общая куча
    14

    View full-size slide

  13. Физические и зеленые потоки
    • OS может создавать процессы и потоки. Их
    называют физическими


    • Runtime вашего языка, тоже может создавать
    потоки


    • 1 Runtime thread : 1 Physical thread


    • N Rutnime threads: M Physical threads – green
    15

    View full-size slide

  14. 16
    Физическими процессами и потоками


    управляет планировщик

    View full-size slide

  15. A что там в ?
    17

    View full-size slide

  16. Multi-process application
    • Каждая вкладка заботливо упакована в свой
    процесс (rendering process)


    • Есть основной процесс с которым общаются
    вкладочки


    • В каждом rendering - process есть несколько
    потоков
    18

    View full-size slide

  17. Внутри браузерного процесса
    • Main thread


    • Thread pool


    • GPU thread


    • …
    19

    View full-size slide

  18. Внутри rendering - процесса
    • Main thread


    • Thread pool


    • Composite thread


    • Workers
    20

    View full-size slide

  19. 1 browser thread : 1 OS thread
    21

    View full-size slide

  20. Все очень безопасно и сложно
    Браузер должен предоставлять гарантии того что
    злобный код с одной странички не начнет портить
    другие. Для этого есть куча политик, CSP, Same
    Origin Policy и все в этом духе. Посадить сайт в
    песочницу не только сложно но и затратно по
    ресурсам. Прибавьте к этому существование iframe
    и браузерных расширений.
    22

    View full-size slide

  21. Rendering процесс
    • Там все в прошлом докладе уже рассказали :)


    • Чем же занимается Rendering процесс –
    Практически всем!
    23

    View full-size slide

  22. -> разбираем и собираем
    • Распарсить


    • Вырастить дерево (DOM)


    • Разобрать CSS


    • Подружить CSS в DOM (привязать правила к узлу)


    • Нарисовать красивое ->
    24

    View full-size slide

  23. -> строим красивое
    • layout - разместить элементы на странице


    • pre-paint


    • paint - сгенерировать структуры для рисования


    • commit - отправить в compositor


    • layerize - попилить на слои
    25

    View full-size slide

  24. -> рисуем красивое
    • rasterize - распилить на клетки


    • activate - собрать frame


    • aggregate - собрать все frames


    • рисование тяжелый процесс, поэтому он
    выполняется параллельно в отдельном GPU-
    процессе. Команды кушает Skia
    26

    View full-size slide

  25. Rendering pipeline
    • Результаты кешируются


    • На каждом этапе есть проверочка нужно ли его
    запускать
    27

    View full-size slide

  26. Demo time!


    максимальное блокирование!
    28

    View full-size slide

  27. Demo time!


    декодинг изображений
    29

    View full-size slide

  28. Demo time!


    блюр белочек
    32

    View full-size slide

  29. 34
    Параллельная компиляция

    View full-size slide

  30. Но хочется же параллельно!
    • WebWorkers - системный поток внутри rendering-
    процесса


    • Внутри инициализируется JS движок (Isolate)
    35

    View full-size slide

  31. 36
    // main thread


    const array = new Float32Array(1000 ** 100000).fill(Math.random())


    const worker = new Worker(new URL('./workerScript.ts', import.meta.url))


    worker.onmessage = e => {


    if (e.data === 'ready') {


    console.log('worker is ready')


    worker.postMessage(array)


    console.log(array)


    // transferable!


    worker.postMessage(array, [array.buffer])


    console.log(array)


    } else {


    setSum(e.data)


    }


    }


    // worker thread


    postMessage('ready')


    onmessage = function (event) {


    const data = event.data


    const result = data.reduce((acc: number, item: number) => acc + item, 0)


    postMessage(result)


    }


    export {}

    View full-size slide

  32. 38
    // main thread


    const array = new Float32Array(1000 ** 100000).fill(Math.random())


    const worker = new Worker(new URL('./workerScript.ts', import.meta.url))


    worker.onmessage = e => {


    if (e.data === 'ready') {


    console.log('worker is ready')


    worker.postMessage(array)


    console.log(array)


    // transferable!


    worker.postMessage(array, [array.buffer])


    console.log(array)


    } else {


    setSum(e.data)


    }


    }


    View full-size slide

  33. Transferable vs non-transferable

    View full-size slide

  34. Garbage collector
    • Stop-the-world


    • Minor Garbage Collector
    40

    View full-size slide

  35. SharedArrayBu
    ff
    er
    • Cross-Origin-Embedder-Policy: require-corp


    • Cross-Origin-Opener-Policy: same-origin
    41

    View full-size slide

  36. Так значит можно надолго блокировать основной поток?
    • Блокируется не все


    • Сначала измеряйте, потом оптимизируйте


    • Проанализируйте ваш алгоритм


    • Берите пример с браузера
    42

    View full-size slide

  37. Скоро будет в Доке!
    43
    …сейчас можно почитать вот тут


    https:/
    /hellsquirrel.dev/blog/threads

    View full-size slide

  38. Спасибо :)
    @polina_gurtovaya
    @pgurtovaya

    View full-size slide