Event Loop от А до Я. Архитектура браузера и Node JS. Движки и рендер. Самое подробное видео

  Переглядів 244,716

Ulbi TV

Ulbi TV

День тому

В этом ролике мы разберем архитектуру браузера и node js. Подробно изучим принцип работы Event loop, очереди Microtask и macrotask. Поговорим про стадии рендера, про шаблон reactor и демультиплексор событий. Про однопоточную и многопоточную модель.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Плейлист с роликами по архитектуре - • Архитектура ПО
Таймкоды:
00:00 ➝ Введение
00:40 ➝ План урока
01:40 ➝ Архитектура браузера
08:30 ➝ Браузерный Event loop. Введение в концепцию однопоточного и многопоточного программирования. Асинхронная модель.
10:20 ➝ Call stack, стэк вызовов. Рекурсия. Переполнение стека.
13:30 ➝ Очередь задач. Асинхронный код.
15:25 ➝ Задачи JS движка (heap, call stack, выделение памяти и сбор мусора)
17:20 ➝ Web API. Таймауты и слушатели событий
20:10 ➝ Промисы и очереди микро и макро задач
26:00 ➝ Что порождает микротаски, а что макротаски?
27:50 ➝ Наглядный пример работы Event loop в коде
30:40 ➝ Что такое MutationObserver и как он работает?
34:10 ➝ Стадии рендера. DOM, CSSOM, Render tree, style calculation, layoyt, paint, composite.
45:40 ➝ Что такое Node js. Из чего состоит? Устройство Node js. Движок V8 и Libuv
51:40 ➝ Блокирующий и неблокирующий I/O (ввод и вывод)
541:40 ➝ НЕблокирующий и неблокирующий I/O
01:00:30 ➝ Планировщик потоков
01:02:30 ➝ Демультиплексор событий и шаблон Reactor
01:07:20 ➝ Event loop в node js. Фазы и очереди
01:11:00 ➝ Интересные примеры с event loop
01:13:45 ➝ Время ставить лайки и писать комментарии для поддержки и продвижения видео, всем спасибо!)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Ссылка на мой телеграм канал - t.me/ulbi_tv
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

