103 lines
5.8 KiB
Markdown
103 lines
5.8 KiB
Markdown
---
|
||
sidebar_position: 8
|
||
---
|
||
|
||
# Ререндер страницы в контексте event loop
|
||
|
||
Ререндер (перерисовка страницы) и event loop действительно тесно связаны в браузере, хотя происходят на разных уровнях работы движка.
|
||
|
||
## 🧠 Что такое event loop (цикл событий)
|
||
|
||
Event Loop — это механизм, который координирует выполнение JavaScript и обновление пользовательского интерфейса в браузере.
|
||
Он следит за очередями задач (macrotasks и microtasks) и периодически синхронизирует результаты с рендерингом страницы.
|
||
|
||
Упрощённо:
|
||
1. JS выполняется в однопоточном окружении.
|
||
2. Когда движок сталкивается с асинхронной задачей (таймер, fetch, промис), она попадает в очередь.
|
||
3. Event loop циклически:
|
||
- берёт задачу из очереди макротасков (например, setTimeout, fetch, click),
|
||
- выполняет её,
|
||
- затем обрабатывает все микротаски (например, .then, queueMicrotask),
|
||
- и только после этого может произойти рендер (отрисовка кадра).
|
||
|
||
## 🎨 Где тут ререндер страницы
|
||
Ререндер (или «перерисовка кадра») происходит между циклами event loop, после того как:
|
||
- закончено выполнение всех JS-задач текущей итерации (включая microtasks),
|
||
- браузер свободен,
|
||
- и наступает момент обновления UI (обычно раз в 16,6 мс для 60 fps).
|
||
|
||
Можно представить цикл так:
|
||
```text
|
||
[ Выполнение JS ] → [ Очередь microtasks ] → [ Пересчёт layout / repaint / composite ] → [ Следующий event loop tick ]
|
||
```
|
||
|
||
## 📅 Когда браузер решает перерисовать страницу
|
||
|
||
Браузер не будет рендерить страницу посреди выполнения JavaScript — это важно.
|
||
Рендеринг откладывается, пока:
|
||
- не закончится текущая макротаска,
|
||
- не будут выполнены все микротаски (Promise callbacks),
|
||
- и браузер решит, что пора обновить UI.
|
||
|
||
Например:
|
||
```js
|
||
console.log("start");
|
||
Promise.resolve().then(() => {
|
||
document.body.style.background = "red";
|
||
console.log("microtask done");
|
||
});
|
||
console.log("end");
|
||
```
|
||
Порядок событий:
|
||
```text
|
||
start
|
||
end
|
||
microtask done
|
||
[перерисовка после microtasks — фон становится красным]
|
||
```
|
||
|
||
## ⚙️ Пример с блокировкой рендера
|
||
|
||
Если ты сделаешь что-то тяжёлое в JS, например:
|
||
```js
|
||
while (true) {} // бесконечный цикл
|
||
```
|
||
— event loop не сможет дойти до стадии «рендера», и страница «замрёт».
|
||
Поэтому анимации, реактивные интерфейсы и плавные переходы требуют, чтобы JS отдавал управление обратно браузеру (через requestAnimationFrame, setTimeout, await, и т.д.).
|
||
|
||
## Как requestAnimationFrame вписывается в event loop
|
||
|
||
requestAnimationFrame (rAF) — это специальный API, который браузер вызывает перед следующей перерисовкой.
|
||
Это позволяет выполнять обновления DOM/Canvas синхронно с циклом рендера, без пропусков кадров.
|
||
|
||
```bash
|
||
→ JS выполняется
|
||
→ rAF callback запланирован
|
||
→ microtasks выполняются
|
||
→ браузер вызывает rAF callback
|
||
→ обновление layout/repaint
|
||
→ кадр готов
|
||
```
|
||
## 🧩 В контексте фреймворков (React, Vue и т.п.)
|
||
Когда React вызывает setState(), обновления не происходят мгновенно:
|
||
- Они ставятся в очередь микрозадач или макрозадач (в зависимости от режима).
|
||
- После завершения текущего JS-такта React вычисляет новый виртуальный DOM.
|
||
- Затем браузер, на этапе рендера event loop, перерисовывает изменённые части UI.
|
||
|
||
Таким образом, **event loop управляет моментом**, когда обновления React реально становятся видимыми.
|
||
|
||
## 📊 Итоговое резюме
|
||
|
||
| Этап | Что делает |
|
||
|--------------|---------------------------------------------------------------------|
|
||
| Macrotask | Выполняет основную JS-задачу (скрипт, обработчик события и т.д.) |
|
||
| Microtasks | Обрабатывает все промисы и микрозадачи |
|
||
| Render phase | После JS — браузер вычисляет layout, стили и отрисовывает изменения |
|
||
| Next tick | Начинается следующий цикл event loop |
|
||
|
||
|
||
### Визуальная схема event loop и рендера (в виде диаграммы)
|
||
<img src="images/08-rerender-phases.png" width="600"/>
|
||
|
||
|
||
|