🚀 Открываешь сайт — и что вообще происходит?
У новичков часто есть ощущение, что сайт — это какая-то магическая коробка. Ты открыл страницу, нажал кнопку, что-то выехало, что-то загрузилось, где-то крутится спиннер — красиво, но непонятно.
На деле всё довольно логично. Браузер получает HTML, CSS и JavaScript, а потом шаг за шагом собирает страницу и запускает логику. То есть сайт — это не картинка, а целый процесс, который браузер постоянно поддерживает в живом состоянии.
Если объяснять совсем по-человечески, то:
HTML — это каркас страницы;
CSS — это внешний вид;
JavaScript — это поведение и интерактивность.
Без JavaScript страница была бы как манекен в витрине: выглядит нормально, но ничего не умеет.
🏗 Сначала браузер читает HTML
Когда ты открываешь сайт, браузер сначала получает HTML-файл. Это обычный текст с тегами: заголовки, кнопки, блоки, картинки и всё остальное.
Но браузер не просто показывает этот текст как есть. Он превращает HTML в специальную структуру, которая называется DOM — Document Object Model.
DOM можно представить как дерево элементов. У страницы есть корень, внутри него блоки, внутри блоков кнопки, тексты, ссылки и так далее.
<body>
<h1>Привет</h1>
<button>Нажми меня</button>
</body>Для браузера это уже не просто текст, а объекты, с которыми JavaScript потом может работать. Именно поэтому скрипт может найти кнопку, изменить текст, добавить класс или повесить обработчик на клик.
То есть первый важный вывод такой: JavaScript работает не с HTML-файлом напрямую, а с DOM-структурой, которую браузер построил на его основе.
🎨 Потом подключается CSS
После HTML браузер разбирает CSS. Он понимает, какие стили применять к каким элементам: цвет, размер, отступы, позиционирование, анимации и прочее.
Потом браузер объединяет структуру страницы и стили, чтобы понять, как именно всё должно выглядеть на экране. И только после этого рисует интерфейс.
Да, получается, что браузер в прямом смысле собирает страницу по частям. Не существует готового «сайта» внутри файла — он конструируется у тебя на глазах, просто очень быстро.
⚡ А теперь на сцену выходит JavaScript
Вот тут начинается всё самое интересное. Когда браузер доходит до JavaScript, он передаёт код движку JavaScript, встроенному в браузер. Например, в Chrome это движок V8.
Этот движок читает код и выполняет его строчка за строчкой.
console.log('Привет из браузера');Если в коде написано что-то поменять на странице — JavaScript обращается к DOM и меняет элементы.
Если написано отреагировать на клик — JavaScript ждёт, пока пользователь нажмёт кнопку.
Если написано отправить запрос на сервер — браузер помогает это сделать через встроенные API.
Короче: JavaScript — это мозг интерактивности.
🧵 JavaScript однопоточный — и это важно
Один из главных моментов, который сначала ломает мозг новичкам: JavaScript в браузере работает в одном потоке.
Это значит, что он делает только одну задачу в один момент времени. Не десять сразу. Не «параллельно, если очень постараться». А последовательно.
Представь одного сотрудника, у которого на столе лежит пачка задач. Пока он не закончит текущую, к следующей он не перейдёт.
Поэтому если в JavaScript запустить что-то очень тяжёлое и долгое, страница начнёт подвисать. Кнопки не нажимаются, интерфейс тормозит, скролл дёргается — классика.
while (true) {
// бесконечный цикл
}Если так сделать, вкладка очень быстро превратится в памятник плохим решениям.
📚 Что такое Call Stack?
Когда JavaScript выполняет код, он использует структуру под названием Call Stack — стек вызовов.
Туда попадают функции, которые сейчас выполняются. Последняя вызванная функция оказывается сверху стека. Когда она завершилась — убирается. Потом продолжается выполнение предыдущей.
function one() {
two();
}
function two() {
console.log('Работает функция two');
}
one();Здесь сначала в стек попадёт one(), потом внутри неё вызовется two(). После завершения two() она уйдёт из стека, потом завершится one().
То есть стек — это буквально список того, что JavaScript делает прямо сейчас.
🌐 Но как тогда работают клики, таймеры и запросы?
И вот тут появляется вопрос: если JavaScript однопоточный, почему сайт всё-таки умеет ждать клик, запускать setTimeout, отправлять запросы и не умирать каждую секунду?
Ответ: потому что браузер помогает JavaScript через Web APIs.
Это встроенные возможности браузера: таймеры, работа с сетью, обработка событий, доступ к DOM и многое другое.
Например:
setTimeout— это не магия самого JavaScript, а возможность браузера;клики мыши и нажатия клавиш тоже отслеживает браузер;
запросы через
fetchтоже обрабатываются не напрямую стеком JavaScript.
JavaScript говорит: «Браузер, пожалуйста, поставь таймер». И пока таймер тикает, сам JavaScript может заниматься другими задачами.
🔁 Event Loop — тот самый механизм, который всё связывает
Теперь главная звезда всей темы — Event Loop.
Если совсем просто, Event Loop — это механизм, который следит:
пуст ли стек вызовов;
есть ли готовые задачи в очереди;
можно ли взять следующую задачу и передать её в выполнение.
То есть он работает как диспетчер. Пока стек занят — ждём. Как только стек освободился — можно взять новую задачу из очереди.
console.log('1');
setTimeout(() => {
console.log('2');
}, 0);
console.log('3');Многие новички думают, что раз у таймера ноль миллисекунд, то 2 выведется сразу. Но нет.
Сначала выполнится весь синхронный код:
выведется
1;таймер передаст колбэк браузеру;
выведется
3;только потом, когда стек освободится, callback попадёт в выполнение.
Результат будет такой:
1
3
2И вот в этот момент у многих в голове впервые щёлкает: «А-а-а, так вот как оно работает».
🖱 Что происходит, когда ты кликаешь по кнопке
Допустим, на странице есть кнопка:
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Клик!');
});Что здесь происходит?
JavaScript находит кнопку в DOM;
говорит браузеру: «если по ней кликнут — запусти эту функцию»;
браузер сидит и ждёт действие пользователя;
когда происходит клик, функция уходит в очередь задач;
когда стек свободен — функция выполняется.
То есть JavaScript не стоит с секундомером и не проверяет каждую миллисекунду, кликнули или нет. Он просто подписывается на событие, а дальше браузер сообщает ему, когда пора действовать.
😵 Почему иногда сайт лагает?
Когда ты уже понимаешь стек, очередь и Event Loop, становятся понятны и лаги.
Если синхронный код выполняется слишком долго, JavaScript не может быстро добраться до других задач. А значит:
клики ждут;
анимации фризят;
инпуты тупят;
пользователь начинает злиться.
Именно поэтому фронтенд — это не только «сделать красиво», но и «сделать так, чтобы не лагало».
Если коротко: любой тяжёлый код в основном потоке — это риск сделать интерфейс деревянным.
Если ты изучаешь JavaScript и хочешь не просто читать теорию, а реально закреплять её на практике, обрати внимание на Кодик.
В приложении удобно разбирать программирование маленькими шагами: читаешь тему, решаешь задачи, повторяешь материал и не теряешься в хаосе из ста открытых вкладок.
А ещё у нас есть Telegram-сообщество, где выходят полезные посты, мемы, разборы и интересные факты из мира разработки. Это хороший способ не выпадать из обучения и регулярно держать мозг в теме.