PaintPaint aka rasterization is the step where the browser fills in the actual pixels for every element in the layout tree, translating boxes and their computed styles (colors, borders, shadows, text) intoSep 4 · 2 min readavinashpayak.hashnode.dev
Data Persistence🧠TL;DR — Browsers give you several different ways to store data on a user's machine — cookies, localStorage, IndexedDB, and the HTTP cache — each with different size limits, lifetimes, and use casesFeb 25, 2024 · 3 min readavinashpayak.hashnode.dev
Browser Architecture🧠TL;DR — A modern browser isn't one program, it's several separate processes — browser, renderer, GPU, network — talking to each other. Splitting them up is what keeps one crashed tab from taking doFeb 18, 2024 · 3 min readavinashpayak.hashnode.dev
Compositing🧠TL;DR — Compositing stitches independently-painted layers back together on their own thread, which is why transform and opacity animations stay buttery smooth even when the main thread is busy. CoFeb 11, 2024 · 2 min readavinashpayak.hashnode.dev
LayoutLayout aka reflow is a step where the browser calculations the position and size of each element in the document considering the styles, dimensions and relationship between each element. https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMW1pYzJrYWsxZH...Jan 27, 2024 · 2 min readavinashpayak.hashnode.dev