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

Рет қаралды 250,119

Күн бұрын

В этом ролике мы разберем архитектуру браузера и 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

Пікірлер: 973

@ITKAMASUTRA Жыл бұрын

Заморочился, как всегда и сделал пушечку, молодец 👏

@UlbiTV Жыл бұрын

Дима, спасибо!

@BestHitsVideo Жыл бұрын

@@UlbiTV привет, есть ли у тебя курсы по JS с нуля?

@Quentinrei Жыл бұрын

@@BestHitsVideo вроде нет

@andreymonchencko3908 Жыл бұрын

Вы вдвоём весь снгшный ИТ ютьюб тащите😅

@reality-analyst 10 ай бұрын

@@UlbiTV есть неточности. Например при переполнении стека вызовов крашится не приложение, а выполнение стека вызов. То есть к примеру интервалы продолжат работать, если речь о рантайме в веб браузере.

@VasjaG Жыл бұрын

Красавчик. Посадил жену, бабушку и дочь смотреть по 10 раз сразу с телевизора, телефонов и планшетов. Все с разных VPNов и IPшников.

@user-ym7ir4ut8c 4 күн бұрын

Хоспади, ну как же прекрасно то, что ты делаешь! Спасибо тебе огромное за твою работу, не могла нигде на ютубе найти похожий подробный контент. Ты просто лучший!

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

это мы смотрим!

@zmerz Жыл бұрын

Спасибо тебе, Тим!!!Топовый блогер, который не только понимает предмет, но и профессионально умеет его донести до людей!

@adelinaromanova8353 Жыл бұрын

+++

@barbatage5078 Жыл бұрын

Самый лучший!

@alexandrkruglyak Жыл бұрын

Действительно всегда есть чему поучиться, как в преподавании, так и в области. П.С. Ребят, я микросервисы пишу на nodejs, кто в теме - заходите в гости!

@GlebKrylov Жыл бұрын

Просто мысли мои читаешь, как раз сижу с этим разбираюсь и тут это видео. Спасибо!!!!

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

Тимур, отличное видео, единственно поправлю тебя, движок Webkit использовался в chrome до 2013 года, сейчас используется Blink насколько я знаю. 2:47

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

Я подобные знания черпал с кучи разных источников на английском языке, а тут бесплатно и все в одном видео. Красавчик ! :)

@Chinaskis Жыл бұрын

только что отметил себе твое видео event loop который на 8 минут, повторить перед собесом и тут подарок))) спасибо! Научил меня реально быстрее, чем курсы в ЯП) без обид ЯП

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

Отличная лекция, огромное спасибо, Тимур.

@dontcode Жыл бұрын

Ты прав, это самый подробный ролик по event loop, который только можно найти

@Orlov_Developer Жыл бұрын

Воу, думал что разбираюсь в теме. Выходит что нет, спасибо за такое подробное объяснение!

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

Наконец-то новый ролик! Как всегда на высоте , Тимур!

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

Крассавчик, приятно наблюдать когда человек на своём месте 🙏✊🙏✊

@andrewsam224 3 ай бұрын

Ulbi, Я тебя очень прошу не останавливайся и продолжай снимать новые видео. Ты очень сильно помогаешь людям, особенно в эти тяжёлые времена!!!! Спасибо тебе огромное и низкий поклон. "Ты в ответе за тех кого приручил"-Экзюпери. Не бросай нас!!!!!

@bergghest Ай бұрын

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

@demetrx7972 Жыл бұрын

Аналогов нет, даже на английском ютубе. Спасибо тебе за труд, курс топ!

@dmitrykuskov6715 Жыл бұрын

Классное видео! Осталось непонятным, что будет, если в Nodejs Event Loop колбек1 из менее приоритетной фазы (например, "I/O колбеки") добавит в очередь колбек2 из более приоритетной фазы (например, "Таймерные колбеки"). Варианты: 1) Колбек1 сработает сразу после колбек2 (по аналогии с микрозадачей, порожденной макрозадачей). 2) Колбек1 будет ждать завершения всех фаз, пока снова не дойдет очередь до его фазы. Больше всего понравилось: - Этапы рендеринга DOM. Ранее видел их при записи Performance в Dev Tools, но не понимал, что именно они значат. - Возможность использовать самописные C++ модули в Nodejs. Думаю, это можно использовать для ускорения вычислений в узких местах и более гибкой работы с многопоточностью (по сравнению с Worker). - Факт того, что в Nodejs свой Event Loop, а не привычный браузерный.

@dmitrykuskov6715 Жыл бұрын

Поэксперементировал с фазами, использовал setImmediate и setTimeout в node v19.6.0. Вот какие результаты получил: 1) Если в глобальной области в любом порядке вызвать setImmediate и setTimeout, то первыми всегда выполнятся колбеки для setTimeout. Видимо это и есть сортировка на фазы. 2) Но если то же самое проделать не из глобальной области, а например, из другого setImmediate или из Promise.resolve().then(...), то сортировки не будет, колбеки будут вести себя как обычные макрозадачи в браузере. 3) Promise.resolve().then(...) выполняется сразу после породившего колбека, как и в случае микрозадачи в браузере. Поэтому напрашивается вывод, что в Nodejs все-таки есть привычные макро- и микрозадачи, просто с некоторыми нюансами (пункт 1). Таким образом, я сам ответил на свой вопрос: ни один из моих вариантов неверный. Судя по всему правильный ответ такой: Колбек1 просто встанет в очередь макрозадач и его фаза никак не повлияет на порядок выполнения.

@flepjack Жыл бұрын

В этом моменте, когда Тимур сказал, что почему то ВСЕ упускают промисы, и они на самом деле должны быть самыми первыми, возникло подозрение, что что-то тут не так, и скорей всего, Тимур не так понял место микро-макро задач в нодовском цикле событий.

@flepjack Жыл бұрын

Я про 1:10:07

@dmitrykuskov6715 Жыл бұрын

@Aleksandr Kudrich Не сказать, что это очень интересно и полезно, скорее любопытно, поэтому лень глубоко копаться в литературе. Нашел видео, где наглядно показана работа Nodejs Event loop kzfaq.info/get/bejne/bcxna5qE2M3PnnU.html Основные тезисы: - Пока не выполнятся все колбеки текущей фазы, не начнет выполняться следующая фаза. - Обработчики промисов выполняются между фазами. Таким образом, если "сделать setTimeout и setImmediate внутри Poll", то сначала выполнится колбек из setImmediate, т.к. фаза Check следует сразу за фазой Poll, а только затем колбек из setTimeout. К сожалению это не дает мне ответ, почему при запуске внутри setImmediate двух колбеков: setImmediate и setTimeout, эти вложенные колбеки выполнятся в порядке объявления, если их менять местами.

@duce201 Жыл бұрын

Супер тема!!! Обязательно посмотрю!!! Спасибо за труд!!!

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

Спасибо за видео, наконец-то стало прям понятно, что такое event loop, это действительно самое подробное видео

@elenavinokurova5578 Жыл бұрын

Лекция просто супер. Кстати, по поводу последнего примера, эта проблема называется "starvation in the macrotask queue" ("голодание очереди макротасок", когда промис порождает другой промис в цикле, не давая шанса на выполнение задачам из очереди макротасок). Думаю тоже плюсом будет упомянуть этот термин, если зайдет речь на собеседовании.

@nikto1851 Жыл бұрын

Ну ваще! Огонь! Спасибо, Тимур!

@themm_s1588 Жыл бұрын

541:40 ➝ НЕблокирующий и неблокирующий I/O В описании не углядел чуточку :D Спасибо за контент

@user-rb3sw3ku6t 5 ай бұрын

С нодой чутка запутался, а вот с браузером - разобрался на все сто!!! Спасибо за ваш большой труд! Как здорово что в интернете встречаются люди подобно вам )

@NeverGTI Жыл бұрын

Лайк авансом - вечером обязательно гляну ) Спасибо за труд.

@user-lj8yk1fz1c 8 ай бұрын

Это самый лучший ролик, посвященный Event Loop из всех что я видел, подробнее просто нельзя уже сделать. Периодически пересматриваю и каждый раз в восторге. Автору огромный респект, всегда нравились его ролики за отсутствие воды, информативность и отдельное спасибо за то что не впаривает курсы как остальные спикеры.

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

Очень полезный ролик получился, всегда возникали проблемы с event loop, я вроде понимал как это работает, но простыми словами обьяснить не мог. После ролика получилось составить краткое описание, спасибо большое, наконец то разобрался с макрозадачами и микро

@orlovviacheslav2731 Жыл бұрын

Одно из самых понятных объяснений Event Loop!

@dabiggestfloppa3441 Жыл бұрын

Как всегда уровень! Спасибо тебе огромное, мы это очень ценим!

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

Интересно послушать интервью во всем известную корпорацию))

@meekkzin Жыл бұрын

Блин, тут ещё и про многопоточность в libuv! Господи, это лучшее видео! Ты просто супер!

@reginasap9104 3 ай бұрын

перешла на этот ролик по ссылке из видео "Что такое Event Loop в JavaScript? Event Loop Простыми словами" из видео на 5 мин сразу на часовую лекцию))) огромное спасибо за твою работу)))

