Разбираемся в очередях event loop'а JavaScript

Рет қаралды 6,316

2 жыл бұрын

В данном видео мы с вами рассмотрим, как работают очереди event loop, какой у них приоритет, и результаты каких действий попадают в какую очередь.
Выступление Jake Archibald об event loop:
• Jake Archibald on the ...
Пост от Jake Archibald об event loop:
jakearchibald.com/2015/tasks-...
Мой канал в Телеграм:
telegram.me/ayub_begimkulov_c...

Пікірлер: 36

@aidarsmagulov8923 2 жыл бұрын

Круто получилось, как раз думал изучить эту тему, и начал собирать материалы для этого

@ayub_begimkulov 2 жыл бұрын

Рад, что смог помочь!

@demimurych1 Жыл бұрын

requestAnimationFrame создан и существует прежде всего для того, чтобы разработчик имел четкий сигнал в какой момент, он может вносить изменения в DOM, не боясь спровоцировать reflow всей области отображения.

@habalgarmin 3 ай бұрын

Подскажите пожалуйста какая его связь с eventLoop?

@nafanya3733 Жыл бұрын

спасибо за видео! первым увидел твое видео с собесом с Муратом и затянуло, очень интересные видосы пилишь!

@ayub_begimkulov Жыл бұрын

Да, тот собес клевый получился)

@user-kj6go4ft4j 2 жыл бұрын

Спасибо большое.

@ayub_begimkulov 2 жыл бұрын

Рад помочь!

@suslikest3708 Жыл бұрын

Полезно😀

@ayub_begimkulov Жыл бұрын

Спасибо за фидбэк!

@sergei_sergeevu4 2 жыл бұрын

Спасибо за контент! Было бы круто увидеть полифил на промис, возможно даже на async await) requestIdleCallback - была ли у вас практика использования, хотя поддержка оставляет желать лучшего, но интересно в каком скоупе она выполняется)

@ayub_begimkulov 2 жыл бұрын

По поводу promise - записал, а вот async await полифилить не получится) Его можно только транспайлить через babel или TS. RIC никогда не использовал на самом деле, use case очень редкий. Спасибо за фидбэк!

@krylovDev 2 жыл бұрын

Ты молодец! Однозначно подписка. Хочу увидеть собес на джуна со мной на твоём канале ))))

@ayub_begimkulov 2 жыл бұрын

Скажи, как с тобой можно связаться - можем подумать.

@user-bn3vw5xf4u 2 жыл бұрын

Спасибо за контент, а ты не перепутал методы shift и unshift?

@ayub_begimkulov 2 жыл бұрын

Ага, перепутал. Спасибо за фидбэк!

@dimansunny7862 2 жыл бұрын

Найс рассказал

@ayub_begimkulov 2 жыл бұрын

Спасибо за фидбэк!

@user-tk7qv9rv2c Жыл бұрын

Спасибо, промисы будут очень кстати, а еще бы про requestAnimationFrame! Что-то никак не могу догнать как работает( Хотя я еще много чего не понимаю😅

@ayub_begimkulov Жыл бұрын

Ахахах, постараюсь заснять что-нибудь.

@RinatYouldashbaev Жыл бұрын

Начало на 2:20.

@mody-pq8kd Жыл бұрын

Еще есть requestIdleCallback. Вызов во время простоя браузера(когда все очереди пусты)

@user-nd1hp8oh2o Жыл бұрын

Правильно ли я понял что микро таски выполняются прям в стеке вызова (call stack) ?

@ayub_begimkulov Жыл бұрын

Вообще все таски выполняются в call stack. А в очереди они ждут, когда им нужно начать выполняться. Просто у очереди микротасок приоритет большой, поэтому ими можно заблочить main thread.

@user-ne4bd3ry1n 3 ай бұрын

мурыча смотрите про микротаски, в разносе чела по js из яндекса

@user-mh1bz9dm1b Жыл бұрын

привет, крутяк) готовлюсь к собесам и тема оказалась неоч сложная. но торопишься очень сильно, и по темам слегка прыгаешь. ролик был 10 месяцев назад, надеюсь ты апнул свой скилл рассказывать)

@ayub_begimkulov Жыл бұрын

Спасибо за фидбэк!

@whiteguards43 Жыл бұрын

Уже 9 месяцев прошло, где видео про полифил промиса?)

