TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

🤔 Какие проблемы решает eventloop?

Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.

🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи

JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.

console.log("1: Перед запросом");

setTimeout(() => {
console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");


Вывод в консоль
1: Перед запросом  
3: После запроса
2: Данные загружены (спустя 2 секунды)


🚩Обработка пользовательских событий без зависаний

Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.
document.querySelector("button").addEventListener("click", () => {
console.log("Кнопка нажата!");
});


🚩Загрузка данных без блокировки страницы

Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа.
Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.
console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");


Вывод
Запрос данных...  
Код выполняется дальше!
(Спустя время) Данные получены: {id: 1, title: "..."}


🚩Обход блокировки в тяжёлых вычислениях

Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.
let count = 0;

function heavyTask() {
for (let i = 0; i < 1e6; i++) {
count++;
}
console.log("Часть работы выполнена!");

if (count < 5e6) {
setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
}
}

heavyTask();


Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие проблемы решает eventloop?

Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.

🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи

JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.
console.log("1: Перед запросом");

setTimeout(() => {
console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");


Вывод в консоль
1: Перед запросом  
3: После запроса
2: Данные загружены (спустя 2 секунды)


🚩Обработка пользовательских событий без зависаний

Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.
document.querySelector("button").addEventListener("click", () => {
console.log("Кнопка нажата!");
});


🚩Загрузка данных без блокировки страницы

Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа.
Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.
console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");


Вывод
Запрос данных...  
Код выполняется дальше!
(Спустя время) Данные получены: {id: 1, title: "..."}


🚩Обход блокировки в тяжёлых вычислениях

Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.
let count = 0;

function heavyTask() {
for (let i = 0; i < 1e6; i++) {
count++;
}
console.log("Часть работы выполнена!");

if (count < 5e6) {
setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
}
}

heavyTask();


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)