Comment un navigateur affiche une page Web

On soulève le capot d’un moteur de rendu Web (WebKit) pour comprendre le processus de rendu d’une page Web avec des exemples « profilés » avec les Chrome DevTools.

Que se passe-t-il exactement lorsque vous tapez une URL, jusqu’à ce que vous voyez le contenu d’une page Web? Il y a un processus bien défini d’actions que le navigateur fait en interne, comme la construction du DOM, « render trees » et l’opération de « paint ». Le rendu d’une page Web n’est pas qu’une seule action faite par le navigateur, mais un ensemble de petites opérations et réactions à des interactions. Jetez un oeil sous le capot et vous serez surpris par la quantité de choses faites pendant quelques millisecondes.

En tant que designer ou développeur Web, comprendre comment fonctionne un navigateur nous aide à prendre de meilleures décisions et à comprendre certaines bonnes pratiques de développement front pour un Web plus efficace.