Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Очень плохо блокировать основной поток! • Все анимации замирают • Кнопочки не нажимаются • Запросы не уходят 🙀 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

Покапитаним • CPU выполняет инструкции • Может чуть-чуть параллелить 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Потоки и процессы • ОS ставит таймер • Срабатывает таймер - генерируется прерывание • Выполняются другие команды • Что выполняется решает планировщик OS • IO – тоже прерывание 10

Slide 11

Slide 11 text

Процессы • Свое адресное пространство • Свое состояние (регистры) • Свои ресурсы 11

Slide 12

Slide 12 text

Как общаются процессы? • Пошарить ресурс • Пошарить память • Послать сигнал • Естественно это все обернуто в 10 оберток :) 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Потоки • В каждом процессе есть поток • Нет иерархии • Свой стек • Общая куча 14

Slide 15

Slide 15 text

Физические и зеленые потоки • OS может создавать процессы и потоки. Их называют физическими • Runtime вашего языка, тоже может создавать потоки • 1 Runtime thread : 1 Physical thread • N Rutnime threads: M Physical threads – green 15

Slide 16

Slide 16 text

16 Физическими процессами и потоками управляет планировщик

Slide 17

Slide 17 text

A что там в ? 17

Slide 18

Slide 18 text

Multi-process application • Каждая вкладка заботливо упакована в свой процесс (rendering process) • Есть основной процесс с которым общаются вкладочки • В каждом rendering - process есть несколько потоков 18

Slide 19

Slide 19 text

Внутри браузерного процесса • Main thread • Thread pool • GPU thread • … 19

Slide 20

Slide 20 text

Внутри rendering - процесса • Main thread • Thread pool • Composite thread • Workers 20

Slide 21

Slide 21 text

1 browser thread : 1 OS thread 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Rendering процесс • Там все в прошлом докладе уже рассказали :) • Чем же занимается Rendering процесс – Практически всем! 23

Slide 24

Slide 24 text

-> разбираем и собираем • Распарсить • Вырастить дерево (DOM) • Разобрать CSS • Подружить CSS в DOM (привязать правила к узлу) • Нарисовать красивое -> 24

Slide 25

Slide 25 text

-> строим красивое • layout - разместить элементы на странице • pre-paint • paint - сгенерировать структуры для рисования • commit - отправить в compositor • layerize - попилить на слои 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Rendering pipeline • Результаты кешируются • На каждом этапе есть проверочка нужно ли его запускать 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30

Slide 31

Slide 31 text

31

Slide 32

Slide 32 text

Demo time! блюр белочек 32

Slide 33

Slide 33 text

33

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Но хочется же параллельно! • WebWorkers - системный поток внутри rendering- процесса • Внутри инициализируется JS движок (Isolate) 35

Slide 36

Slide 36 text

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 {}

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Transferable vs non-transferable

Slide 40

Slide 40 text

Garbage collector • Stop-the-world • Minor Garbage Collector 40

Slide 41

Slide 41 text

SharedArrayBu ff er • Cross-Origin-Embedder-Policy: require-corp • Cross-Origin-Opener-Policy: same-origin 41

Slide 42

Slide 42 text

Так значит можно надолго блокировать основной поток? • Блокируется не все • Сначала измеряйте, потом оптимизируйте • Проанализируйте ваш алгоритм • Берите пример с браузера 42

Slide 43

Slide 43 text

Скоро будет в Доке! 43 …сейчас можно почитать вот тут https:/ /hellsquirrel.dev/blog/threads

Slide 44

Slide 44 text

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