Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions content-ru/.translation-manifest.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
{
"browser/Event Loop/Event Loop, Microtasks, Macrotasks.md": "ef7e18bdfa11924dff151a6a5557be2893e4004c9c10068ffb553f0008c36225",
"browser/Event Loop/Rendering Pipeline.md": "272e73f40aadfd7fbe43603dc75f044beee1672196e992f76f240937a0cb8bd6",
"browser/Event Loop/index.md": "f9f7836aceeba96e0518a91f66bb916e1d194bc7e52f58ba2e8684a643866840",
"browser/Event Loop, Microtasks, Macrotasks.md": "c50fcbd1c514616b299ca0979a0e71e3fb11fe01890273df918cca74205d433c",
"browser/Network/CORS.md": "90a34e5d48b1faad3fdb74ecb7b41fa0b78bb87af7e157c439f2c537d60632a8",
"browser/Network/Cookies & Storage.md": "9a49a4e936342471acae3b88e5f5f81f9c2c7c83e14be4a19dbe3acb88330d87",
"browser/Network/HTTP Headers & Caching.md": "84d40df2788021f2466cb63770346463df8cab99283ec7f78ed57026ee035c09",
"browser/Network/TCP & TLS Handshake.md": "40b29f2a89a82ff105ec0b9e581a3b0bf7b6d0b27937deebb636225c2fd8db16",
"browser/Network/index.md": "8562b0aabb62de7630dcf0b354e7c903792255721a1c57f519b4f1245651e483",
"browser/index.md": "2eb4623fd4287396fe34aa7ce75076ae5e30f88af39c8a4e3eab03b3530ebab9",
"browser/Rendering Pipeline.md": "39781029a4de64f155bdf7981e5a1124a821bcdac38fbd78b88f60b22a92ca66",
"browser/index.md": "480bbaeb7fa140c3641d10310bc223acb51985cf8c48097b088c2e1181bea311",
"headhunter/JavaScript-easy-level.md": "07d772fee0195708ac9b6bdf41e1f0fcd2efcf15861cc34947dbce0975d26277",
"headhunter/JavaScript-middle-level.md": "46ae57febadc70bebdc4f8116a7cf2db901c525e2b573bcfa34377be7af45ac0",
"headhunter/index.md": "d9888f62e5b1a3e71f67b05616d51e15e1eccb67be651c33da850f48f438afd2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,6 @@ requestAnimationFrame(animate)

> Условие выхода Event Loop для очереди микротасков — «пусто», а самопополняющаяся очередь никогда его не достигает. Очередь rAF же выходит через _снимок_: всё, что добавляется во время батча, откладывается на следующий, независимо от скорости выполнения.

[[browser/Event Loop/index|Event Loop & Rendering]]
[[browser/Event Loop/Rendering Pipeline|Rendering Pipeline — что происходит после опустошения очереди микротасков]]
[[browser/index|Browser]]
[[browser/Rendering Pipeline|Rendering Pipeline — что происходит после опустошения очереди микротасков]]
#browser
12 changes: 0 additions & 12 deletions content-ru/browser/Event Loop/index.md

This file was deleted.

2 changes: 0 additions & 2 deletions content-ru/browser/Network/HTTP Headers & Caching.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
```markdown
# 📦 HTTP-заголовки и кэширование

## 💡 Основная идея
Expand Down Expand Up @@ -61,4 +60,3 @@
[[browser/Network/TCP & TLS Handshake|TCP & TLS Handshake — что позволяет пропустить кэширование]]
[[browser/Network/CORS|CORS — ещё один сетевой шлюз на стороне браузера]]
#browser
```
103 changes: 87 additions & 16 deletions content-ru/browser/Network/TCP & TLS Handshake.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Layout → Paint (пиксели: цвет, текст, тени)
Paint → Composite (GPU собирает слои)
```

`element.style.width = '100px'` **не** триггерит layout немедленно. Браузер просто помечает элемент (и часто его поддерево) как "грязный" и откладывает пересчёт до следующей естественной точки рендера — шага, который идёт сразу после того, как очередь микрозадач опустеет и отработают колбэки rAF в [[browser/Event Loop/Event Loop|Event Loop]].
`element.style.width = '100px'` **не** триггерит layout немедленно. Браузер просто помечает элемент (и часто его поддерево) как "грязный" и откладывает пересчёт до следующей естественной точки рендера — шага, который идёт сразу после того, как очередь микрозадач опустеет и отработают колбэки rAF в [[browser/Event Loop, Microtasks, Macrotasks|Event Loop]].

Важное различие: **CSSOM** (распарсенные правила из `<style>`/стилшитов) и инлайновый `element.style` (объект `CSSStyleDeclaration`, привязанный к атрибуту `style` одного элемента) — разные объекты. Запись `el.style.width = ...` никогда не трогает CSSOM — она помечает "грязным" только этот один элемент.

Expand Down Expand Up @@ -56,7 +56,7 @@ Main thread: выполнение JS → Style calc → Layout → Paint
Compositor thread: Composite (transform/opacity)
```

Main thread — это место, где живут [[browser/Event Loop/Event Loop|Event Loop]], стек вызовов и весь JS — Style, Layout и Paint тоже находятся там. Если main thread заблокирован (долгий синхронный JS, forced reflow), всё останавливается: скролл, клики и любая анимация на `width`/`top`.
Main thread — это место, где живут [[browser/Event Loop, Microtasks, Macrotasks|Event Loop]], стек вызовов и весь JS — Style, Layout и Paint тоже находятся там. Если main thread заблокирован (долгий синхронный JS, forced reflow), всё останавливается: скролл, клики и любая анимация на `width`/`top`.

Compositor thread отдельный и не блокируется main thread'ом. К моменту выполнения Composite DOM/CSSOM уже не имеют значения: Paint (на main thread) уже превратил элемент в отрастеризованную GPU-текстуру. Compositor thread видит только готовые текстуры и матрицы трансформаций — он никогда не трогает дерево DOM. Composite — это не "рисование поверх HTML/CSS-скелета", это "размещение уже готовых изображений на экране".

Expand Down Expand Up @@ -111,6 +111,6 @@ items.forEach((item) => {

> Изменения `width`/`top` стоят Layout + Paint на main thread; изменения `color`/`shadow` стоят только Paint; `transform`/`opacity` пропускают оба этих шага и остаются на compositor thread — в этом вся причина предпочитать анимировать именно их.

[[browser/Event Loop/index|Event Loop & Rendering]]
[[browser/Event Loop/Event Loop, Microtasks, Macrotasks|Event Loop — как рендер встраивается в цикл]]
[[browser/index|Browser]]
[[browser/Event Loop, Microtasks, Macrotasks|Event Loop — как рендер встраивается в цикл]]
#browser
5 changes: 2 additions & 3 deletions content-ru/browser/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ title: browser

# Браузер

- [[browser/Event Loop/index|Event Loop & Rendering]]
- [[browser/Event Loop/Event Loop, Microtasks, Macrotasks|Event Loop, Microtasks, Macrotasks]]
- [[browser/Event Loop/Rendering Pipeline|Rendering Pipeline: Layout, Paint, Composite]]
- [[browser/Event Loop, Microtasks, Macrotasks|Event Loop, Microtasks, Macrotasks]]
- [[browser/Rendering Pipeline|Rendering Pipeline: Layout, Paint, Composite]]
- [[browser/Network/index|HTTP & Network]]
- [[browser/Network/TCP & TLS Handshake|TCP & TLS Handshake]]
- [[browser/Network/HTTP Headers & Caching|HTTP Headers & Caching]]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,6 @@ So infinite recursion through rAF doesn't block the browser: a render always lan

> The Event Loop's exit condition for the microtask queue is "empty" — a self-refilling queue never reaches it. The rAF queue instead exits by *snapshot*: what gets added during a batch is deferred to the next one no matter how fast it runs.

[[browser/Event Loop/index|Event Loop & Rendering]]
[[browser/Event Loop/Rendering Pipeline|Rendering Pipeline — what happens after the microtask queue drains]]
[[browser/index|Browser]]
[[browser/Rendering Pipeline|Rendering Pipeline — what happens after the microtask queue drains]]
#browser
12 changes: 0 additions & 12 deletions content/browser/Event Loop/index.md

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Layout → Paint (pixels: color, text, shadows)
Paint → Composite (GPU assembles layers)
```

`element.style.width = '100px'` does **not** trigger layout immediately. The browser just flags the element (and often its subtree) as "dirty" and defers the recalculation to the next natural render point — the step that sits right after the microtask queue drains and rAF callbacks run in the [[browser/Event Loop/Event Loop|Event Loop]].
`element.style.width = '100px'` does **not** trigger layout immediately. The browser just flags the element (and often its subtree) as "dirty" and defers the recalculation to the next natural render point — the step that sits right after the microtask queue drains and rAF callbacks run in the [[browser/Event Loop, Microtasks, Macrotasks|Event Loop]].

Important distinction: **CSSOM** (parsed rules from `<style>`/stylesheets) and inline `element.style` (a `CSSStyleDeclaration` object tied to one element's `style` attribute) are separate objects. Writing `el.style.width = ...` never touches CSSOM — it only dirties that one element.

Expand Down Expand Up @@ -53,7 +53,7 @@ Main thread: JS execution → Style calc → Layout → Paint
Compositor thread: Composite (transform/opacity)
```

The main thread is where the [[browser/Event Loop/Event Loop|Event Loop]], the call stack, and all JS run — Style, Layout and Paint live there too. If the main thread is blocked (long synchronous JS, forced reflow), everything stalls: scrolling, clicks, and any animation on `width`/`top`.
The main thread is where the [[browser/Event Loop, Microtasks, Macrotasks|Event Loop]], the call stack, and all JS run — Style, Layout and Paint live there too. If the main thread is blocked (long synchronous JS, forced reflow), everything stalls: scrolling, clicks, and any animation on `width`/`top`.

The compositor thread is separate and isn't blocked by the main thread. By the time Composite runs, DOM/CSSOM no longer matter: Paint (on the main thread) has already turned the element into a rasterized GPU texture. The compositor thread only ever sees finished textures and transform matrices — it never touches the DOM tree. Composite isn't "drawing over an HTML/CSS skeleton" — it's "place already-finished images on screen".

Expand Down Expand Up @@ -102,6 +102,6 @@ Why this is expensive: layout doesn't just compute geometry for the touched elem

> `width`/`top` changes cost Layout + Paint on the main thread; `color`/`shadow` changes cost Paint only; `transform`/`opacity` skip both and stay on the compositor thread — that's the entire reason to prefer animating the latter.

[[browser/Event Loop/index|Event Loop & Rendering]]
[[browser/Event Loop/Event Loop, Microtasks, Macrotasks|Event Loop — where render fits into the loop]]
[[browser/index|Browser]]
[[browser/Event Loop, Microtasks, Macrotasks|Event Loop — where render fits into the loop]]
#browser
5 changes: 2 additions & 3 deletions content/browser/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ title: browser

# Browser

- [[browser/Event Loop/index|Event Loop & Rendering]]
- [[browser/Event Loop/Event Loop, Microtasks, Macrotasks|Event Loop, Microtasks, Macrotasks]]
- [[browser/Event Loop/Rendering Pipeline|Rendering Pipeline: Layout, Paint, Composite]]
- [[browser/Event Loop, Microtasks, Macrotasks|Event Loop, Microtasks, Macrotasks]]
- [[browser/Rendering Pipeline|Rendering Pipeline: Layout, Paint, Composite]]
- [[browser/Network/index|HTTP & Network]]
- [[browser/Network/TCP & TLS Handshake|TCP & TLS Handshake]]
- [[browser/Network/HTTP Headers & Caching|HTTP Headers & Caching]]
Expand Down