@ayub_begimkulov Жыл бұрын

Вот сейчас сижу материал готовлю, будет скоро.

@whiteguards43 Жыл бұрын

@@ayub_begimkulov Ждем брат, а по национальности кто вы ? Если не секрет, видно что муслим, Ма Ша Аллах1

@Nikitosss91 2 жыл бұрын

Привет, классный контент, создавай чат в тг, чтобы можно было обмениваться вопросами, помогать друг другу

@ayub_begimkulov 2 жыл бұрын

Привет, хорошая идея, надо подумать.

@ayub_begimkulov 2 жыл бұрын

Создал в итоге канал в ТГ - присоединяйся) t.me/ayub_begimkulov_coding

@Maxim9575 Жыл бұрын

Не все observers создают микрозадачи: - MutationObserver - создает - IntersectionObserver, PerformanceObserver, ResizeObserver - не создают, часть из них производят макрозадачи и напоминают по механике rAF, но со своими причудами Вообще observers это очень непростая история, даже rIC будут проще в сравнении с ними. Что касается rAF...это этап, который происходит когда браузер считает, что рендер документа имеет смысл, rAF это не макрозадача и не микрозадача, это отдельная задача, которая входит в список операций перед пересчетом стилей, обновлением макета и покраской. Так вот если в течении какой-либо из итераций цикла происходит запрос на rAF, то все запросы попадают в специальную карту запросов rAF. Когда наступает момент вызывать обработчики rAF, то вызываются все функции обратного вызова, которые были накоплены в эту карту на протяжении циклов/а событий. По окончанию выполнения этих функций они выталкиваются из этой карты и все происходит сначала. Вложенные rAF записываются в карту, но не выполняются, так как перед выполнением rAF делается слепок функций обратного вызова, которые должны быть выполнены, все что попало после не выполняется. Там где я прокомментировал - добротно посмеялся. Держите правило - говорите в чем уверены наверняка. Это избавит от таких умников типо меня :)

@ayub_begimkulov Жыл бұрын

В первую очередь, спасибо большое за подробный и развернутый комментарий! Касательно rAF - я вроде бы так это и объяснил, возможно не дал достаточно внимания тому, что вызывается перед пересчетом стилей, надо пересмотреть видео. Но про то, что это отдельная сущность и живет сама по себе, я как мне помниться сказал, но скорее более примитивно, нежели ты описал. Так что снимаю шляпу. Что же касается observer'ов, я почему-то был уверен, что они создают микротаски, по поводу MutationObserver прям на 100%, но про остальные тоже где-то читал, но тут, если честно, мало хорошей инфы, да и может сам тупанул. Так что постараюсь найти и почитать. Если есть какая-то ссылка на ресурс (английский или русский - не важно), где можно это почитать, буду очень благодарен. А так, если отойти от темы, было интересно, откуда это все узнал? Не хочешь прийти на канал и поделиться опытом? По формату можно подробнее обсудить)

@Maxim9575 Жыл бұрын

@@ayub_begimkulov почему я расписал rAF так подробно: потому как вы сказали, что в очередь rAF ставятся "таски" - а это не верно. Этап rAF - это одна задача, которая выполняет все запланированные запросы rAF. И также вы сказали что установка вложенного rAF будет выполнена в следующем цикле, что является не совсем точным описанием. Да вложенный rAF будет выполнен в следующем цикле, но когда этот цикл будет может пройти условно 10 циклов с макрозадачми и микрозадачами, также могут быть циклы простоя условно 5 штук, а вот потом может начаться цикл, который будет иметь документ(ы) на отрисовку и вот в этом цикле будет вызвана карта функций обратного вызова rAF. Насчет observers, я особо за ними не следил, но я точно знал что IntersectionObserver это этап который такой же как rAF в цикле событий (стоит сразу после него), он обновляет данные об пересечениях и ставит макрозадачу для документа. Остальные observers как мне известно не входят в цикл событий явно кроме ResizeObserver, он интегрируется в шаг обновления рендеринга после пересчета стилей и обновления макета. Все что я знаю это официальные спецификации "w3_org" и "html_spec_whatwg_org" (вместо пробелов точки yt удаляет явные комментарии с ссылками) В данный момент нет желания. Может когда-нибудь, возможно. Как говорится может бахнем... но потом. P.S Голос у тебя похож на мой почти один в один, я даже дежавю поймал :)