Event Loop Flashcards
Что такое Event loop’?
‘Цикл событий
Цикл событий - это механизм ожидания и запуска задач‘1 из очереди задач‘2.
‘1 task
‘2 task queue
В каких стандартах описан механизм работы цикла событий?
Что такое ECMAScript?
Какие алгоритмы интерпретируются как задачи в браузере?
Опишите 5 алгоритмов
Задачи в браузере включают в себя алгоритмы, ответственные за такую работу как:
1. Запуск события: document.dispatchEvent(event)
2. Парсинг документа, токенизация и последующая обработка
3. Вызов функции обратного вызова’1: обработка событий промисов’2, событий браузера и ошибок, таймауты, запросы анимационных фреймов’3 и др.
4. Обработка ресурса, запрошенного асинхронно
5. Реакция на изменение DOM
Задачи группируются по источникам в раздельных очередях в порядке FIFO’5 в целях оптимизации выполнения этих задач Агентом’5.
Строгая очередность задач необходима для обеспечения целостности документа, остальные механизмы браузера (отправка, ожидание и получение асинхронных запросов, ожидание и удовлетворение промисов, скроллинг, нажатия клавиш и отслеживание расположения курсора и др.), которые не связаны с документом, выполняются браузером параллельно.
‘1 callback
‘2 promise
‘3 request animation frame
‘4 UserAgent
‘5 First-in-First-Out
Какова структура задачи?
Опишите 4 компонента
Задача состоит из следующих компонентов:
1. Шаги для выполнения задачи
2. Источник задачи. Служит для распределения задач в очереди в целях оптимизации и отзывчивости
3. Документ, в котором исполняется задача или null
4. Объекты, характеризующие окружение
Каков механизм работы цикла событий?
Опишите 4 шага
Цикл событий должен постоянно проходить по следующим основным шагам:
1. Если у цикла событий есть очередь задач, в которой есть задачи, то выполнить старшую задачу из этой очереди
2. Выполнить очередь микрозадач‘1, начиная от старшей
3. Обновить рендеринг, выполнив все шаги для каждого активного документа
4. Если нет других задач в очередях, то через 50 мсек проверить наличие функций обратных вызовов запросов анимационных фреймов, далее выполнять проверку каждые 60 мсек.
‘1 microtask queue
Каковы шаги обновления рендеринга в рамках цикла событий?
Опишите 10 шагов
Если цикл событий является компонентов окна’1, то выполнить последовательно сгруппированные шаги рендеринга для каждого документа:
1. Обновление кандидатов и применение автофокуса
2. Изменение размеров окна и инициация событий
3. Изменение положения скроллов и инициация событий
4. Изменение состояния медиа-запросов‘2 и инициация событий
5. Обновление анимаций и инициация событий
6. Изменение полноэкранности и инициация событий
7. Обновление состояний холстов‘3
8. Запуск функций обратного вызова запросов анимационных фреймов
9. Перерасчет стилей, обновление расположений и доставка размеров в наблюдатели
10. Перевод фокуса
‘1 window
‘2 media-query
‘3 canvases
Опишите и обоснуйте порядок вывода следующего кода:
setTimeout(() => console.log(1), 50) // a setTimeout(() => console.log(2), 0) // b Promise.resolve().then(() => console.log(3)).then(() => console.log(4)) //c requestAnimationFrame(() => console.log(5)) // d console.log(6) // e
а - вызов коллбека попадет в очередь через 50 мсек и выполнтся в одном из следующих циклов
b - вызов коллбека попадет в очередь сразу после завершения текущего контекста и выполнтся в одном из следующих циклов
c - обработка промиса выполнится сразу же после завершения текущего контекста в текущем цикле
d - вызов коллбека в текущем цикла в рамках рендеринга
e - код исполнится в текущем стеке вызовов
6 3 4 5 2 1