КОМЕНТАРІ: 959
@ITKAMASUTRA
@ITKAMASUTRA Рік тому
Заморочился, как всегда и сделал пушечку, молодец 👏
@UlbiTV
@UlbiTV Рік тому
Дима, спасибо!
@BestHitsVideo
@BestHitsVideo Рік тому
@@UlbiTV привет, есть ли у тебя курсы по JS с нуля?
@Quentinrei
@Quentinrei Рік тому
@@BestHitsVideo вроде нет
@andreymonchencko3908
@andreymonchencko3908 Рік тому
Вы вдвоём весь снгшный ИТ ютьюб тащите😅
@reality-analyst
@reality-analyst 10 місяців тому
@@UlbiTV есть неточности. Например при переполнении стека вызовов крашится не приложение, а выполнение стека вызов. То есть к примеру интервалы продолжат работать, если речь о рантайме в веб браузере.
@VasjaG
@VasjaG Рік тому
Красавчик. Посадил жену, бабушку и дочь смотреть по 10 раз сразу с телевизора, телефонов и планшетов. Все с разных VPNов и IPшников.
@zmerz
@zmerz Рік тому
Спасибо тебе, Тим!!!Топовый блогер, который не только понимает предмет, но и профессионально умеет его донести до людей!
@adelinaromanova8353
@adelinaromanova8353 Рік тому
+++
@barbatage5078
@barbatage5078 Рік тому
Самый лучший!
@alexandrkruglyak
@alexandrkruglyak Рік тому
Действительно всегда есть чему поучиться, как в преподавании, так и в области. П.С. Ребят, я микросервисы пишу на nodejs, кто в теме - заходите в гости!
@demetrx7972
@demetrx7972 Рік тому
Аналогов нет, даже на английском ютубе. Спасибо тебе за труд, курс топ!
@gleb6843
@gleb6843 Рік тому
Спасибо за труд, ждем новые лекции)
@EvgeniyZhukov-lt8rq
@EvgeniyZhukov-lt8rq Рік тому
Тимур, благодарю за старания и прекрасную лекцию. Давно ждал 💥💯
@gringoireartman8242
@gringoireartman8242 Рік тому
Огромное спасибо, Тимур! Крутая лекция!
@user-zb5fk9oj3s
@user-zb5fk9oj3s 8 місяців тому
WOW!! Топовое объяснение!!! Спасибо автору!!
@dabiggestfloppa3441
@dabiggestfloppa3441 Рік тому
Как всегда уровень! Спасибо тебе огромное, мы это очень ценим!
@user-fg4zc1lf9d
@user-fg4zc1lf9d Рік тому
Великолепно! Огромное спасибо!
@nakadisa
@nakadisa 8 місяців тому
10/10 Все разжевано и подробно показано! Спасибо
@GlebKrylov
@GlebKrylov Рік тому
Просто мысли мои читаешь, как раз сижу с этим разбираюсь и тут это видео. Спасибо!!!!
@nikto1851
@nikto1851 Рік тому
Ну ваще! Огонь! Спасибо, Тимур!
@Prosoimka
@Prosoimka Рік тому
Спасибо огромное за такую понятную и визуальную лекцию
@sergioavores4111
@sergioavores4111 7 місяців тому
Спасибо большое за шикарный контент!
@user-gt9tc8cr1y
@user-gt9tc8cr1y 8 місяців тому
Тимур, спасибо тебе огромнейшее! За то, как все преподносишь и объясняешь именно ты: за подробности, нюансы, манеру, повторения, примеры и акценты Спасибо!
@duce201
@duce201 Рік тому
Супер тема!!! Обязательно посмотрю!!! Спасибо за труд!!!
@MrKOHKyPEHT
@MrKOHKyPEHT Рік тому
а-ху-еть... Я думал что знаю ивент луп, а оказалось что нифига не знаю. Видео пушка. С такой подачей поймёт даже ребёнок
@MasterWeb3
@MasterWeb3 9 місяців тому
Очень круто! Подробно и понятно!
@vgshenshin
@vgshenshin 7 місяців тому
спасибо! Материал очень подробный, то что надо!
@user-xw3ld3rc7e
@user-xw3ld3rc7e Рік тому
Просто восхитительно! Спасибо тебе большое
@vladimirignatov2305
@vladimirignatov2305 Рік тому
Спасибо! Самые лучшие лекции
@user-sy7wh5kc7e
@user-sy7wh5kc7e 7 місяців тому
Спасибо, это лучшее видео про event loop, которое я находил!
@albinapavlenko9924
@albinapavlenko9924 11 місяців тому
Лекция - огонь! ❤ И материал, и способ его подачи - на высоте. Огромное Вам спасибо.
@user-zk3bc1lf8k
@user-zk3bc1lf8k Рік тому
Наконец-то новый ролик! Как всегда на высоте , Тимур!
@emirlannurlanuulu6790
@emirlannurlanuulu6790 Рік тому
Спасибо большое за вашу помощь, Тимур. Всё коротко, ясно, всё по полочкам. Спасибо за ваш труд 🙏🏽
@UserDev12
@UserDev12 Рік тому
Просто замечательная лекция. Как всегда на высшем уровне. Спасибо большое!
@adelinaromanova8353
@adelinaromanova8353 Рік тому
Тима, спасибо за очередной прекрасно рассказаный материал!💥
@alexanderalexander7722
@alexanderalexander7722 Рік тому
Спасибо, Тимур! Как всегда все просто и понятно. Ждем новые ролики!
@user-yr3ub5gp3t
@user-yr3ub5gp3t Рік тому
это мы смотрим!
@user-qs6tc9mp5o
@user-qs6tc9mp5o Рік тому
Прекрасный контент. И по содержанию, и за визуал заморочился. На практике хоть и не часто вспоминаешь об ивент лупе и стадии рендера, но это крайне полезно знать. Спасибо за видос!
@user-kw5yy1gi7e
@user-kw5yy1gi7e Рік тому
Спасибо за очередную топовую лекцию!После объяснения попробовал решать задачи по event loop, все решены верно. В лекции всё разложено по полочкам, столько полезной и нужной информации в одном видео. Спасибо Тимур!!!
@user-hp5oq2kh7p
@user-hp5oq2kh7p Рік тому
Тимур, отличное видео, единственно поправлю тебя, движок Webkit использовался в chrome до 2013 года, сейчас используется Blink насколько я знаю. 2:47
@tinatinomurova251
@tinatinomurova251 4 місяці тому
Шикарный ролик! Спасибо большое! Часами разбирала, записывала, чтобы лучше понять
@Jemmek364
@Jemmek364 Рік тому
Очень подробный и визуально приятный ролик, спасибо!!
@NeverGTI
@NeverGTI Рік тому
Лайк авансом - вечером обязательно гляну ) Спасибо за труд.
@golden_crow7255
@golden_crow7255 Рік тому
Спасибо за потрясающую лекцию, пожалуйста продолжай и дальше создавать такой крутой и полезный контент!!!
@user-wq4of1dm9y
@user-wq4of1dm9y 9 місяців тому
Очень подробно раскрыл тему! Огонь! Спасибо!
@michaelsopunov
@michaelsopunov 7 місяців тому
Роскошное объяснение евент луупа! Зачёт!👍👍
@Oleg_Artemov
@Oleg_Artemov Рік тому
Самое подробное объяснение темы, которое я встречал! Спасибо за твои труды 🙏
@tyumen777
@tyumen777 Рік тому
Спасибо большое за урок!
@user-gz1qc5tj9y
@user-gz1qc5tj9y Рік тому
ОГРОМНОЙ ТЕБЕ СПАСИБО! Невероятно просто и интересно!
@user-uw2dd7rd1d
@user-uw2dd7rd1d Рік тому
Отличный ролик! С визуализацией работы Event Loop, все становится понятней в разы!
@user-he9og1fc6k
@user-he9og1fc6k Рік тому
Тимур, спасибо огромное! Лучшее видео!
@luckytima2315
@luckytima2315 Рік тому
Вот это красиво, Тимур спасибо большое, тупо лучший !
@ilonakhomenko3797
@ilonakhomenko3797 8 місяців тому
Спасибо за ваш труд! Очень наглядно
@Brometey
@Brometey 9 місяців тому
Огромное спасибо за видос, очень много полезной информации без воды
@user-ou5ok8fs9c
@user-ou5ok8fs9c Рік тому
Отличная лекция, огромное спасибо, Тимур.
@romanmegagunko4650
@romanmegagunko4650 Рік тому
Спасибо! Самый подробный ролик из тех, что я видел.
@user-fh7md9mh9m
@user-fh7md9mh9m Рік тому
Тимур, огромная благодарность тебе за твой труд и знания!!!
@Rubezhin
@Rubezhin 9 місяців тому
Блин, как же я тащюсь от твоих видео! Спасибо тебе за твою проделанную работу!
@Chinaskis
@Chinaskis Рік тому
только что отметил себе твое видео event loop который на 8 минут, повторить перед собесом и тут подарок))) спасибо! Научил меня реально быстрее, чем курсы в ЯП) без обид ЯП
@user-ie7md3mm6x
@user-ie7md3mm6x Рік тому
Я подобные знания черпал с кучи разных источников на английском языке, а тут бесплатно и все в одном видео. Красавчик ! :)
@andreil7047
@andreil7047 Місяць тому
Шикарная лекция! Спасибо!
@yuridozhdikov6356
@yuridozhdikov6356 Рік тому
Это один из самых охрененных видосов которые я посмотрел! Добра тебе и сил!)
@Vedenser
@Vedenser Рік тому
После этого видоса я как-будто закончил универ по направлению эвентлупер. Огромная благодарность. Ждем собес
@user-lq5wi8gm1e
@user-lq5wi8gm1e 2 місяці тому
😁😁
@maximzvenigorodsky8563
@maximzvenigorodsky8563 Рік тому
Отличная лекция, спасибо за урок
@frednoby8531
@frednoby8531 11 місяців тому
Очень наглядно и познавательно! Взглянул на цикл событий немного под другим углом. Ты молодец, Тимур!
@user-ml8hn5kg9e
@user-ml8hn5kg9e Рік тому
Шикарно просто, шикарно про EventLoop!!!!!
@user-zs9qk8se9y
@user-zs9qk8se9y Рік тому
Спасибо за материал и старания
@user-wt8sq9om6c
@user-wt8sq9om6c Рік тому
Крассавчик, приятно наблюдать когда человек на своём месте 🙏✊🙏✊
@efimkapliy6370
@efimkapliy6370 8 місяців тому
Спасибо за качественно подготовленный материал! Визуально приятно выглядит, сбалансированный звук)
@voroninanton8059
@voroninanton8059 Рік тому
Супер понятное объяснение EVENT LOOP относительно браузера и node.js, спасибо!
@Nikita-gn4bg
@Nikita-gn4bg Рік тому
Огромное спасибо за контентище !!!!!!
@LORDFFkz
@LORDFFkz Рік тому
Все еще смотрю, но уже хочу поблагодарить тебя за такой прелестную лекцию, ты самый лучший из всех кого я смотрю
@wingless_pegasus
@wingless_pegasus Рік тому
Тима, Респект!!! Это просто огонь) Понял все что не мог понять ( принцип работы event loop в особенности ), я считай на твоих роликах вырос как программист с самого начала своего пути смотрю тебя! Спасибо большое за то, что помогаешь нам ( новичкам ) познавать этот тернистый и расти как специалисты !)
@user-bd8ve9mm2p
@user-bd8ve9mm2p 10 місяців тому
Максимально понятное объяснение!!! Красавчик
@artyomsultanov5204
@artyomsultanov5204 Рік тому
Как всегда шикарно, Тимур!!!
@sergeysamius1128
@sergeysamius1128 Рік тому
Потрясающе, спасибо
@MrKerwell
@MrKerwell Рік тому
Потрясающая лекция, спасибо! Было бы здорово когда-нибудь увидеть разбор всех дев-тулзов в браузере и их полезных фишках, о которых мало кто знает и мало кто пользуется. Было бы супер круто, потому что в интернете информация очень разрозненная и разобщенная
@user-fr2os8bn6c
@user-fr2os8bn6c Рік тому
Ответ сами себе уже и написали, мало кто знает и мало кто пользуется, так происходит потому-что мало кому необходимо это. Очень малый круг людей будет заинтересован в таком материале, а труд на этот материал автор должен будет потратить не малый.
@MrKerwell
@MrKerwell Рік тому
@@user-fr2os8bn6c event loop, движки и рендер тоже достаточно нишевая тема, но контент по этим темам появился, и народ пошел смотреть. Я не сомневаюсь, что автор потратил много времени и сил на создание и этого ролика. К тому же, если малому количеству необходим материал, это не значит, что он никому не нужен. Умнее и компетентнее станем, зачем отказываться от знаний? Я просто предложил темы для дальнейших курсов, есть небольшой отклик в виде лайков, почему нет? Если автора заинтересует, он может сделать данный ролик на основании рекомендаций своей аудитории, если нет - значит нет.
@xNomandx
@xNomandx 10 місяців тому
Лекция по дев-тулзам браузера и IDE от Яндекса: ukposts.info/have/v-deo/aXmGm518p2-KmJ8.html&ab_channel=Young%26%26Yandex%3A%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0
@Slavec5
@Slavec5 Рік тому
Спасибо за ролик, цикл событий в браузере намного понятнее стал
@user-uj4ju3lv4d
@user-uj4ju3lv4d Рік тому
Благодарю. Как всегда без воды.
@user-ih3bz3wk8o
@user-ih3bz3wk8o Рік тому
Собирался на собеседование по JS и попалось это видео ! Спасибо тебе , автор !
@serjkas
@serjkas Рік тому
Комент для продвижения, эта информация ооочень хороша, благодарочка!
@bergghest
@bergghest Місяць тому
Когда включал урок, не понимал на какое золото я напал. Гениальная подача, шикарная иллюстрация, абсолютная полнота картины. Подписка, жирный лайк, огромное спасибо!
@abereznitskiy31
@abereznitskiy31 Рік тому
Лучшее видео о Event Loop!
@barbatage5078
@barbatage5078 Рік тому
Юлби, спасибо тебе, самый топовый контент у тебя!
@user-lj8yk1fz1c
@user-lj8yk1fz1c 7 місяців тому
Это самый лучший ролик, посвященный Event Loop из всех что я видел, подробнее просто нельзя уже сделать. Периодически пересматриваю и каждый раз в восторге. Автору огромный респект, всегда нравились его ролики за отсутствие воды, информативность и отдельное спасибо за то что не впаривает курсы как остальные спикеры.
@Velichkina_a
@Velichkina_a 8 місяців тому
Очень круто! Спасибо!
@chingiza6999
@chingiza6999 Рік тому
супер приятно смотреть, всё подробно, детально, спасибо
@user-nn8uo8zp6y
@user-nn8uo8zp6y Рік тому
Спасибо бро, лайк не глядя. Уверен что видос полезный, без воды и интересный как обычно
@VadimGratsilev
@VadimGratsilev Рік тому
Очень насыщенное информацией видео, спасибо. Про Nodejs сложно было для понимания)
@95Bard
@95Bard Рік тому
Как всегда содержательно и качественно!
@user-er6ws1bf1r
@user-er6ws1bf1r 8 місяців тому
Лайк, подписка. Ничего лучше про Event Loop не встречал
@user-mv8bu5jy2n
@user-mv8bu5jy2n Рік тому
Ты даже не представляешь, насколько не глядя я поставил лайкос!=))))
@m1arsen
@m1arsen Рік тому
Спасибо за годный контент 🚀
@user-ur8vu3zb9t
@user-ur8vu3zb9t Рік тому
Автор молодец, все разложил доступно и понятно
@tesohi
@tesohi Рік тому
Это невероятно, очень качественно и подробно! Я тебя обожаю!
@Z7trick
@Z7trick Рік тому
Проделана огромная работа! Однозначно лайк👍
@ifreekazoid
@ifreekazoid Рік тому
Самый наилучшее объяснения которые вообще можно найти в сети. Огромное спасибо за проделанную работу!!!!
@viktorprilepin3700
@viktorprilepin3700 Рік тому
Это взорвавшаяся бомба концентрированных знаний. Благодарю за труд!
@kirillkiyatkin5203
@kirillkiyatkin5203 Рік тому
Тимур, спасибо тебе огромное. Как обычно ёмко, лаконично и по существу объяснил достаточно обширную тему. Ты лучший)
@Orlov_Developer
@Orlov_Developer Рік тому
Воу, думал что разбираюсь в теме. Выходит что нет, спасибо за такое подробное объяснение!
@gusvs
@gusvs Рік тому
Тимур, очередной тебе поклон, за такую работу, сколько бы до этого не пытался понять про event loop, всегда оставались вопросы, здесь же, смотря это видео или например про архитектуру, понимаю что не возникает сложности в понимании материала, а начинаешь задумываться о сложности записи этого видео, это огромный труд, который включает сбор информации, подготовка анимаций, слайдов, озвучивания без запинок и оговорок, и т.д., а самое главное все это структурировать в 75 минут, это талант. Просто ТОП#1, спасибо.
@romansamon9215
@romansamon9215 Рік тому
Достаточно давно подписан на тебя, вижу название ролика, лайк не глядя, очевидно, что без новых знаний после просмотра ты меня не отпустишь, huge respect
@artemzimin7669
@artemzimin7669 Рік тому
Великолепно, без всяких сомнений
@ncux199rus
@ncux199rus Рік тому
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик!
@user-zy6vx7fd7v
@user-zy6vx7fd7v Рік тому
Спасибо!
@gritsienkooleg3447
@gritsienkooleg3447 Рік тому
Тимур, спасибо тебе огромное, что несёшь качественное образование в массы
@Scorpion32wtf
@Scorpion32wtf 10 місяців тому
Очень крутой и подробный ролик, большое спасибо за проделанный труд!
The World's Fastest Cleaners
00:35
MrBeast
Переглядів 91 млн
Разбираем основы Kafka и RabbitMQ
26:54
Digital train | Alex Babin
Переглядів 5 тис.
Как работает Event Loop в JavaScript + примеры
33:24
Елена Литвинова — Искусство Веб-разработки 🛸
Переглядів 30 тис.
Компьютерная мышь за 50 рублей
0:28
dizzi
Переглядів 1,7 млн
It's embarrassing how much I like this thing.
12:19
Linus Tech Tips
Переглядів 853 тис.
Лучший телефон на андроиде?
0:25
Опросный
Переглядів 124 тис.
''Бесплатные умные'' домофоны для глупых людей. За чей счет банкет?
12:48
Вадим Шегалов.Оккультные игры элиты
Переглядів 30 тис.