feat: upd answer for question N1

Author: hardsoncore

src/assets/content/eng/answers/1-How-does-the-browser-parse-a-page.md

@@ -1,58 +1,53 @@
-<p>The process of turning HTML, CSS, and JS code into an interactive page on the screen is called the <strong>Critical Rendering Path</strong>. It consists of the following sequential steps:</p>
-
-<h3>1. HTML Parsing and DOM Tree Construction</h3>
-<p>As soon as the browser receives the first bytes of an HTML document over the network, the HTML parser starts.</p>
-
-<p>The parser reads the code from top to bottom, converting tags into tokens (start tag, content, end tag), and tokens into nodes.</p>
-
-<p>From these nodes, the <span class="accent">DOM (Document Object Model)</span> is built — a tree-like structure describing the page content.</p>
-
-<p class="info">Important: HTML parsing happens incrementally (as it is downloaded) but can be blocked by synchronous scripts (<code>&lt;script&gt;</code>).</p>
-
-<h3>2. Downloading External Resources and JavaScript Execution</h3>
-<p>Upon encountering links to external resources (fonts, images, CSS, JS), the browser sends requests to download them.</p>
-
-<p>JavaScript plays a special role:</p>
-
-<p> - By default, <code>&lt;script&gt;</code> blocks HTML parsing. The browser pauses DOM construction, downloads the script, executes it, and only then continues parsing the HTML.</p>
-
-<p> - <code>defer</code> — the script is downloaded in the background without blocking parsing, and executes strictly after the entire HTML has been parsed, preserving the script execution order.</p>
-
-<p> - <code>async</code> — the script is downloaded in the background and executes immediately upon download, pausing HTML parsing during execution. The execution order is not guaranteed.</p>
-
-<p>Modern browsers use a Preload Scanner — a background process that "looks ahead" of the HTML parser, finds external resources, and starts downloading them in advance.</p>
-
-<h3>3. CSS Parsing and CSSOM Creation</h3>
-<p>As soon as a CSS file is downloaded, the browser converts it into the <span class="accent">CSSOM (CSS Object Model)</span> — a tree-like structure describing the styles for DOM nodes.</p>
-
-<p>Unlike HTML, CSS parsing cannot be incremental, as styles declared at the end of the file can override styles from the beginning.</p>
-
-<p>CSS is Render-Blocking. The browser will not start painting the page until the complete CSSOM is built to avoid a "Flash of Unstyled Content" (FOUC).</p>
-
-<h3>4. Render Tree Construction</h3>
-<p>The browser combines the DOM and CSSOM into a single Render Tree.</p>
-
-<p>The Render Tree contains only the nodes that will be visually displayed on the screen.</p>
-
-<p>Tags like <code>&lt;head&gt;</code>, <code>&lt;meta&gt;</code>, and <code>&lt;script&gt;</code> are not included in this tree.</p>
-
-<p>Nodes with the <code>display: none</code> property are excluded from the render tree.</p>
-
-<p>Nodes with <code>visibility: hidden</code> or <code>opacity: 0</code> styles remain in the tree, as they still occupy space on the screen (affecting geometry).</p>
-
-<h3>5. Geometry Calculation (Layout / Reflow)</h3>
-<p>Having the Render Tree, the browser knows what to paint, but not where.</p>
-<p>During the <span class="accent">Layout</span> phase, the browser traverses the render tree from top to bottom and calculates the exact dimensions (width, height) and coordinates of each element on the screen (in pixels) relative to the viewport.</p>
-
-<p><span class="accent">Reflow</span> is the process where the browser recalculates the dimensions and exact positioning of elements on the page. Essentially, this is a re-execution of the Layout step.</p>
-
-<h3>6. Paint</h3>
-<p>The browser knows the geometry of all elements. During the <span class="accent">Paint</span> phase, it starts filling in the pixels on the screen: drawing text, colors, borders, shadows, and background images. Painting typically occurs on multiple independent layers.</p>
-
-<h3>7. Compositing</h3>
-<p>Since elements might have been painted on different layers (for example, elements with <code>transform</code>, <code>opacity</code>, or <code>z-index</code>), in the final step, the browser overlays these layers on top of each other in the correct order on the Graphics Processing Unit (GPU), forming the final image that the user sees.</p>
-
-<h3>Key Loading Events</h3>
-<p><code>DOMContentLoaded</code> — fires when the initial HTML document has been completely loaded and parsed into the DOM, without waiting for stylesheets, images, and subframes to finish loading.</p>
-
-<p><code>load</code> — fires when the page is fully loaded, including all dependent resources (images, styles, etc.).</p>
+<h3>Critical Rendering Path</h3>
+<p>Turning HTML, CSS, and JS into an interactive page is the <span class="accent">Critical Rendering Path</span>: a chain of sequential steps from bytes to pixels.</p>
+
+<p class="info"><strong>Answer skeleton:</strong> parse HTML → <code>DOM</code>, parse CSS → <code>CSSOM</code>, combine them into a <strong>Render Tree</strong>, then <strong>Layout → Paint → Composite</strong>. HTML is parsed incrementally, but CSS and synchronous JS block this pipeline.</p>
+
+<h3>Parsing HTML → DOM, CSS → CSSOM</h3>
+<p>Once the first bytes arrive, the HTML parser reads the code top to bottom, turns tags into tokens and tokens into nodes, from which it builds the <span class="accent">DOM</span> — the tree of the page's content. Parsing happens incrementally, as bytes are downloaded.</p>
+
+<p>In parallel, the browser builds the <span class="accent">CSSOM</span> from CSS — the tree of styles. CSS is <strong>render-blocking</strong>: the browser won't paint the page until the full CSSOM is built — otherwise you'd get FOUC (a flash of unstyled content).</p>
+
+<h3>JavaScript blocks parsing</h3>
+<p>By default, <code>&lt;script&gt;</code> stops DOM construction: the browser downloads and executes the script, and only then resumes parsing the HTML.</p>
+<ul>
+  <li><code>defer</code> — downloaded in the background, executed after the HTML is fully parsed, preserving the script order.</li>
+  <li><code>async</code> — downloaded in the background and executed as soon as it's ready, pausing parsing during execution; order is not guaranteed.</li>
+</ul>
+
+<h3>Render Tree → Layout → Paint → Composite</h3>
+<p>The DOM and CSSOM are combined into the <span class="accent">Render Tree</span> — only visible nodes make it in (no <code>&lt;head&gt;</code>, <code>&lt;script&gt;</code>, or elements with <code>display: none</code>).</p>
+<ul>
+  <li><strong>Layout (Reflow)</strong> — computing the size and coordinates of each element relative to the viewport.</li>
+  <li><strong>Paint</strong> — filling in pixels: text, colors, borders, shadows, backgrounds.</li>
+  <li><strong>Composite</strong> — assembling the layers in the right order on the GPU into the final image.</li>
+</ul>
+
+<h3>DOMContentLoaded vs load</h3>
+<ul>
+  <li><code>DOMContentLoaded</code> — the HTML is loaded and parsed into the DOM, without waiting for stylesheets, images, and frames.</li>
+  <li><code>load</code> — the page is fully loaded with all dependent resources (images, styles, frames).</li>
+</ul>
+
+<p class="deep-dive">Deep Dive</p>
+
+<h3>Preload Scanner</h3>
+<p>While the main parser is stalled on a synchronous script, the auxiliary <span class="accent">Preload Scanner</span> "runs ahead" through the HTML, finds external resources (CSS, JS, images, fonts), and starts downloading them in advance — so one blocking script doesn't halt the entire load.</p>
+
+<h3>Why CSS is not parsed incrementally</h3>
+<p>Unlike HTML, the CSSOM cannot be built in pieces: a rule at the end of the file may override a rule from the beginning (the cascade). So the browser waits for all the CSS before considering the CSSOM ready.</p>
+<p class="info info--orange">A synchronous script after a <code>&lt;link&gt;</code> waits for the CSSOM to be built: JS can read computed styles, so it won't run until the CSS is loaded — this is how CSS can indirectly block parsing too.</p>
+
+<h3>What ends up in the Render Tree</h3>
+<ul>
+  <li><code>display: none</code> — the node is excluded from the tree: it isn't rendered at all.</li>
+  <li><code>visibility: hidden</code> and <code>opacity: 0</code> — stay in the tree: the elements are invisible but still occupy space and affect geometry.</li>
+</ul>
+
+<h3>Reflow and Repaint</h3>
+<p><span class="accent">Reflow</span> — a repeated Layout: recomputing geometry when sizes or positions change (window resize, node insertion, reading <code>offsetHeight</code>). Expensive, since it can cascade to both descendants and ancestors.</p>
+<p><span class="accent">Repaint</span> — redrawing without a geometry change (color, background change). Cheaper than reflow, but still loads the CPU.</p>
+<p class="info info--blue">Animating only via <code>transform</code> and <code>opacity</code> changes just the Composite stage, skipping Layout and Paint — so it runs on the GPU and holds 60 FPS (more in the question on animation performance).</p>
+
+<h3>Layers and compositing</h3>
+<p>Elements with <code>transform</code>, <code>opacity</code>, <code>will-change</code>, or <code>z-index</code> may be promoted to a separate composite layer. The browser rasterizes layers independently and stitches them on the GPU — this lets it move a layer without repainting the rest of the page.</p>

src/assets/content/eng/questions.ts

@@ -18,22 +18,16 @@ export const questions = [
         name: 'Critical Rendering Path',
       },
       {
-        name: 'How the browser builds the DOM, CSSOM, and Render Tree',
+        name: 'Parsing HTML → DOM, CSS → CSSOM',
       },
       {
-        name: 'How the browser executes JavaScript and how it affects rendering',
+        name: 'JavaScript blocks parsing (defer / async)',
       },
       {
-        name: 'What is Layout / Reflow',
+        name: 'Render Tree → Layout → Paint → Composite',
       },
       {
-        name: 'What is Repaint',
-      },
-      {
-        name: 'Composite',
-      },
-      {
-        name: 'Events DOMContentLoaded and Load - what is the difference?',
+        name: 'DOMContentLoaded vs load',
       }
     ]
   },