@romanmegagunko4650 Жыл бұрын

Спасибо! Самый подробный ролик из тех, что я видел.

@Vedenser Жыл бұрын

После этого видоса я как-будто закончил универ по направлению эвентлупер. Огромная благодарность. Ждем собес

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

😁😁

@kselnaag2482 Жыл бұрын

На собесах часто спрашивают, посмотрел с удовольствием. Ждем новых собесов !

@yuridozhdikov6356 Жыл бұрын

Это один из самых охрененных видосов которые я посмотрел! Добра тебе и сил!)

@luckytima2315 Жыл бұрын

Вот это красиво, Тимур спасибо большое, тупо лучший !

@MrKOHKyPEHT Жыл бұрын

а-ху-еть... Я думал что знаю ивент луп, а оказалось что нифига не знаю. Видео пушка. С такой подачей поймёт даже ребёнок

@---Maksim--- Жыл бұрын

Хорошо, что показал в конце зацикливание промиса, потому что в середине ролика когда ты объяснял про микрозадачи, ты не рассказал, что обработка промисов(then, catch, finally, а await вообще блокирует выполнение) также попадает в очередь микрозадач, отсюда и зацикливание)

@cerdek9190 7 ай бұрын

Мужик ты лучший, этот ролик очень сильно помогает при подготовке к интервью, незаслуженно мало просмотров!

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

Ты даже не представляешь, насколько не глядя я поставил лайкос!=))))

@gringoireartman8242 Жыл бұрын

Огромное спасибо, Тимур! Крутая лекция!

@ncux199rus Жыл бұрын

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик!

@Slavec5 Жыл бұрын

Спасибо за ролик, цикл событий в браузере намного понятнее стал

@night4079 Жыл бұрын

уже досмотрел, в целом информативно)0))

@emirlannurlanuulu6790 Жыл бұрын

Спасибо большое за вашу помощь, Тимур. Всё коротко, ясно, всё по полочкам. Спасибо за ваш труд 🙏🏽

@ProgrammerFlunt Жыл бұрын

Редко пишу комменты, но йоу, очень крутой видос! Профессиональная подача информации, очень крутые анимации и визуал, короче видос высокого уровня.

@serjkas Жыл бұрын

Комент для продвижения, эта информация ооочень хороша, благодарочка!

@lazys7151 Жыл бұрын

Перед просмотром, пожалуй, оставлю лайкосик!

@VadimGratsilev Жыл бұрын

Очень насыщенное информацией видео, спасибо. Про Nodejs сложно было для понимания)

@canismajoriskorotki3792 Жыл бұрын

это наверное лучшее, что есть на youtube про event loop. Спасибо огромное.

@serdotsenko Жыл бұрын

теже мысли 👏

@WashYourBack 3 ай бұрын

Потрясающе, увидел анонс этого ролика в одном из твоих собесов. Вспомнил про него, когда начал разбираться с промисом. Понял что с промисом не разобраться пока не разберешься с ивент лупом. Глядишь так до нижних уровней абстракций можно добраться. А собес в известную корпорацию с удовольствием посмотрим. Труд титанический, все наглядно!

@user-db5mt4ko7t 9 ай бұрын

Редко пишу комментарии, но это тот случай когда автора действительно хочется поблагодарить за его труд. Видео информативное и, что самое главное, вся информация легко воспринимается и усваивается за счёт приятного визуального оформления. Спасибо за такую сильную работу!

@EvgeniyZhukov-lt8rq Жыл бұрын

Тимур, благодарю за старания и прекрасную лекцию. Давно ждал 💥💯

@veanus-ci4tz 5 ай бұрын

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

@Oleg_Artemov Жыл бұрын

Самое подробное объяснение темы, которое я встречал! Спасибо за твои труды 🙏

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

Великолепно! Огромное спасибо!

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

Это божественно. Настолько легко и просто объяснять не самую очевидную информацию - нужно уметь. Большое спасибо и успехов, и побольше полезных видео.

@LORDFFkz Жыл бұрын

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

@kobakamladze4175 Жыл бұрын

просто лучший канал. хотелось бы больше бэкенда.

@Prosoimka Жыл бұрын

Спасибо огромное за такую понятную и визуальную лекцию

@ifreekazoid Жыл бұрын

Самый наилучшее объяснения которые вообще можно найти в сети. Огромное спасибо за проделанную работу!!!!

@user-gt9tc8cr1y 9 ай бұрын

Тимур, спасибо тебе огромнейшее! За то, как все преподносишь и объясняешь именно ты: за подробности, нюансы, манеру, повторения, примеры и акценты Спасибо!

@Nikita-gn4bg Жыл бұрын

Огромное спасибо за контентище !!!!!!

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

