Browser Render Pipeline and Main Thread Thinking
The browser reads HTML and CSS, calculates sizes and positions, paints pixels, and finally shows the page. If we force too much work on the main thread, the page feels slow or jumpy.
It is like setting up a classroom: first read the seating plan, then place desks, then paint the labels, and only then let students enter. If you keep moving desks while painting, everything becomes messy and slow.
Topic practice prompts
The browser parses HTML and CSS, builds structures for them, calculates layout, paints pixels, and composites layers to show the final screen.
- What is layout thrashing?
- Which CSS properties are cheaper to animate?
Layout thrashing happens when code repeatedly reads layout values and writes styles in a pattern that forces extra recalculation work.
- Why are transform and opacity preferred for many animations?
- How would you detect this in DevTools?
Last-day revision lines
- Parse, style, layout, paint, composite.
- Avoid layout thrashing.
- Measure first when animations feel janky.
- Main-thread time is UX time.
- Web performance and security: context/Web perfomance and security.docx
- HTML CSS JS questions: context/100 important HTML, CSS, and JavaScript interview questions.pdf
Local resource packs for this topic
Use these local packs when you want broader official-source context without leaving the app.
JavaScript Runtime and Closures
A local offline guide to the JavaScript runtime ideas interviewers repeatedly use for JS and browser rounds.
Closures, lexical scope, event loop, microtasks, timers, promise ordering, and DOM callback behavior.
Open local study packRelated topics to study after this one
DOM Events and Event Delegation
Cover bubbling, capturing, target vs currentTarget, and scalable event handling.
Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.
Loading Strategy, Caching, and Core Web Vitals
Answer LCP, CLS, INP, image strategy, caching, and bundle questions with product-level clarity.
Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.
React Performance Toolkit
Measure first, then reduce render surface, expensive work, and bundle cost.
Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.