Notes from the Frontendmaster's FE System Design, by Evgenii Ray.

Box model

• 4 layers: content, padding, border, margin.
• Box has 2 main properties: size, type
• Box size has 2 types: intrinsic, restricted
• Box size intrinsic: when no rules applied to it - the box uses its content to determine the space it occupies.
• Box size restricted: is governed by a set of rules applied to it. Explicit width, height, constrained by parent elements or other boxes.
• Box type has 3 types: block level, inline level, anonymous box.
• Box type block. Takes 100% width of the parent. Height is determined by the intrinsic size (size of the content). Rendered top to bottom and participate in Block Content Formatting (BCF).

• Box type anonymous
• Mathematics of box elements:
• box-sizing: content-box - width = margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right.
• box-sizing: border-box - width: margin-left + content-width + margin-right.
• Box type inline. Rendered as a string, flowing from left to right and top to bottom. They participate in Inline Formatting Context (IFC) and generate inline-level boxes.

• Mathematics of inline elements: ignores width and height, vertical margins and padding does not alter the height of the inline element.

Browser formatting context

• Elements within a context are shielded from rules of external contexts.
• Formatting context family: Flex, Grid, Inline, Block.

Browser positioning system

• Normal flow: left to right or right to left.
• Position: allows overright how the browser render stuff.
• Position static: applied by default to all elements by the browser.
• Position relative: browser render the same as the normal flow, but the final position is determined by top, right, left, bottom. It doesn't impact other elements because el is removed from normal flow. We create a new stacking context (new realm).
• Containign block - ref point for the element how it calculates the position.
• Position absolute: element is removed from the normal flow. New stacking context, position is determined by top, left, right, bottom. Left top is default and position is adjusted.
• Relative and absolute remove items from normal flow. We can achieve isolation and perf optimization.
• Stacking context. it's teh z index (depth). Connected to gpu. Provides a layering system.

Reflow

• Browser reads html and compiles 2 trees: DOM, CSSOM. THis results in render tree. Then there is reflow process, when js tries to modify the dom tree or the styles. Kicked off by JS > styles (recaluclates dom and cssom trees) > layout (recalculates teh position, very cpu bound, can block the render thread) > Paint (drawing the pixelsin the monitor, involves the gpu, doens't block teh render thread, and its fast because gpu is very fast) > Composite (multiple layers, ararnge them in right order). The transform css property doesn't use CPU, only GPU.

Composition layers

• How the broswers use the GPU. Old used cpu. new ones use cpu and gpu in parallel.
• Render layer constructed when using relative or absolute or transform.
• Graphical layer. constructed when we use some 3d. Uses cpu and gpu. Is expensive, it can blow up your vram and cpu.
• Rule of thumb: use properties that do not trigger the full pipeline and minimise the reflow. https://csstriggers.com/

Browser rendering

...