JavaScript: Callstack и Event Loop

Александр Грибанов, Senior Developer DataArt и преподаватель Компьютерной школы Hillel, о понятиях Callstack и Event Loop.
Telegram-канал Александра Грибанова об интересных и полезных штуках из мира Frontend-разработки: t.me/flipcodejs
Компьютерная Школа Hillel
ithillel.ua
#КомпьютернаяшколаHillel #javascript #callstack #eventloop

[@yanbraverman2203]

Спасибо. Саша как всегда максимально доходчиво и понятно объясняет любые самые сложные темы.

[@user-pd4gt9zz9c]

Вот так вот хорошо... Прям очень хорошо) вот в такие моменты возникает желание послушать что-нибудь ещё...)

[@dmitrijponkin]

Отличное объяснение! Спасибо :))

[@vishnyo]

Лайк за простоту донесения материала

[@Black1991Star]

Спасибо, за объяснение

[@suslikest3708]

Фига се круто обьяснил, спасибо!

[@developerabdulaev4768]

Идеальное объяснение для меня.

[@HillelITSchool]

Идеальный комментарий для нас 🙂

[@dmitrykarpovich186]

Спасибо! Оч наглядно

[@andrewdeiak6871]

Полезно!

[@sadcode8017]

Спасиб, автор

[@Maxim9575]

Хорошее видео жаль без терминологии микро и макро задач. А так очень круто особенно, понравилась картина когда созданы обработчики событий и они сидят в web-API

[@HillelITSchool]

Спасибо, Максим! Рады, что вам понравилось.

[@ms77grz]

👍👍

[@noway1725]

08:22. Не совсем ясно, что имеется ввиду под "примерно 60 раз в секунду браузер пытается перерисовать содержимое документа"? Утверждается, что 60 раз в секунду браузер делает repaint?

[@aleksandrgribanov]

Имеется в виду подготовка каждого конкретного кадра. Этот процесс состоит из нескольких частей, в том числе и repaint. Но в рамках этого процесса подготовки кадра, некоторые шаги могут пропускаться, если браузер знает что JS не менял свойства элементов, которые влияют на конкретный шаг. Поэтому, если вы не меняете 60 раз в секунду свойство отвечающее за стадию paint, то и repaint не будет проходить 60 раз в секунду. В целом производительность UI отдельная интересная и глубокая тема. Немного подробностей можно почитать тут frarizzi.science/journal/web-engineering/browser-rendering-queue-in-depth (en) developers.google.com/web/fundamentals/performance/rendering (ru)

[@noway1725]

@@aleksandrgribanov Спасибо за ссылки! Теперь понятно, что Вы имели ввиду.

[@UserSo4reUsu75ry]

Все хорошо. Проблема лишь в том, что никто не рассказывает, что очередей задач на самом деле не одна и что в разных статьях называют её по разному callback queue, message queue и тд. Сложно найти материал, рассказывающий как в действительности устроен eventloop и вызов task, microtask и nexttick, animationframe. Все повторяют одно и тоже год за годом )

[@Ekzalt]

Почему же никто? Вот профессиональный разбор Node.js EventLoop на русском: kzbin.info/www/bejne/bZeaaWqJqMyepKM

[@UserSo4reUsu75ry]

@@Ekzalt да это наверно самое подробное видео за всё время )

[@TrinoUNO]

Я так понимаю если во время выполнения Slow Function продолжать нагружать стек, то пользователь еще дольше будет ждать?

[@astrobrite540]

TrinoUNO как вы собираетесь нагружать стек

[@TrinoUNO]

@@astrobrite540 например между завершением Slow Function и Main() (допустим что мэйн это тоже какая то функция, а не скрипт) будет вызов еще какой то функции.

[@andreygokhan6893]

@@astrobrite540 пользователь сам нагрузит стек часто кликая по неработающим элементам. Обычное поведение любого человека. Кстати , кто нибудь знает как приостановить клики в период блокировки стека?

[@aleksandrgribanov]

@@andreygokhan6893 Как вариант блокировать элементы управления. Например через аттрибут disabled или css свойство pointer-events

[@mushnikov35]

@@aleksandrgribanov а как проверить что он кликает много раз или как проверить что стэк занят ??

[@oliverreviews8496]

Стэк?) На сколько я знаю это называется стёк на русском, что кстати сразу дает понятие того, как это работает) Хотя видео рассказано круто, дополняет немного то, что читаешь в документации)

[@catsapp]

Англичане переиначили русское слово Стог в Стек.

[@VitaliDziachuk]

доклад на уровне джуна

[@phello57]

а что не было сказано?

[@kirillberezin8859]

Ахаха конечно, если есть авейт то нихрена не работает как обьяснили.

[@Maxim9575]

await это уже работа с микро задачами, а объяснение было про callstack и eventloop, сам setTimeout является макро задачей, а асинхронные функции это уже микро задачи. Так что не нужно на автора гнать.

[@b0dn4r_K]

Зачем мне джуны в рекомендациях?

[@thegate4407]

Однотипные видео