БОЖЕ ТВОИ ВИДЕО ПРО АРХИТЕКТУРУ ЭТО ПРОСТО МЕЧТА. Вокруг много одного кода, а понимание не все могут дать, а ты это делаешь превосходно, лайк!

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

Тимур, спасибо огромное! Лучшее видео!

@albinapavlenko9924 Жыл бұрын

Лекция - огонь! ❤ И материал, и способ его подачи - на высоте. Огромное Вам спасибо.

@romansamon9215 Жыл бұрын

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

@golden_crow7255 Жыл бұрын

Спасибо за потрясающую лекцию, пожалуйста продолжай и дальше создавать такой крутой и полезный контент!!!

@-Forever-Young- Жыл бұрын

Ну что ж) глянем, что тут у нас)

@theoty-js-react Жыл бұрын

помню обзор на event loop от тебя же, шикарное объяснение! колесо обозрения)

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

Тимур, огромная благодарность тебе за твой труд и знания!!!

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

Спасибо за очередную топовую лекцию!После объяснения попробовал решать задачи по event loop, все решены верно. В лекции всё разложено по полочкам, столько полезной и нужной информации в одном видео. Спасибо Тимур!!!

@Datomezz Жыл бұрын

Ты легенда ! Ахуйтелный контент.

@Fanta.Bamboocha Жыл бұрын

Ещё не посмотрев, знаю, что будет круто Спасибо большое

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

Собирался на собеседование по JS и попалось это видео ! Спасибо тебе , автор !

@grigorhovhannisyan7164 Жыл бұрын

Ապրես սենց վիդեոներ արա մտնենք նայենք

@gleb6843 Жыл бұрын

Спасибо за труд, ждем новые лекции)

@bulatkhisamov8933 Жыл бұрын

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

@UserDev12 Жыл бұрын

Просто замечательная лекция. Как всегда на высшем уровне. Спасибо большое!

@barbatage5078 Жыл бұрын

Юлби, спасибо тебе, самый топовый контент у тебя!

@caH40yc Жыл бұрын

Это я вовремя зашел в ютуб ))

@romanchagovtsev4119 Жыл бұрын

Одна из самых полезных и содержательных лекций, которую я встречал. Спасибо за старания👍🏼

@adelinaromanova8353 Жыл бұрын

Тима, спасибо за очередной прекрасно рассказаный материал!💥

@ext_0015 Жыл бұрын

Сразу в начале лайк и коммент . Спасибо большое за ролики !

@MrKerwell Жыл бұрын

Потрясающая лекция, спасибо! Было бы здорово когда-нибудь увидеть разбор всех дев-тулзов в браузере и их полезных фишках, о которых мало кто знает и мало кто пользуется. Было бы супер круто, потому что в интернете информация очень разрозненная и разобщенная

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

Ответ сами себе уже и написали, мало кто знает и мало кто пользуется, так происходит потому-что мало кому необходимо это. Очень малый круг людей будет заинтересован в таком материале, а труд на этот материал автор должен будет потратить не малый.

@MrKerwell Жыл бұрын

@@user-fr2os8bn6c event loop, движки и рендер тоже достаточно нишевая тема, но контент по этим темам появился, и народ пошел смотреть. Я не сомневаюсь, что автор потратил много времени и сил на создание и этого ролика. К тому же, если малому количеству необходим материал, это не значит, что он никому не нужен. Умнее и компетентнее станем, зачем отказываться от знаний? Я просто предложил темы для дальнейших курсов, есть небольшой отклик в виде лайков, почему нет? Если автора заинтересует, он может сделать данный ролик на основании рекомендаций своей аудитории, если нет - значит нет.

@xNomandx 10 ай бұрын

Лекция по дев-тулзам браузера и IDE от Яндекса: kzfaq.info/get/bejne/Z6-Fmsp21Z-9Z58.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

@kirillkiyatkin5203 Жыл бұрын

Тимур, спасибо тебе огромное. Как обычно ёмко, лаконично и по существу объяснил достаточно обширную тему. Ты лучший)

@sclif1312 Жыл бұрын

Крутой ролик. Все по полочкам. Спасибо!!!

@gusvs Жыл бұрын

Тимур, очередной тебе поклон, за такую работу, сколько бы до этого не пытался понять про event loop, всегда оставались вопросы, здесь же, смотря это видео или например про архитектуру, понимаю что не возникает сложности в понимании материала, а начинаешь задумываться о сложности записи этого видео, это огромный труд, который включает сбор информации, подготовка анимаций, слайдов, озвучивания без запинок и оговорок, и т.д., а самое главное все это структурировать в 75 минут, это талант. Просто ТОП#1, спасибо.