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

В этом ролике мы разберем архитектуру браузера и node js. Подробно изучим принцип работы Event loop, очереди Microtask и macrotask. Поговорим про стадии рендера, про шаблон reactor и демультиплексор событий. Про однопоточную и многопоточную модель.

Таймкоды:
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 ➝ Время ставить лайки и писать комментарии для поддержки и продвижения видео, всем спасибо!)

Поддержать меня и мой канал вы можете по ссылкам ниже.

[ITKAMASUTRA]

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

[demetrx]

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

[VasyaFF]

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

[Vedenser]

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

[iemdmmx]

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

[zmerz]

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

[andrewsam]

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

[hpoqkhp]

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

[xwldrce]

Просто восхитительно! Спасибо тебе большое

[tesohi]

Это невероятно, очень качественно и подробно! Я тебя обожаю!

[adelinaromanova]

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

[alexanderalexander]

Спасибо, Тимур! Как всегда все просто и понятно. Ждем новые ролики!

[gzqctjy]

ОГРОМНОЙ ТЕБЕ СПАСИБО! Невероятно просто и интересно!

[keimdst]

Видос пушка. Так все круто разобрано и для любого уровня. Неважно начинающий ты или ветеран. Респект и лайк за старания.

[night]

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

[kwyygie]

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

[qstcmpo]

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

[wupsqum]

Отличная работа, Тим! Буду пересматривать и рекомендовать коллегам, спасибо!)

[LORDFFkz]

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

[dmtrkskv]

Классное видео!

Осталось непонятным, что будет, если в Nodejs Event Loop колбек1 из менее приоритетной фазы (например, "I/O колбеки") добавит в очередь колбек2 из более приоритетной фазы (например, "Таймерные колбеки"). Варианты:
1) Колбек1 сработает сразу после колбек2 (по аналогии с микрозадачей, порожденной макрозадачей).
2) Колбек1 будет ждать завершения всех фаз, пока снова не дойдет очередь до его фазы.

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