Cette page décrit en mots le fonctionnement d'un fureteur. J'y montre les opérations qu'il effectue lorsqu'un internaute demande une page Web et la reçoit. Le processus d'analyse qui suit permet alors de construire la structure du DOM et d'y loger le contenu de la page. Il construit ensuite l'arbre de rendu qui inclus la mise en forme, effectue la mise en page et dessine finalement la page à l'écran. Finalement, je détaille le fonctionnement des moteurs de rendu Gecko et Webkit.
Le «fureteur» est l'outil de l'internaute. Il lui permet de surfer entre les pages web de ses sites préférés. En autant qu'il est concerné, ça s'arrête là. Il a le résultat visuel sur son écran et il est content. Cependant, que se passe-t-il dans le fureteur entre la réception d'une page Web et son rendu visuel sur l'écran de l'internaute?
L'image qui suit montre l'interaction entre un serveur Web et ses clients.
L'internaute demande une page (requête HTTP) au serveur Web et le fureteur interprète la réponse et l'affiche sur l'écran. Comment cette tâche s'accomplit-elle?
Pour commencer, voyons ce qu'il est. Le fureteur est un logiciel possédant une interface graphique composée de boutons de navigation, d'une barre d'adresse, d'une barre d'état (généralement en bas de fenêtre) et dont la majeure partie de la surface sert à afficher les pages web.
Suite à une demande de l'internaute (requête HTTP) à un serveur Web, un fichier HTML est transféré et le fureteur va le lire, l'analyser et le rendre visuellement sur l'écran.
Ce qu'il fait!
En lisant et en interprétant le fichier HTML, le fureteur reçoit la structure et le contenu de la page. Grâce à des liens vers des ressources CSS et Javascript, il reçoit la mise en forme et le comportement.
Structure
Le fichier qui est reçu est un fichier HTML comprenant des instructions codées pour le fureteur. En effet, HTML est un langage de balises qui permet de décrire le contenu et la structure d’une page Web au moyen de balises. Avec les balises, il crée des objets (au sens Javascript) et les place dans une structure hiérarchique appelée DOM (Document Object Model).
Mise en forme
Une feuille de style (style sheet) est un ensemble de règles à appliquer aux éléments HTML. L’utilisation de CSS permet de séparer les responsabilités dans la présentation des données à l’utilisateur. HTML peut ainsi être responsable du contenu de la page affichée alors que CSS sera responsable de la mise en page. En modifiant seulement le CSS, il est ainsi possible de modifier l’apparence d’une application Web.
Comportement
HTML n’offrant pas de comportement dynamique aux pages Web, des langages de scripts et des extensions aux aux capacités des fureteurs ont été ajoutés. Le plus connu est Javascript qui permet de manipuler les objets de l’arbre DOM et de gérer la réaction à des événements générés par les objets de la page. Il permet en fait de modifier la page HTML sans envoyer de requête HTTP au serveur.
Afin de compléter JavaScript pour permettre de modifier la page HTML affichée en communiquant avec le serveur HTTP, sans recharger toute la page, Microsoft a développé en 2002 un nouvel objet Javascript: XMLHttpRequest. Aujourd'hui la plupart des navigateurs intègre cet objet. Cela permet de communiquer de manière asynchrone avec le serveur, ce que ne permet pas actuellement HTML.
Plus de détails
Logiquement parlant, un fureteur est constitué de plusieurs composants:
- L'interface usager (IA) - c'est ce qu'on voit à l'écran (barre d'adresse, menus, boutons) à l'exception de la fenêtre affichant la page demandée;
- Le moteur du fureteur - gère les actions entre l'interface usager et le moteur de rendu;
- Le moteur de rendu - c'est le coeur du fureteur. Il est responsable d'afficher le contenu demandé par l'internaute. Pour du contenu HTML, il lira et analysera les codes HTML, CSS et Javascript et il affiche le contenu à l'écran;
- Le support réseau - pour des appels réseaux comme des requêtes HTTP
- Le support de l'IA - pour dessiner les objets-fenêtre (widjets) comme les fenêtres et les boîtes de listes. Cette partie du fureteur expose une interface indépendante du système d'exploitation de l'ordinateur de l'usager mais utilise quand même son système d'opération.
- Interpreteur Javascript - utilisé pour analyser et exécuter le code Javascript, il présente une interface programmable lui permettant de créer, manipuler et supprimer des éléments du DOM.
- Entrepôt de données - pour y entreposer des données localement (ex: les cookies).
Le moteur de rendu
Chaque fureteur Internet est différent, techniquement d’une part pour ses priorités lors de son développement et d’autre part pour sa manière d’implémenter les standards du Web, définis par le W3C (dernier exemple en date : HTML5) et l’ECMA. Pour afficher le contenu des sites Internet, les fureteurs utilisent un moteur de rendu qui peut être Trident pour Internet Explorer (Tasman pour Internet Explorer sur Mac), Gecko pour Firefox, WebKit pour Safari, Blink pour Google Chrome, etc.
D'une façon générale, à la réception de la page venant du serveur, le moteur de rendu effectue son travail selon le disgramme de flux présenté ici:
Ça ressemble à ceci:
Création de l'"arbre de contenu" (DOM) | Le moteur de rendu commence la lecture du contenu du document demandé à partir du composant réseau. Il va alors commencer l'analyse du document HTML reçu et convertir les balises en noeuds et les placer dans une structure hiérarchique arborescente appelée DOM ou "arbre de contenu". |
---|---|
Création de l'"arbre de rendu" | Il va ensuite analyser les données de style, qu'elles soient dans des fichiers ou insérés dans le code HTML. Ces informations de présentation en conjonction avec les instructions insérées dans les balises vont être utilisées pour former une nouvelle structure hiérarchique arborescente appelée "arbre de rendu". Cet arbre contient maintenant des rectangles qui ont des attributs visuels comme une couleur et des dimensions. De plus, il sont dans le bon ordre pour être rendus à l'écran. |
Mise en page | On passe maintenant à la phase "mise en page": il donne à chaque noeud les coordonnées exactes de l'endroit où ils vont s'afficher à l'écran. |
Affichage | Il ne reste plus qu'à dessiner cet arbre sur l'écran. C'est fait par le support de l'IA qui permet au fureteur d'accéder aux fonctionalités de dessin du système d'opération de l'ordinateur client. |
Il est important de comprendre qu'il s'agit d'un processus graduel. Afin d'améliorer l'expérience de l'usager, le moteur de rendu va essayer d'afficher le contenu à l'écran le plus tôt possible. Il n'attendra pas d'avoir tout analysé le code HTML avant passer les phases mise en forme et disposition. Une partie du contenu va être analysée pendant que le processus continue à lire le restant du contenu en provenance du réseau.
C'est au moment où le moteur de rendu a terminé la lecture du fichier HTML et qu''il a créé le DOM que l'événement jQuery $(document).ready() survient. Javascript (et jQuery) peuvent alors entrer en action pendant que les autres étapes se poursuivent. La page est finalement affichée et l'internaute peut interagir avec elle.
Moteurs de rendu des fureteurs modernes
Sur les ordinateurs de bureau et les portables, les fureteurs les plus courants aujourdhui sont Chrome, Internet Explorer, Firefox, Safari et Opera (Chrome, Firefox et Safari occupent environ 70% du marché).
Voici deux exemples montant la façon dont les moteurs de rendu Gecko et Webkit fonctionnent (ces exemples sont tirés de How Browsers Work: Behind the scenes of modern web browsers.
Gecko
Gecko est le moteur de rendu utilisé par Firefox et Netscape Navigator pour ne nommer que ceux là. Il est une ré-écriture du moteur de rendu qui équipait Netscape Navigator à l'origine. On y a ajouté toutes les fonctionnalités que doivent avoir les fureteurs modernes, il respecte les standards du web et les recommandations du W3C et fonctionne sur les systèmes d'exploitation Windows, Linux et Mac OS X. Son diagramme de flux est le suivant:
Webkit
Webkit est le moteur de rendu utilisé par Safari et Chrome (et Android sur les mobiles). Lancé en 2003 par la firme Apple, il était originalement réservé au système d'exploitation Mac OS mais a par la suite été adapté à Windows et Linux. Il équipe maintenant les versions récentes d'Opera et il a généré un "fork" appelé Blink qui équipe Google Chrome. Voici son diagramme de flux: