Der Critical Rendering Path ist die Abfolge von Schritten, die der Browser ausführt, um HTML, CSS und JS in Pixel auf dem Bildschirm zu verwandeln. Alles, was vor dem ersten Paint abgeschlossen sein muss, ist render-blockierend.
Der Critical Rendering Path ist die Abfolge von Schritten, die der Browser ausführt, um HTML, CSS und JS in Pixel auf dem Bildschirm zu verwandeln. Alles, was vor dem ersten Paint abgeschlossen sein muss, ist render-blockierend.
<script> stoppt das HTML-Parsing, während es herunterlädt und ausgeführt wird.<!-- 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>
Verwende defer für App-Code, der das DOM berührt, und async für unabhängige Skripte wie Analytics. Inline das kritische CSS und lade den Rest ohne Blockieren.
Das ist das mentale Modell hinter fast jeder Ladezeit-Optimierung: render-blockierendes CSS/JS ist die häufigste Ursache für einen langsamen ersten Paint und schlechtes LCP. Zu wissen, warum defer/async existieren, zeigt, dass du den Browser verstehst und nicht nur die Syntax.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden