Как работает Event Loop в JavaScript + примеры
Vložit
- čas přidán 28. 07. 2024
- Разберём теорию по работе JavaScript + рассмотрим множество примеров работы синхронного и асинхронного кода.
❤️ Мой telegram канал: t.me/webelart
❤️ Мой сайт: webelart.com/
❤️ Исходники из видео: / 58097129
❤️ Ссылка на голосовалку по видео: forms.gle/ahhftfZQNN6QVEVc9
Список рекомендуемых видео:
🔥 Учимся использовать стек и очередь в JavaScript - • Учимся использовать ст...
🔥 Рекурсия и стек в JavaScript на примерах - • Рекурсия и стек в Java...
🔥 Разбор Promise и создание собственной имплементации MyPromise - • Разбор Promise и созда...
🔥 Пишем вместе throttle и debounce - • Пишем вместе throttle ...
🔥 Филипп Робертс: Что за чертовщина такая event loop? - • What the heck is the e...
Список рекомендуемых ссылок:
🍀 Concurrency model and the event loop - developer.mozilla.org/en-US/d...
🍀 Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome - habr.com/ru/post/461401/
00:00 введение.
00:52 теория работы Event Loop
04:49 запуск кода и стек вызовов
07:44 максимальный размер стека JS
09:34 блокировка выполнения кода
11:12 асинхронный код setTimeout
18:39 гарантия выполнения кода setTimeout
19:04 асинхронный код - Promise
24:00 асинхронные колбеки
24:45 колбеки на постоянные события
26:37 синхронные колбеки
27:49 циклы
28:12 циклы с асинхронным выполнением
30:37 рендер страницы
Рекомендую посмотреть ВСЕ ВИДЕО на моём канале! 😈
Я рассматриваю различные темы веб-разработки. На текущий момент: профессиональный JavaScript, вёрстка, примеры на чистых технологиях (React, NodeJs, JS, CSS, HTML) и опыт в 10+ лет.
Одно из самых нужных, подробных и важных видео на канале. Спасибо, Елена. 👍👍👍👏
😍❤️
Лен, спасибо тебе большое! Всегда рад твоему контенту. Ты всегда затрагиваешь глубокие, сочные темы в js. Уважение тебе.
Юра, спасибо за комментарий, очень приятно! ❤️
Не раскрыта тема микро и макротасков - промисы и, например, колбеки из таймаутов отправляются в совершенно разные очереди. Выполнение задач из микротасков имеет приоритет перед появившимися новыми задачами в макротасках.
Здесь ещё надо погружаться, чтобы лучше разобраться. Поэтому пока вот такое первое приближение. Я думаю в будущем покрою эту тему более широко. Спасибо за комментарий!
Лена, ты не пугайся этому комменту. Просто сейчас вопрос про ивент луп входит в топ 3. И каждый маломальский мидл является в этой теме экспертом.
@@YuriiKratser Всё нормуль :))) А если тема входит в топ, то это вообще огнище! 😍
оч полноценное и полезное видео
Очень понятно объясняете, продолжайте пожалуйста!
Хорош видос, спасибо!!
спасибо за полезности)
❤️
спасибо, очень крутое видео
🤗❤️
Елена спасибо за хорошее видео. По пункту 7 события, такие как обработчики событий onKlick, могут заблокировать код (в части того что прилетает в web api) т.к. они добавляются в web api после идут в macrotask queue и после по очереди в call stack. И если их очень большое количество, то события которые тоже поступают по такому пути (web api после идут в macrotask queue и после по очереди в call stack.) будут выполнены после множества onClick. Таким образом performance будет не очень)
всё не так. заблокировать поток могут микротаски, а туда колбеки из промисов попадают, queueMicrotask и requestAnimationFrame (не уверен)
Отличное видео ! Понравилась подача столь важной и нужной темы. Еще бы добавить информацию про макро и микротаски и было бы вообще шикарно ! Спасибо !
Спасибо!🙌
Интересный видос, с интересными примерами, только хотелось бы услышать еще про макро и микро таски
Есть ещё одно видео на канале, как раз про очереди разных видов.
Это шедевр. Дошло не с первого раза. пересмотрел раза 3, и попутно перематывая на 2-3 минуты назад, потеряв связь. Но оно дошло. Ребятушки, всем советую.
Пытается объяснить вещи на языке понятном уже тем людям, которым это разъяснять вообще не надо. ЗАЧЕМ🤯 Что #происходитслюдьмидура.
@@user-cm5bw7ck1y ну тут я не соглашусь, мне очень даже зашло, пусть и не сразу. А какие слова непонятны?
Спасибо Елена, очень познавательно.
Случайно попал на канал. Очень годный контент👍
Странно что так мало подписчиков.
Лайк...!
опачки, обожаю твои гайды :3, спасибо помогаешь очень
Спасибо! 😍 Надеюсь это видео тоже зайдёт!
Офигенный контент, спасибо!
Ну тут лайк прям однозначно 👍👍 большое спасибо
Все что предоставляется через WEBapi - является асинхронными, поэтому использования колбека внутри document.querySelect является асинхронным.
Лен, огромный кайф смотреть твои видео. Мотивируешь и вдохновляешь.
Cool
Спасибо! Появилось более целостное понимание этой штуки)
Крутой контент!!!
Это самое лучшее обьяснение лупа. Два дня сидел читал статьи, но во всех оставался осадочек недопонимания, а после просмотра вашего видео могу с чистой совестью сказать что все понял. Лучшая, я подписался
Есть ещё одно czcams.com/video/kZFLHCz2a30/video.html
Оно более расширенное с хорошей практикой. Рекомендую следующим ещё для большего понимания :)
в основном мне твои виде не нравятся. Но конкретно это видео супер. Разбираешь пример и я думаю "а что будет если добавить это сюда" и следующий пример у тебя такой как я подумал и так постоянно на протяжении видео)
Даже не знаю, что тут ответить. Вроде бы и унизили и комплемент сказали. Знаете это как волосы у тебя конечно красивые, но уши пиздец…
Хорошее видео, но хотелось бы услышать про поведение eventloop при использовании async/await, просто я не очень понимаю логику по которой весь синхронный код после await тоже попадает в очередь
Вот вам видео czcams.com/video/kZFLHCz2a30/video.html
@@webelart то что нужно, спасибо
Очень хорошо объясняете, благодарю
Спасибо большое за такое простое объяснение для новичков!
Почему все видео с названием Event Loop в JavaScript описуют цикл в браузере. У Ноды цикл работает немного иначе. Отчего нету логической градации на цикл на фронте и бэке?
Понравилось ) Только для меня теперь новая непонятка )) если есть отдельная очередь рендера, то что раньше попадает в колстек - что-то из render queue или из task queue? Или как это происходит
Есть еще одно видео czcams.com/video/kZFLHCz2a30/video.html
А почему не выводится консоль лог на 85 строке?
он выводится. В консоли из-за 85 строки появляется Е. (То что передали в resolve попадает в .then)
Доклад Джейка Арчибальда получше будет чем у Филиппа. Там уже осовременено рассказывается. По этапам, что куда. У вас чувствуется доклад Филиппа Робертса :)
Учитывая что вы пробовали написать Promise на js, было бы неплохо почитать про event-loop в спецификации whatwg ну и разные гугловские статьи по модели браузера, где рассказывается рендер часть.
Да его смотрела, смысле Филиппа :)
Есть ещё одно видео czcams.com/video/kZFLHCz2a30/video.html
Кидайте ссылку, что за доклад?
@@webelart I am writting this reply in english due with comment's system removes all my replies instantly. Before this I mentioned the report, you can easily find it if you will make search request in address URL with words: "Jake Archibald in the Loop"
@@Maxim9575 ❤
музыка отвлекает
Услышала. ❤
11:10 что за склейка? Я не понял, что там дальше объяснялось.
ну учить, че ты думаешь я с тобой сюсюкать тут буду что ли.
На хабре написано в корне не так
16:31 1000 секунд)
🤦♀
Спасибо, очень полезное видео :)
На середине ролика приходит осознанность, трансформируется мозг, появляется возможность вызывать дождь, огонь, ветер... Будьте осторожны!
Если бы не "Стек колл вызовов" - было бы неплохо. А так, конечно, режет очень слух.
какой только превьюхой не заманивают на контент.
Подробный разбор эвентлупа, а ни слова о микротасках, куда как раз попадает then но не попадает setTimeout
Как я уже упоминала в одном из комментариев, здесь нужно ещё погружение. Изначально я не ставила для данного видео задачу покрыть всё и вся. Я здесь ещё и про V8 не упомянула, не рассказала про макро, микро таски. Не покрыла setImmediate(), process.nextTick() и т.д., которые больше к nodejs относятся и рендер по факту вскользь упомянула.
Я люблю, когда изучения происходят наслоением знаний. Т.к. когда стремишься сразу и всё изучить, рассказать, показать. Обычно получается какая-то каша. Нужно время для укладки информации, потом следующая порция. Видео получилось классным и покрывает много аспектов.
Тем не менее, спасибо за комментарий, я увидела, что тема микро и макро тасков интересна. ❤️
весело на собеседовании рассказать, что присутствует такая штука, которая передает другой штуке, пока выполняется очередная штука. а потом вар рассказать. экзаменующий будет в шоке от потока знаний и уж точно на сеньора сразу возьмут с зарплатой в 3 раза выше стандартной.
Называйте функция, переменная и т.д., если вас слово штука триггерит. А вот про шок экзаменующего - это исключительно ваша фантазия.
@@webelart для эксперимента именно так и сделал сегодня. и это будет чудом если меня туда возьмут.
@@romanmed9035 Скиньте мне минуту, неужели всё штукой называла :D
Да ладно вам писимистичничать, если верно решили, должно быть хорошо.
Но в любом случае, поделитесь результатом, интересно ❤
@@webelart об этом видео можно вообще забыть как и не было его. поскольку Вы выпустили недавно новое с полным описанием всего как оно и требуется для понимания, весь комплекс параметров. с почти теми выражениями какие используют экзаменаторы. и это совершенно два разных уровня преподавания, как будто между ними не несколько месяцев прошло или разные люди рассказыывают. огромный профессиональный рост лектора виден даже мне. и информация преподносится в полном объеме со всеми демонстрациями. буду именно по Вашей лекции это пытаться понять. я ее не успел полностью посмотреть. но мне как-то задали вопрос в другом месте о промисе в сетинтервале. и инетрвале в промисе. надеюсь в том что осталось, у Вас это показано. спасибо за ответы и за Ваш труд.
@@romanmed9035 Спасибо, мне очень приятно!
немного быстро в коде бегаешь а так норм
13:05 говоришь 1 секунду, а ставишь 0.1 секунд.
да пошел ты на х*й как хочу так и монтирую 🤌
@@webelart 😂
все круто, только единственный минус, музыка на заднем фоне громковата, пожалуйста, чуть тише, если можно сделайте в следущий раз
Вообще, тема очень сложная, не для новичков в JS. Разбор материала мне понравился, но очевидно, что этот ролик нужно смотреть долго, постоянно останавливаясь и перематывая, и проверяя код в конспли самому. Джуну, думаю, часа три нужно, чтобы всё здесь сказанное и показанное усвоить. Минимум.
Есть ещё одно видео про event loop czcams.com/video/kZFLHCz2a30/video.html
@@webelart спасибочки, посмотрю обязательно.
Ты лучше расскажи как с этими знаниями, пооектами на github найте работу? Зачем учить, если работы нет
Постепенно и эти знания потребуются. От себя только скажу, ищите, пробуйте и всё получится!
Видео для технарей, сплошная боль, столько неточностей.... Но хоть как-то объяете, на том спасибо
Посмотрите вот это ещё, гораздо более точно и подробнее там объясняю czcams.com/video/kZFLHCz2a30/video.html
Успехов вам в изучении ❤
@@webelart Спасибо за обратную связь!))
На хабре написано в корне не так
Я использовала mdn
@@webelart Это я затупил , нужно сразу было разобраться , а потом писать. Сорри