Qu'avez-vous étudié sur le moteur du navigateur?

Le moteur du navigateur se compose de plusieurs composants clés:

• Moteur JavaScript — responsable de l’analyse et de l’exécution du code JS. Par exemple, V8 dans Chrome, SpiderMonkey dans Firefox. Il compile le JS en code machine et optimise son exécution.

• Moteur de rendu (moteur de layout) — responsable de l’analyse du HTML et du CSS, de la construction du DOM et du CSSOM, du calcul des styles, du layout (placement des éléments) et du rendu de la page. Exemple : Blink dans Chrome, Gecko dans Firefox.

• Couche réseau — gère les requêtes HTTP, le chargement des ressources (HTML, CSS, JS, images).

• Sécurité — inclut la politique de même origine (Same-Origin Policy), le sandboxing, CORS, la protection contre XSS et autres attaques.

Le fonctionnement du moteur commence par le chargement du HTML, la construction du DOM, tandis que CSS et JS sont chargés en parallèle. Après la construction du DOM et du CSSOM, le layout et le paint sont effectués. Le moteur JS peut influencer le DOM, ce qui peut entraîner un layout supplémentaire.

Exemple de cycle de vie simplifié :

1. Chargement du HTML ->
2. Construction du DOM ->
3. Chargement et parsing du CSS ->
4. Construction du CSSOM ->
5. Exécution du JS, pouvant modifier le DOM ->
6. Layout (calcul des tailles et positions) ->
7. Paint (rendu) ->
8. Composition (assemblage des couches pour l’affichage)

Des optimisations sont également étudiées, comme minimiser le reflow et le repaint, le chargement paresseux (lazy loading), le travail avec le cache et le chargement asynchrone des ressources.