Le parseur construit le DOM à mesure que le HTML arrive, mais une feuille de style bloque le rendu parce que le navigateur ne peindra pas du contenu non stylé, et un script classique sans defer ni async bloque entièrement le parseur. Une fois le CSS et les scripts bloquants terminés, le navigateur construit l'arbre de rendu, fait le layout, peint et compose. Les coupables habituels sont le CSS bloquant le rendu, les scripts synchrones dans le head et les polices ou images principales découvertes trop tard.
Pourquoi les recruteurs posent cette question
Le recruteur veut savoir si vous savez raisonner à partir des principes de base sur la performance de chargement au lieu de réciter une checklist Lighthouse. Mentionner le preload scanner, defer contre async et la priorité des ressources montre une vraie familiarité. Ça prépare aussi des relances sur le LCP, puisque la correction dépend de si le goulot d'étranglement est la découverte, le réseau, ou le thread principal accaparé par le parsing et l'exécution des scripts.
Comment structurer votre réponse
- Tracez le pipeline dans l'ordre : parse, style, layout, paint, composite.
- Séparez ce qui bloque le parseur de ce qui bloque le paint.
- Mentionnez le preload scanner et la découverte des ressources.
- Terminez par les deux ou trois corrections que vous essaieriez en premier.
Exemple de réponse
À mesure que le HTML arrive, le parseur construit le DOM de façon incrémentale, et en parallèle le preload scanner regarde en avant les images, scripts et feuilles de style pour lancer les téléchargements tôt. Le CSS bloque le rendu, parce que le navigateur ne peindra pas un contenu qu'il pourrait devoir restyler une frame plus tard, donc une feuille de style lente retient le premier paint même si le DOM est prêt. Une balise script classique sans defer ni async est pire, puisqu'elle bloque entièrement le parsing pendant son téléchargement et son exécution. Une fois les styles en place, le navigateur construit l'arbre de rendu, fait le layout, peint et compose. Quand j'ai un premier paint à quatre secondes, mes trois premières vérifications sont : est-ce qu'un script dans le head bloque, est-ce que le CSS est un seul fichier énorme qui pourrait être découpé en un bloc critique inline, et est-ce que l'image du LCP est découvrable dans le HTML plutôt qu'injectée par JavaScript. Sur le dernier site que j'ai corrigé, ajouter un preload sur l'image principale et passer un script de tag manager en defer a retiré environ 1,6 seconde au LCP en 4G.
Vous passez cet entretien bientôt ? GhostPilot écoute votre appel en direct, repère la question dès qu'elle est posée et affiche une réponse structurée à l'écran en temps réel. Essayez-le lors de votre prochain entretien blanc, ou prenez un Session Pass à $29, sans abonnement, pour le jour J.
Voir comment ça marcheQuestions de relance à prévoir
- Quelle est la différence pratique entre defer et async pour vous ?
- Comment le preload scanner change-t-il ce que vous mettez dans le HTML initial ?
- Quand inliner le CSS critique vaut-il son coût en cache ?
Autres questions pour Développeur frontend
Votre recruteur posera sa propre version de celle-ci. Collez votre véritable fiche de poste dans le Question Predictor gratuit et obtenez les 20 questions que ce poste a le plus de chances de poser, avec ce que chacune cherche vraiment à sonder.
Prédire mes questions