Mieux connaître ses outils (N°1) – Le moteur de rendu HTML

Mar 20, 2015
UX-REPUBLIC

Dans nos métiers, il est bon de mieux comprendre les outils que nous utilisons afin de mieux s’en servir et en tirer le meilleur parti. Voici donc le premier article d’une série à venir, centré aujourd’hui sur un outil de base, qu’on utilise quotidiennement sans forcément y penser : le moteur de rendu HTML.

“En tant que développeur Web, apprendre le fonctionnement interne d’un navigateur vous aide à prendre de meilleures décisions et à comprendre les justifications derrière les bonnes pratiques de développement.”
– Paul Irish, Chrome Developer Relations

Un moteur de rendu HTML, c’est quoi ?

Comme vous le savez certainement déjà, le moteur de rendu HTML est un sous-programme, un ensemble de bibliothèques logicielles que les navigateurs utilisent pour afficher les pages web. Il est propre à chaque navigateur. C’est à dire qu’à partir du code que vous écrivez, vous développeur, le moteur de rendu HTML va créer un visuel que l’utilisateur pourra voir sur son écran, et avec lequel il pourra interagir.

Il en existe plusieurs (Liste sur Wikipedia).

Moteur_vaz

Du fait de ces moteurs de rendu, chaque navigateur possède sa propre interprétation des langages HTML, Javascript et CSS. C’est d’ailleurs quelque chose qui nous pose régulièrement des soucis lors des phases d’intégration.

Le moteur de rendu, c’est un peu la clef de voûte du navigateur, ou son coeur comme vous préférez. Sa responsabilité est très importante. L’affichage des contenus sur l’écran tel qu’on le souhaite étant notre objectif majeur.

Pour cet article, j’ai choisi de me concentrer sur les moteurs de rendu HTML, mais sachez quand même qu’il existe d’autres types de moteurs de rendu. Ce n’est pas un outil propre uniquement à la gestion des documents HTML.

Un moteur de rendu est un logiciel qui va recréer une image à partir de données numériques. le terme est générique et s’applique à plusieurs types de programmes effectuant des tâches ou calculs plus ou moins simples.
Un moteur de rendu peut par exemple être chargé de construire une image 3D à partir d’informations sur les objets à dessiner, la texture de leur surface et les sources de lumière à prendre en compte.

Selon les cas, chaque moteur de rendu HTML est plus ou moins à jour sur les normes du W3C…. Ou plus ou moins buggé. Par exemple, le rendu des animations CSS3 n’est pas le même entre Firefox (qui tourne sous Gecko) et Chrome (qui tourne sous Blink/Webkit) : Le résultat est beaucoup plus fluide sur Chrome, alors qu’on obtient un rendu plutôt saccadé sur Firefox.

les-temps-modernes-5

Par défaut, le moteur de rendu peut afficher des documents HTML, XML et des images. Il peut en afficher d’autres types avec un plug-in (ou extension de navigateur). Par exemple, un document PDF s’affiche en utilisant un plug-in de visualisation de PDF que l’on installe sur son navigateur (comme Adobe Reader), les éléments Flash seront visibles grâce au plugin Adobe Flash Shockwave Player… etc

Mais reconcentrons-nous sur le sujet principal : l’affichage de HTML et d’images qui sont formatés à l’aide de CSS.

Et comment ça marche cette bête-là ?

Dans un premier temps, le moteur de rendu va obtenir le contenu du document HTML que l’utilisateur souhaite afficher (il a cliqué sur un lien par exemple). Il va charger par morceaux de 8ko.
Le moteur de rendu va faire l’analyse du document HTML et il va construire l’arbre de contenu à partir des noeuds rencontrés dans le document. Chaque noeud correspond à chaque élément.

Il va ensuite analyser les données de style, contenues dans les fichiers CSS externes, mais aussi celles qui sont directement insérées dans le document HTML, les éléments de style. Ces informations seront utilisées pour créer un autre arbre.

L’arbre de rendu contient des rectangles avec des attributs visuels comme les couleurs et les dimensions. Les rectangles sont dans le bon ordre pour être affichés sur l’écran.

Après la construction de l’arbre de rendu, le moteur va obtenir les coordonnées exactes où il devra faire apparaitre les éléments à l’écran. Il va être ‘lu’ et chaque noeud sera dessiné en utilisant les couches d’arrière-plan de l’interface utilisateur.

Ce qu’il faut avoir à l’esprit, c’est que c’est un processus qui se fait graduellement. Le moteur de rendu va afficher le moindre contenu qu’il aura pu obtenir sur l’écran dès que possible. Il n’attendra pas que tout le code HTML soit analysé avant de commencer à construire la vue finale.

Vous avez certainement déjà remarqué ce phénomène lorsque votre connexion internet est plus lente qu’à l’accoutumée, et que la page web semble ‘cassée’. En effet, les pages web ne s’affichent pas ligne par ligne, en partant du haut vers le bas, comme les images. La partie basse de la page peut très bien s’afficher la première si la partie haute est plus lourde à charger. Les parties du contenu seront analysées et affichées, tandis que le processus se poursuit avec le reste de la page qui continue à charger. Les derniers éléments à s’afficher étant les images les plus lourdes.

Les principaux moteurs de rendus HTML

– Gecko

“NGLayout” à l’origine, Gecko est open source et libre, il est lancé par la fondation Mozilla en 1998, lorsque Netscape publie le code source de son navigateur web Netscape Navigator, le rendant ainsi open source. Netscape crée alors la fondation Mozilla, dans le but de continuer à développer Navigator. Gecko fait alors partie intégrante de Netscape Navigator.

Il a été conçu pour lire le HTML, CSS, XUL et Javascript et les interpréter. On le retrouve dans diverses applications comme Firefox, Thunderbird, Netscape Navigator, AOL Explorer ou Camino. Les produits utilisant la même version de Gecko ont un support identique des standards.

L’objectif de Gecko est un moteur portable qui respecte les standards du web et les recommandations du W3C. Il fonctionne sur les systèmes d’exploitation Windows, Linux et Mac OS X2. Il est écrit en langage de programmation C++ et distribué sous les licences MPL, GPL et LGPL3. (Source: Wikipédia)

– Trident

Trident est le nom du moteur d’affichage de pages web utilisé dans Internet Explorer dans ses versions Windows, et par extension, tous les navigateurs basés sur Internet Explorer. Il est, également, souvent évoqué sous le nom “MSHTML”, correspondant au nom de la bibliothèque de liaison dynamique du moteur. Il est développé par Microsoft en C++

Il a été conçu sous la forme d’un composant logiciel de la couche COM, permettant aux développeurs d’ajouter à leurs applications les fonctionnalités du moteur dans tout environnement de développement supportant COM, et notamment Visual Studio. (Source: Wikipedia)

– Webkit

WebKit est une bibliothèque logicielle libre permettant aux développeurs d’intégrer facilement un moteur de rendu de pages Web dans leurs logiciels. Elle est disponible sous licence BSD et GNU LGPL. Originellement réservée au système d’exploitation Mac OS X (à partir de la version 10.3 Panther), elle a été portée vers Linux et Windows. Ainsi le portage de WebKit pour les environnements GTK+ et Qt se nomment respectivement WebKitGTK+ et QtWebKit.

WebKit est un fork du moteur de rendu KHTML du projet KDE utilisé notamment dans le navigateur Konqueror. Elle intègre deux sous-bibliothèques : WebCore et JavaScriptCore correspondant respectivement à KHTML et KJS.

Il passe avec succès le test Acid2 et la version en développement obtient 100 % au test Acid3 depuis le 27 mars 2008.

Webkit intégrait un moteur JavaScript qui portait le même nom. Il a depuis été réécrit, le nouveau moteur s’appelle désormais SquirrelFish, beaucoup plus rapide que le précédent.

En février 2012, le succès de diffusion de WebKit amène « le groupe OpenWeb, prônant la standardisation des technologies de développement web, à lancer un appel aux développeurs et à pointer les conséquences de la dominance de WebKit sur le mobile et des pratiques des développeurs ». En janvier 2013, la position dominante de Webkit pose encore problème. (Source: Wikipedia)

Google a récemment quitté Webkit pour créer son propre moteur de rendu, Blink.

La suite… Bientôt 🙂

Emmanuelle Guyot – UX-Scientist

UX-REPUBLIC est une agence spécialisée en conception centrée utilisateur. Nous sommes également centre de formation agréé. Retrouvez toutes nos formations en UX-DESIGN sur notre site training.ux-republic.com