Event Loop: Ключ к оптимизации вашего кода | Как работает асинхронность в JS
HTML-код
- Опубликовано: 29 сен 2024
- Сегодня разберём как реализована модель асинхронности в браузере. Не будем строить догадки пощупаем реальный браузер во вкладочке performance
Подписывайтесь на мой telegram канал: t.me/cleanfron...
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
с одной стороны - все понятно. Но, к сожалению, если бы я это видео смотрел лет 5 назад начинающим джуном, не уверен, что было бы так же
отличное объяснение! Но, если засветил в коде promise и queueMicrotask, то объясни уже и про них) где-то ты обещал сделать видео про микро и макро задачи
не нужно путать многопоточность и асихронность
Судя по набору видео этого канала ты очень глубоко копаешь реакт темы)
Можешь снять ролик об анимациях в реакте?
Там встречается много неочевидных вещей, нужно следить за рендерами, маунтом/анмаунтом
Моя предметная область - игры
И мне часто кажется что игры на реакте это попытки подстроиться под рендер браузера, и проще взять pixi (или unity если неважен размер бандла) и накодить все там
Круто было бы разобрать пример
Постепенное появление элементов UI: 2 кнопки, панель ресурсов (монетка и текстфилд с числом)
1 кнопка открывает попап
2 кнопка создаёт монетку, которая улетает в ресурс панель и после этого счётчик увеличивается
Это все как пример, главный запрос: как подружить реакт и анимации чтобы это было похоже на игру, а не на энтерпрайз )
Сразу скажу момент возьми pixi)
React это фреймворк по созданию сайтов а не игр. В чём отличие сайтом от игр?
Относительно статичный интерфейс. Приемущественно текстовая информация и простые анимации.
Сам Ден Абрамов как то говорил, что Реакт не заточен на частые обновления
В этом смысле если у тебя будет 60 фпс обновлений, то реакт будет архи сложно с этим подружить, как и саму асинхронную модель
@@paromovevg тогда пример посложнее
Представим диабло в вебе
Основной кор геймплей это pixi/threejs - тут без вариантов
А интерфейсы? Их же там целая куча
Сюда так и просится что то из веб-технологий
На канвасе такое долго делать потому что с нуля
А на реакте долго потому что следим за рендером/анмаунтом и иммутацией пропсов/стейтов
Либо пробовать solid/svelte, может там и удобнее
PS - был давно на конференции по разработке хтмл5 игр, было 5-10 докладов, стек не совпал ни у кого)
@@yuryk3397ривет! А что бы ты сам взял для интерфейсов?
@@mikhail6790 ещё как вариант затестить cocos creator
Он и кроссплатформ, и тайпскрипт, и вебжл билд меньше чем в юнити
Ну и сам как юнити только по китайски )
Круто! спасибо за канал с интересным контентом!) продолжай в том же духе!)
спасибо за видео, как раз начал разбираться в этой теме, и тут вышел этот ролик, ждем с нетерпением следующее c reflow repaint!
в конце видео: разве результаты работы с fetch будут обработаны в макротасках? все что свзано с промисами - микротаски... fetch возвращает промис...
Тут важный момент, все then обработаны будут в микротасках, но вот самый первый resolve где то внутри фетчь идёт внутри макротаски.
Вообще микротасок не бывает в отрыве от макротаски которая первый промис ресолвит
Почему есть две разные очереди? Почему все не сделать в 1?
Как even loop работает в nodejs ?
Если ты про очередь микрозадач, то сделаю про это видео
В node js работает немного по другому, надо тоже отдельное видео выпускать
Хороший контент.
Будет ли видео об сборщике мусора?
Будет)
@@paromovevg очень жду