Τι είναι το critical rendering path και τι το μπλοκάρει;

Question

IT Interview Practice · Accepted Answer

Το **critical rendering path** είναι η ακολουθία βημάτων που εκτελεί ο browser για να μετατρέψει HTML, CSS και JS σε pixels στην οθόνη. Οτιδήποτε πρέπει να ολοκληρωθεί *πριν* από το πρώτο paint είναι **render-blocking**. ## Τα βήματα 1. Parse **HTML** → χτίσιμο του DOM tree. 2. Parse **CSS** → χτίσιμο του CSSOM tree. 3. Συνδυασμός DOM + CSSOM → render tree. 4. **Layout** (θέσεις/μεγέθη) → **Paint** (pixels). ## Τι το μπλοκάρει - **Το CSS είναι render-blocking εξ ορισμού** — ο browser δεν κάνει paint μέχρι να κατέβει και να γίνει parse το CSS, επειδή χρειάζεται τα στυλ για να αποφύγει ένα flash of unstyled content. - **Το σύγχρονο JS είναι parser-blocking** — ένα απλό ` ``` Χρησιμοποιήστε `defer` για κώδικα εφαρμογής που αγγίζει το DOM, και `async` για ανεξάρτητα scripts όπως τα analytics. Ενσωματώστε inline το critical CSS και φορτώστε το υπόλοιπο χωρίς blocking. ## Γιατί έχει σημασία Αυτό είναι το νοητικό μοντέλο πίσω από σχεδόν κάθε διόρθωση χρόνου φόρτωσης: το render-blocking CSS/JS είναι η κύρια αιτία αργού πρώτου paint και κακού LCP. Το να γνωρίζετε *γιατί* υπάρχουν τα `defer`/`async` δείχνει ότι κατανοείτε τον browser, όχι μόνο τη σύνταξη.

Τα βήματα

Τι το μπλοκάρει

Γιατί έχει σημασία

Σχετικές ερωτήσεις