JavaScript · Performance · Junior · Concept
What is the critical rendering path, and how can JavaScript affect it?
Short Interview Answer
CRP is the sequence to first paint: HTML/CSS/JS → DOM/CSSOM → render tree → layout → paint. JS can block parsing and delay first render.
Detailed Explanation
Parser-blocking scripts delay DOM construction. CSS blocks rendering. Strategies: defer/async scripts, split bundles, minimize critical CSS, preload key resources, avoid long tasks before hydration. Measure with LCP/FCP and waterfall charts. Inline only tiny critical JS. Understand that hydration JS can delay interactivity even after paint.
Interview Tip
Mention `defer` vs `async` script attributes.
Common Mistake
Optimizing only image sizes while ignoring blocking scripts.