A critical rendering path azoknak a lépéseknek a sorozata, amelyeket a böngésző lefuttat, hogy a HTML-t, CSS-t és JS-t képernyőn megjelenő pixelekké alakítsa. Bármi, aminek az első paint előtt be kell fejeződnie, render-blocking (renderelést blokkoló).
<script> megállítja a HTML feldolgozását, amíg letöltődik és lefut.<!-- 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>
Használj defer-t a DOM-hoz nyúló alkalmazáskódhoz, és async-ot a független szkriptekhez, mint az analytics. A kritikus CSS-t ágyazd be inline, a többit pedig blokkolás nélkül töltsd be.
Ez a mentális modell szinte minden betöltési idő javítása mögött: a render-blocking CSS/JS a lassú első paint és a gyenge LCP első számú oka. Ha tudod, miért létezik a defer/async, az megmutatja, hogy érted a böngészőt, nem csak a szintaxist.
IT interjúkérdések gyűjteménye részletes válaszokkal — Juniortól Seniorig.
Adományozás