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

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

Transcript

1. Как заблокировать все?
2. Очень плохо блокировать основной поток! • Все анимации замирают • Кнопочки не нажимаются • Запросы не уходят 🙀 2
3. Но если все выполняется в основном потоке… Вы всегда блокируете основной поток 3
6. Покапитаним • CPU выполняет инструкции • Может чуть-чуть параллелить 6
7. Ядер CPU значительно меньше чем программок на вашем компьютере 7
8. 8 Concurrency – есть несколько задач, они выполняются Parallelism – есть несколько задач, они одновременно выполняются
9. Concurrency обеспечивает runtime & OS 9
10. Потоки и процессы • ОS ставит таймер • Срабатывает таймер - генерируется прерывание • Выполняются другие команды • Что выполняется решает планировщик OS • IO – тоже прерывание 10
11. Процессы • Свое адресное пространство • Свое состояние (регистры) • Свои ресурсы 11
12. Как общаются процессы? • Пошарить ресурс • Пошарить память • Послать сигнал • Естественно это все обернуто в 10 оберток :) 12
13. Процессы все помнят :) 13
14. Потоки • В каждом процессе есть поток • Нет иерархии • Свой стек • Общая куча 14
15. Физические и зеленые потоки • OS может создавать процессы и потоки. Их называют физическими • Runtime вашего языка, тоже может создавать потоки • 1 Runtime thread : 1 Physical thread • N Rutnime threads: M Physical threads – green 15
16. 16 Физическими процессами и потоками управляет планировщик
17. A что там в ? 17
18. Multi-process application • Каждая вкладка заботливо упакована в свой процесс (rendering process) • Есть основной процесс с которым общаются вкладочки • В каждом rendering - process есть несколько потоков 18
19. Внутри браузерного процесса • Main thread • Thread pool • GPU thread • … 19
20. Внутри rendering - процесса • Main thread • Thread pool • Composite thread • Workers 20
21. 1 browser thread : 1 OS thread 21
22. Все очень безопасно и сложно Браузер должен предоставлять гарантии того что злобный код с одной странички не начнет портить другие. Для этого есть куча политик, CSP, Same Origin Policy и все в этом духе. Посадить сайт в песочницу не только сложно но и затратно по ресурсам. Прибавьте к этому существование iframe и браузерных расширений. 22
23. Rendering процесс • Там все в прошлом докладе уже рассказали :) • Чем же занимается Rendering процесс – Практически всем! 23
24. -> разбираем и собираем • Распарсить • Вырастить дерево (DOM) • Разобрать CSS • Подружить CSS в DOM (привязать правила к узлу) • Нарисовать красивое -> 24
25. -> строим красивое • layout - разместить элементы на странице • pre-paint • paint - сгенерировать структуры для рисования • commit - отправить в compositor • layerize - попилить на слои 25
26. -> рисуем красивое • rasterize - распилить на клетки • activate - собрать frame • aggregate - собрать все frames • рисование тяжелый процесс, поэтому он выполняется параллельно в отдельном GPU- процессе. Команды кушает Skia 26
27. Rendering pipeline • Результаты кешируются • На каждом этапе есть проверочка нужно ли его запускать 27
28. Demo time! максимальное блокирование! 28
29. Demo time! декодинг изображений 29
32. Demo time! блюр белочек 32
34. 34 Параллельная компиляция
35. Но хочется же параллельно! • WebWorkers - системный поток внутри rendering- процесса • Внутри инициализируется JS движок (Isolate) 35
36. 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 {}
38. 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) } }
39. Transferable vs non-transferable
40. Garbage collector • Stop-the-world • Minor Garbage Collector 40
41. SharedArrayBu ff er • Cross-Origin-Embedder-Policy: require-corp • Cross-Origin-Opener-Policy: same-origin 41
42. Так значит можно надолго блокировать основной поток? • Блокируется не все • Сначала измеряйте, потом оптимизируйте • Проанализируйте ваш алгоритм • Берите пример с браузера 42
43. Скоро будет в Доке! 43 …сейчас можно почитать вот тут https:/ /hellsquirrel.dev/blog/threads
44. Спасибо :) @polina_gurtovaya @pgurtovaya