The critical rendering path er den sekvens af trin, browseren kører for at omdanne HTML, CSS og JS til pixels på skærmen. Alt, der skal afsluttes, før den første paint, er render-blocking.
The critical rendering path er den sekvens af trin, browseren kører for at omdanne HTML, CSS og JS til pixels på skærmen. Alt, der skal afsluttes, før den første paint, er render-blocking.
<script> stopper HTML-parsingen, mens det downloader og kører.<!-- Blocks parsing: browser waits here before continuing -->
<script src="/app.js"></script>
<!-- defer: download in parallel, run after HTML is parsed, in order -->
<script src="/app.js" defer></script>
<!-- async: download in parallel, run as soon as ready (order not guaranteed) -->
<script src="/analytics.js" async></script>
Brug defer til app-kode, der rører DOM'en, og async til uafhængige scripts som analytics. Inline kritisk CSS, og indlæs resten uden at blokere.
Dette er den mentale model bag næsten enhver indlæsningstids-rettelse: render-blocking CSS/JS er den største årsag til langsom first paint og dårlig LCP. At vide, hvorfor defer/async findes, viser, at du forstår browseren, ikke bare syntaksen.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér