Mozilla est actuellement en train de créer un navigateur Web de nouvelle génération qui tire pleinement parti des possibilités actuelles du matériel informatique afin de gagner en efficience. Mozilla prépare pour fin 2017 une version totalement nouvelle de Firefox, basée non plus sur le moteur de rendu dénommé Gecko mais un nouveau moteur dénommé Quantum.

Selon la philosophie développée dans le projet Electrolysis de Mozilla qui vise à gagner en vitesse d’exécution en exploitant mieux les possibilités des processeurs à plusieurs cœurs ainsi que l’utilisation de l’accélération apportée par le processeur graphique de l’ordinateur ou du mobile.

Alors que l’on peut découvrir dès maintenant la version Dev de Firefox Quantum avant sa sortie public en novembre 2017, profitons-en pour comprendre comme ça tourne un moteur de rendu d’un navigateur.

‘Engines are important, both in cars and in browsers.’
– Mozilla Foundation

Le marché du moteur de rendu Web

Développé à la fin des années 90, le moteur de rendu Gecko est aujourd’hui exploité par Firefox pour afficher des pages web à l’écran. En mesure de fonctionner au sein de multiples environnements (Windows, Mac OS X, GNU/Linux…), il est l’un des moteur de rendu le plus utilisé sur le web, avec Trident (Internet Explorer) remplacé par EdgeHTML pour le navigateur Edge dans Windows 10, et WebKit (Safari & Opera) et l’actuel leader Blink sous le capot de Google Chrome.

Flashback to 1990s

Mozilla Firefox est un navigateur web libre et gratuit, développé et distribué par l’organisation Mozilla Foundation.

La Mozilla Foundation, par l’intermédiaire de son moteur de rendu Gecko, met à l’honneur dans ses logiciels les normes et standards ouverts, en priorité ceux du W3C. Ainsi, Mozilla Firefox supporte les standards du Web les plus basiques comme HTML (HyperText Markup Language), CSS (Cascading Style Sheets), XML (Extensible Markup Language) ou JavaScript.

HyperText Markup Language

HTML (HyperText Markup Language) est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images et des formulaires de saisie.

HTML a été conçu pour baliser (ou marquer) simplement le texte structuré avec des balises (balise paragraphe), notamment pour y ajouter des hyperliens (balise ancre).

HTML est une des trois inventions à la base du World Wide Web, avec le Hypertext Transfer Protocol (HTTP) et les adresses web URL (Uniform Resource Locator).

HTML a été inventé pour permettre d’écrire des documents hypertextuels liant les différentes ressources d’Internet avec des hyperliens. Aujourd’hui, ces documents sont appelés « page web ».

Les premiers éléments du langage HTML comprennent le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par index. La description de HTML est alors assez informelle et principalement définie par le support des divers navigateurs web contemporains.

NCSA Mosaic

Avec le navigateur NCSA Mosaic du ‘National Center for Supercomputing Applications’, le langage HTML connaît deux inventions majeures. D’abord l’invention de l’élément IMG permet d’intégrer des images (dans un premier temps, uniquement aux formats GIF) aux pages web. Ensuite l’invention des formulaires rend le web interactif en permettant aux visiteurs de saisir des données dans les pages et de les envoyer au serveur web.

Netscape Navigator

Avec l’apparition de Netscape Navigator, le 13 octobre 1994, le support de nombreux éléments de présentation est ajouté : attributs de texte, clignotement, centrage, etc. Le développement de HTML prend alors deux voies divergentes.

D’une part, les développeurs de navigateurs s’attachent à maximiser l’impact visuel des pages web en réponse aux demandes des utilisateurs.

D’autre part, les concepteurs du web proposent d’étendre les capacités de description sémantique (logos, notes de bas de page, etc.) et les domaines d’applications (formules mathématiques, tables) de HTML.

En l’occurrence, les feuilles de style en cascade (CSS) sont prévues pour HTML. Seul le support des tables est rapidement intégré aux navigateurs, notamment parce qu’il permet une très nette amélioration de la présentation. Outre la multiplication des éléments de présentation, les logiciels d’alors produisant et consommant du HTML conçoivent souvent les documents comme une suite de commandes de formatage plutôt que comme un marquage représentant la structure en arbre aujourd’hui appelée Document Object Model (DOM).

Le manque de structure du HTML alors mis en œuvre est parfois dénoncé comme étant de la « soupe de balises », en anglais : tag soup. En France, on disait « soupe de div » !

Avec l’introduction des CSS (Cascading Style Sheets) et du DOM (Document Object Model), il a fallu considérer que les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments.

Un document HTML est séparé entre un en-tête (header) et un corps (body). L’en-tête contient les informations sur le document, notamment son titre et éventuellement des métadonnées. Le corps contient le contenu, ce qui est affiché.

Du HTML+ au HTML 4.0

En mars 1995, le World Wide Web Consortium (W3C) nouvellement fondé propose le résultat de ses recherches sur HTML+ : le brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes. Fin 1995, HTML 2.0 est finalisé.

Le 14 janvier 1997, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée début 1996, donc avec une partie des additions de Netscape Navigator et d’Internet Explorer. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation. HTML 3.2 précède de peu HTML 4.0 et contient des éléments en prévision du support des styles et des scripts.

Le 18 décembre 1997, le W3C publie la spécification HTML 4.0 qui standardise de nombreuses extensions supportant les styles et les scripts, les cadres (frames) et les objets (inclusion généralisée de contenu). HTML 4.0 apporte également différentes améliorations pour l’accessibilité des contenus dont principalement la possibilité d’une séparation plus explicite entre structure et présentation du document, ou le support d’informations supplémentaires sur certains contenus complexes tels que les formulaires, les tableaux ou les sigles.

Le développement de HTML en tant qu’application du Standard Generalized Markup Language (SGML) est officiellement abandonné au profit de XHTML, application de Extensible Markup Language (XML). Cependant, en 2004, des fabricants de navigateurs web11 créent le web Hypertext Application Technology Working Group (WHATWG) dans le but, notamment, de relancer le développement du format HTML et de répondre aux nouveaux besoins du Web.

Du XHTML au HTML5

En mars 2007, tirant la conséquence des réticences d’une partie de l’industrie et des concepteurs de contenus web face à XHTML 2.0, le W3C relance le développement de HTML et crée un nouveau groupe de travail encadré par Chris Wilson (Microsoft) et initialement Dan Connolly (W3C), maintenant Michael Smith (W3C). Il s’agit notamment :

Les travaux du WHATWG (Web Hypertext Application Technology Working Group) ont été formellement adoptés en mai 2007 comme point de départ d’une nouvelle spécification HTML5. Ce document a été publié sous forme de Working Draft le 22 janvier 2008. Parmi les principes de conception évoqués par le groupe de travail figurent en particulier :

En janvier 2011, des divergences de points de vue entre Ian Hickson (ingénieur chez Google), qui écrit la spécification HTML5, et les membres du groupe de travail du W3C conduisent le WHATWG à créer HTML Living Standard, une spécification de HTML prévue pour être en constante évolution, afin de coller avec les développements rapides de nouvelles fonctionnalités par les développeurs de navigateurs, par opposition à des versions numérotées et donc fixes jusqu’à l’itération suivante.

Gecko since 1998

Gecko est un moteur de rendu pour présenter des pages web. Lancé par la fondation Mozilla en 1998, open source et libre, il est incorporé dans diverses logiciels tels que Netscape Navigator, puis Firefox et le logiciel client de messagerie Thunderbird créé par Mozilla pour envoyer et recevoir des emails.

Gecko est né 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 ainsi partie intégrante de Netscape Navigator.

La Mozilla Foundation succède à Netscape Communications Corporation en tant qu’entité chapeautant Mozilla.org.

Historiquement, le nom Mozilla a été utilisé au sein de l’entreprise Netscape Communications comme nom de code pour le navigateur web Netscape Navigator.

L’essentiel de l’équipe à l’origine de Mosaic a quitté le NCSA dès 1994 pour rejoindre Netscape Communications Corporation et développer Netscape Navigator. En particulier, Marc Andreessen est un cofondateur de Netscape Communications Corporation avec Jim Clark. L’apparition de Netscape Navigator causa un déclin immédiat, rapide et définitif de l’usage de Mosaic. Il n’y a cependant aucun lien commercial ni technique entre Mosaic et Netscape Navigator, qui a été refait à partir de zéro. Initialement, Netscape Communications Corporation a été fondé sous le nom de Mosaic Communications Corporation, mais a dû changer de nom, n’ayant pas le droit d’utiliser ‘Mosaic’.


‘a new web browser known as “Mozilla”, being short for “Mosaic Killer,” but Mosaic was not amused, so the public name was changed to Netscape, and Netscape called itself Mozilla/1.0 (Win3.1), and there was more rejoicing. And Netscape supported frames, and frames became popular among the people, but Mosaic did not support frames, and so came “user agent sniffing” and to “Mozilla” webmasters sent frames, but to other browsers they sent not frames.’ Quote via History of the browser user-agent string


Le projet Gecko (initialement appelé NG Layout) vise la réécriture du moteur de Netscape Navigator : les fonctionnalités que devait offrir un navigateur avaient tellement évolué depuis sa naissance que la construction du moteur de Netscape, qui était appropriée au début de son existence, était devenue caduque.

La réécriture du moteur a permis d’obtenir un navigateur qui offre les mêmes possibilités avec moins de code source, étant ainsi rapide, plus simple à maintenir et à faire évoluer.

Six mois après la publication en open source, l’objectif de la fondation Mozilla a alors été de travailler sur des changements en profondeur en vue de faire face à des problèmes qui ne pouvaient pas être contrés par de simples patches10. Un des objectifs de Gecko a été dès le départ le strict respect des standards du web, ainsi que les recommandations du W3C.

En 2002, Mozilla 1.0, motorisé par Gecko est lancé. Il est reconnu comme celui qui a la meilleure prise en charge du standard CSS. La même année, Netscape Navigator passe de la version 4 à la version 6, motorisée par Gecko.

En 2003, America Online rachète la société Netscape. La fondation Mozilla devient alors une association sans but lucratif indépendante.

sous le capot du moteur Gecko

Le moteur Gecko est l’ensemble des bibliothèques logicielles que les navigateurs web utilisent pour afficher des pages web. Il s’occupe, à partir du code HTML d’une page web, de faire quelque chose que l’utilisateur peut voir et avec lequel il peut interagir.

Les fonctions offertes par Gecko sont notamment : recevoir les documents selon différents protocoles réseau (HTTPS), analyser le document HTML, disposer le contenu sur la page, le dessiner en respectant les polices et les feuilles de style, décoder et afficher des images, créer des widgets, assurer des communications chiffrées et certifiées, permettre la manipulation du contenu par programmation en langage Javascript.

schema TCP IP HTTPS - 2017 - by WEBDESIGNMOTEUR
schema TCP IP HTTPS – 2017 – by WEBDESIGNMOTEUR

Gecko se charge d’examiner le code HTML d’une page web, en extraire sa structure, permettre sa manipulation par programme via le DOM (Document Object Model), puis dessiner la page web, tracer les éléments de formulaire et placer les images au bon endroit.

Le moteur de rendu calcule l’emplacement ou un élément doit être placé sur la page, puis le dessine. Le moteur Gecko sert non seulement à dessiner le contenu d’une page web, mais également l’interface graphique : les ascenseurs de déroulement (scroll bar), les barres d’outils (tool bar) et les menus (nav bar). Dans le jargon tech on parle du ‘chrome’ de l’interface utilisateur, tout ce qui est en dehors du contenu.


Under the hood layout engine

schema moteur de rendu de navigateur web - web browser layout engine - 2017 - by WEBDESIGNMOTEUR
schema moteur de rendu de navigateur web – web browser layout engine – 2017 – by WEBDESIGNMOTEUR

fonctionnement du moteur de rendu Gecko

Gecko is the name of the layout engine developed by the Mozilla Project. It was originally named NGLayout. Gecko’s function is to read web content, such as HTML, CSS, XUL (XML-based User interface Language), JavaScript, and render it on the user’s screen or print it. In XUL-based applications Gecko is used to render the application’s user interface as well. – Mozilla

Dans un premier temps, le moteur de rendu va obtenir le contenu du document HTML que l’utilisateur souhaite afficher. Le visiteur a cliqué sur un lien par exemple. Layout engine va charger par morceaux.

Le moteur de rendu va faire l’analyse du document HTML grâce au plan de la page via le DOM. Puis, il va construire l’arbre de contenu à partir des noeuds rencontrés dans le document. Chaque noeud correspond à chaque élément.

Document Object Model ?

Le document expose des informations concernant l’ensemble du document HTML ainsi que la balise ‘html’.

chaque ‘element’ expose une balise d’un document HTML ou XML, et comporte une propriété ‘attributes’ qui expose les attributs de la balise.

Chaque élément comporte des méthodes permettant d’accéder aux élément parent, enfant et frères de l’arbre ‘DOM’.

Chaque ‘text’ contient le texte qui se trouve à l’intérieur d’une balise.

Cascading Style Sheets

Le moteur de rendu 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 (inline style), les éléments de style enregistré dans la feuille de style dans un fichier .css. 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.

Les derniers éléments à s’afficher étant les images les plus lourdes. C’est d’ailleurs pour cela que les images, attendus en train de charger, peuvent déformer la page web durant quelques secondes. La parade est d’indiquer la taille des images comme ça le navigateur prépare la place immédiatement.

Quantum in 2017

En fait, au départ, Firefox Quantum était simplement désigné avec son numéro de version, 57, mais les changements annoncés sont jugés tellement significatifs qu’il a décidé de distinguer cette mouture des autres en lui donnant un nom.

Mozilla indique revoir avec son projet la manière dont le moteur affiche une page, à un niveau fondamental. Par exemple, la manière dont les feuilles CSS sont appliquées, comment les opérations DOM sont exécutées et ainsi de suite.

L’accent a été particulièrement mis sur le parallélisme des instructions et sur la déportation d’une partie des calculs vers le processeur graphique de l’appareil, et non plus son processeur.

Poursuivant la philosophie du projet Electrolysis, il s’agit d’encore plus gagner en vélocité en exploitant mieux les possibilités des processeurs à plusieurs cœurs ainsi que l’utilisation de l’accélération graphique apportée par le GPU (Graphics Processing Unit) de l’ordinateur.

Quantum layout engine

Mozilla a extrait un ingrédient essentiel de son navigateur — le compositeur graphique — pour qu’il fonctionne dans un processus distinct du processus principal de Firefox. Le compositeur détermine ce qui est à l’écran en « aplatissant » en une seule image toutes les couches graphiques que le navigateur calcule, un peu comme Photoshop est en mesure de combiner plusieurs calques. Dans la mesure où le compositeur de Quantum est géré par le processeur graphique (GPU pour Graphic Processor Unit cc nVidia & AMD) et non plus par le microprocesseur (CPU pour Central Processor Unit cc x86 Intel & x86-64 AMD ou ARM Snapdragon), cette opération s’exécute à une vitesse extrêmement élevée.

L’intérêt de Firefox Quantum est la réactivité. Le navigateur charge beaucoup plus vite les pages web, que ce soit par rapport à ses précédentes versions ou de Chrome, en profitant de ce que sont les processeurs aujourd’hui : des composants dotés non pas d’un seul cœur mais de plusieurs. Ainsi, au lieu d’en utiliser qu’un seul, de cœur, Firefox utilise ceux qui sont à sa disposition, sur PC ou dans un terminal mobile.

R&D from Servo since 2013

Les origines de Firefox Quantum remontent à quelques années. Cette mise à jour est en fait fondée sur le projet de recherche Servo, qui a vu le jour début 2013 à la suite d’un partenariat entre la fondation Mozilla et Samsung. Il s’agissait alors d’envisager la création d’un nouveau moteur de rendu pour Firefox en remplacement de l’actuel, Gecko. À cette fin, un nouveau langage de programmation, Rust, a été inventé.

Servo est nouveau moteur de rendu expérimental, développé en partenariat avec Samsung, écrit dans un tout nouveau langage de programmation, mis au point spécialement pour l’occasion par Mozilla : Rust.

Inspiré du langage de programmation C++ (1998), Rust se veut plus efficace lors de traitements qui doivent être mis en parallèle tout en demeurant sûrs.

Samsung & Mozilla team up

Le rôle de Samsung a été d’aider la fondation Mozilla à porter le projet vers la plateforme mobile Android et l’architecture ARM, qui sont particulièrement répandues dans le secteur des smartphones et des tablettes multimédias. Selon Mozilla, « Samsung a déjà contribué au backend ARM de Rust ainsi qu’à l’infrastructure nécessaire à la compilation vers Android ».

« Servo est une tentative de rebâtir le navigateur web à partir de zéro sur du matériel moderne, de repenser les anciennes suppositions au fur et à mesure. Cela signifie de s’attaquer aux causes des vulnérabilités tout en concevant une plateforme qui peut utiliser pleinement les performances du matériel de demain pour permettre des expériences nouvelles et enrichies sur le web »

‘It is intended to fill many of the same niches that C++ has over the past decades, with efficient high-level, multi-paradigm abstractions, and offers precise control over hardware resources.

But beyond that, it is safe by default, preventing entire classes of memory management errors that lead to crashes and security vulnerabilities. Rust also features lightweight concurrency primitives that make it easy for programmers to leverage the power of the many CPU cores available on current and future computing platforms.’ – Mozilla

Quantum engine w/ Stylo

Firefox Quantum s’appuie sur les travaux autour de Servo et Rust. Par exemple, Mozilla a développé un moteur CSS super rapide pour la mise en forme des pages web. Développé en Rust, il fonctionne rapidement et en parallèle sur plusieurs core processeur , au lieu de fonctionner sur une séquence plus lente sur un seul core.

‘And the first major component from Servo—a new CSS engine called Quantum CSS (previously known as Stylo)—is now available for testing in our Nightly version. You can make sure that it’s turned on for you by going to about:config and setting layout.css.servo.enabled to true.’

‘This new engine brings together state-of-the-art innovations from four different browsers to create a new super CSS engine.’

Quote via blog post mozilla.org ‘Inside a super fast CSS engine: Quantum CSS (aka Stylo)’

La fondation Mozilla a mobilisé des moyens pour agir sur d’autres critères qui peuvent influer sur la rapidité de chargement des pages web. Une meilleure priorisation des tâches a été réalisée au niveau des onglets, afin que celui qui actif (c’est-à-dire lorsque sa page est affichée à l’écran) puisse télécharger et fonctionner avant les autres onglets ouverts en arrière-plan.

Go to test Firefox Quantum

Firefox Quantum sera disponible au grand public lorsque la version 57 du navigateur sera prête. Selon le calendrier de Mozilla, la sortie de Firefox Quantum est planifiée pour le 14 novembre 2017.

On a la possibilité de tester Firefox Quantum en version Dev. J’utilise actuellement cette version de Firefox pour écrire ce post via WordPress.

TimeDM - 2017 - screen Firefox Quantum version Dev
TimeDM – 2017 – screen Firefox Quantum version Dev

Ressources :

https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/

https://blog.mozilla.org/blog/2017/09/26/firefox-quantum-beta-developer-edition/

https://blog.mozilla.org/press-fr/2017/04/20/premiers-pas-du-projet-quantum-firefox-devient-plus-rapide-plus-stable-et-plus-simple/

https://blog.mozilla.org/blog/2013/04/03/mozilla-and-samsung-collaborate-on-next-generation-web-browser-engine/

http://www.numerama.com/magazine/25574-mozilla-et-samsung-elaborent-servo-un-nouveau-moteur-de-rendu.html

http://www.numerama.com/tech/293399-firefox-quantum-5-questions-sur-la-transformation-annoncee-du-navigateur.html

https://www.nextinpact.com/news/101952-mozilla-presente-quantum-futur-moteur-rendu-firefox.htm


09/10/2017